GK SOLUTIONS
AI • IoT • Arduino • Projects & Tutorials
DEFEAT THE FEAR

CSS Introduction

⏱️ Estimated time: 15 minutes | Difficulty: Beginner

Table of Contents

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. While HTML builds the skeleton of a website, CSS is responsible for the skin—colors, layouts, fonts, and responsiveness.

Note on Separation of Concerns

By separating the presentation (CSS) from the structure (HTML), web developers improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file.

Why Should We Learn CSS?

To be a Frontend Developer, mastering CSS is equally as important as HTML and JavaScript.

  • Saves Time: You can write CSS once and then reuse the same sheet in multiple HTML pages.
  • Easy Maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
  • Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
  • Device Compatibility: CSS enables responsive web design. It allows the web page presentation to adapt to different devices (mobile, tablet, desktop).

First CSS Syntax (Hello Style)

A CSS rule set consists of a selector and a declaration block. Let's see how we style an HTML heading.

/* This is a CSS comment */
h1 {
  color: blue;
  font-size: 24px;
}
Try It Yourself

This is a styled heading

Explanation of the CSS Syntax

Let's dissect the simple CSS rule we just wrote.

1

h1 (The Selector)

The selector points to the HTML element you want to style. In this case, we are selecting all <h1> elements on the page.

2

{ ... } (The Declaration Block)

The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value.

3

color: blue; (Property and Value)

color is the property, and blue is the value. This tells the browser to make the text color of the h1 element blue. The declaration always ends with a semicolon ;.

How to Add CSS to HTML

  • Inline CSS: Using the style attribute inside HTML elements. Good for quick, single-element fixes but heavily frowned upon for large apps.
  • Internal/Embedded CSS: Using the <style> tag in the <head> section of the HTML document.
  • External CSS: Using the <link> element to link to an external CSS file. This is the standard and best practice.
← Overview Next Lesson: Selectors & Colors →