CSS Basics

Painting the Web

If HTML is the skeleton of a webpage, then Cascading Style Sheets (CSS) is the clothing. It's the language we use to control how our web content looks—from colors and fonts to the layout of entire pages. Without CSS, the web would be a very plain place, like a book with no cover design or illustrations.

CSS (Cascading Style Sheets) is like the paintbrush of the web. It brings your HTML skeleton to life, adding colors, shapes, layouts, and interactivity.

The power of CSS comes from separating the structure of a document (the HTML) from its presentation. This means you can change the entire look of a website by editing just one CSS file, without ever touching the HTML content itself. This separation makes websites easier to maintain and update.

How CSS Works

CSS works by applying rules to HTML elements. A CSS rule is made up of a few key parts: a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block, enclosed in curly braces {}, contains one or more declarations.

Each declaration is a pair: a property and a value, separated by a colon. The property is the style attribute you want to change, like color or font-size. The value is the setting you want to apply, like blue or 16px.

/* This is a CSS comment */

h1 {
  color: navy;
  font-size: 24px;
}

In this example:

h1 is the selector. It targets all <h1> elements.
{ color: navy; font-size: 24px; } is the declaration block.
color: navy; is a declaration.
font-size is a property, and 24px is its value.

Targeting Elements with Selectors

To style a webpage, you first need to tell CSS which elements to target. This is done with selectors. There are many types of selectors, but a few basics will get you very far.

Element Selector: Targets all elements of a specific type. For example, p selects all paragraphs.

/* Makes all paragraphs green */
p {
  color: green;
}

Class Selector: Targets elements that have a specific class attribute. Classes are reusable and can be applied to multiple elements. A class selector starts with a period (.).

/* HTML */
<p class="highlight">This text is important.</p>

/* CSS */
.highlight {
  background-color: yellow;
}

ID Selector: Targets one unique element that has a specific id attribute. An ID must be unique on a page. An ID selector starts with a hash (#).

/* HTML */
<div id="main-header">Welcome!</div>

/* CSS */
#main-header {
  font-weight: bold;
  border-bottom: 2px solid black;
}

Selector Type	Syntax	Example	What it Selects
Element	`element`	`h2`	All `<h2>` elements
Class	`.classname`	`.important`	All elements with `class="important"`
ID	`#idname`	`#logo`	The single element with `id="logo"`

The Cascade and Specificity

Sometimes, an element might be targeted by multiple CSS rules. How does the browser decide which style to apply? This is where the "cascading" part of CSS comes in, governed by two main principles: specificity and order.

Specificity is a weight that is applied to a given CSS declaration. The browser uses it to decide which rule is the most relevant when multiple rules target the same element. Think of it like a points system. ID selectors are worth the most points, class selectors are in the middle, and element selectors are worth the least.

A simple rule of thumb: an ID selector beats any number of class selectors, and a class selector beats any number of element selectors.

Let's look at an example. Imagine this HTML:

<h1 id="page-title" class="main-heading">My Awesome Page</h1>

And this CSS:

/* Element selector */
h1 {
  color: blue;
}

/* Class selector */
.main-heading {
  color: green;
}

/* ID selector */
#page-title {
  color: red;
}

The heading will be red. Why? Because the ID selector (#page-title) is the most specific, so its rule overrides the others.

If two rules have the same specificity, the one that comes last in the stylesheet wins. This is the order part of the cascade. It flows down the page, and later rules can overwrite earlier ones.

Now let's check your understanding of these core concepts.

Quiz Questions 1/5

What is the primary role of CSS in web development?

Quiz Questions 2/5

In the CSS rule p { font-size: 16px; }, the part { font-size: 16px; } is called the:

You now have the fundamental building blocks for styling web pages. With selectors, properties, and an understanding of the cascade, you can start turning plain HTML into well-designed content.

Mastering CSS Properties and Applications