CSS — an introduction

styling a website using a design language

// updated 2025-05-01 11:21

Cascading style sheets (CSS) refers to a design language that facilitates the look and feel of a website and its components, in terms of each component's:

Backgrounds (colors, images)
Spacing (margins, borders, paddings)
Displaying
Positioning
Layering
Visibility (showing, hiding, eliminating)
Transforming (rotating, flipping)
Animating (frame rates, durations)
Typography (font faces, font sizes)

CSS looks like this:

h1 {
  font-size: 48px;
  color: red;
}

h2 {
  font-size: 24px;
  color: blue;
  margin-bottom: 30px;
}

.overlapping {
  position: absolute;
  top: 0;
  z-index: 10000;
}

Breaking that down, each chunk of CSS code typically consists of a:

Selector
- a grouping of HTML objects
  - i.e. the h1, h2, and .overlapping
Declaration (or declarations)
- a pair or pairs of properties and values
  - i.e. everything inside the curly braces

Selectors

A selector refers to an element in an HTML document (e.g. h1) and has a set of curly braces ({}):

h1 {
  
}

We can substitute the h1 for

any HTML element like p, a and so on
a specific id, e.g. #myElement
a class of elements, e.g. .menuItem
a combination of HTML elements and classes, e.g. li.menuItem
some really advanced combinations (we'll see soon enough!)

Declarations

A declaration consists of, in its most abstract form, a property and a value pair:

[some property] : [some value]

Declarations lie inside a declaration block, i.e. inside the curly braces:

h1 {
  font-size: 48px; 
  color: red; 
}

Stylesheets

So:

a group of declarations will reside inside a selector
a group of selectors will reside inside a stylesheet (the "SS" in "CSS")

Whereas:

HTML provides a rough order and arrangement of elements of a webpage
CSS provides design details with pixel-precision values

Cascades

The "C" in CSS refers to "cascading". in this context, that simply means that any styling instruction or rule that happens further down in the stylesheet, becomes the new rule! In other words, the bottom-most rule becomes the rule.

For example, in an HTML document like this:

<html>
    <body>
        <h1 class="myClass">Title</h1>
    </body>
</html>

The text will appear red if the CSS looks like this:

h1 {
  color: green;
}

h1 {
  color: red;
}

In the case above, the second h1 replaces the first h1!

Selector hierarchy in cascading style sheets

However, if we were to do something like this, where h1.myClass comes before h1, then the first rule would stay for the h1 with the class of myClass:

h1.myClass {
  color: red;
}

h1 {
  color: green;
}

(The text "Title" will stay red instead of turning green!)

This happens due to the cascading hierarchy of selectors, which we will further explore! It takes some practice to "internalize" this hierarchy but it will becomes second nature :)

We will have a look at:

...and a lot more!

web development css css introduction css textbook textbook pages starters

newer (in textbook-css) ➡️
CSS in HTML 🎨

⬅️ older (in code)
🛡️ HTML special characters (entities)

newer (in code) ➡️
CSS in HTML 🎨

⬅️ older (posts)
🛡️ HTML special characters (entities)