Introduction to CSS

CSS, or Cascading Style Sheets, is a language used to define the layout, appearance, and presentation of elements on a web page. Developed by the W3C organization in 1996, it has become an indispensable tool in designing and creating websites.

It's a bit like building a pyramid - we carefully arrange each element to create a final product that is both functional and aesthetically appealing.

Bare Stone and Painted Walls

Imagine a temple right after the builders have finished. The walls stand and the chambers are in place, but everywhere you look there is grey, bare stone. A page written in HTML alone looks the same way: the structure is ready, with headings, paragraphs and lists, but everything is black text on a white background.

Every web browser has its own set of default styles that determine how individual page elements look. That's why headings of different levels have different font sizes on a page.

This is where the magic of CSS begins. Using code, we can modify the appearance of our page - change colors, sizes, fonts, margins, backgrounds, and many other elements so that our page looks exactly the way we want. CSS is the paint and gold that painters spread over the temple walls: HTML says what an element is, and CSS says how it should look.

Nevertheless, just like building a pyramid, CSS has its challenges. Different browsers may interpret some styles differently, which can lead to unexpected results. That's why it's important to learn best practices and techniques to avoid such problems.

Despite these challenges, learning CSS is an exciting and creative process - we create websites that are beautiful, functional, and enjoyable for users.

Why "Cascading"?

Several styles can reach the same element at once: the browser's default style and your rules, and sometimes several of your rules that disagree with each other. Styles flow down like water over the steps of a cascade, and some override others. Clear rules decide which one wins - you'll learn them in the lesson on the cascade.

Where Does CSS Go?

You can write styles in the style attribute of a chosen element, in a <style> tag in the <head> section, or in a separate file with the .css extension, linked to the HTML. A separate file is the most common choice, because one stylesheet can decorate many pages at once. You'll learn all three ways in detail in the lesson on creating an HTML/CSS project.

What Will You Learn in This Module?

• how a CSS rule is built and how selectors work: type, class, ID and more advanced ones,
• how to set colors, backgrounds and fonts,
• what the box model is: inner spacing, borders and margins,
• how elements line up side by side or one below another (display and floating),
• how to position elements and stack them on top of each other,
• how pseudo-classes and pseudo-elements work, and finally filters and transforms.

How Does the Browser Process CSS?

When you open a web page, the browser performs several steps before you see the final result. You can compare this to the process of building a pyramid - each stage is essential:

1. Parsing HTML and CSS - the browser reads the HTML and CSS code, analyzing its structure.
2. Building DOM and CSSOM - based on HTML, the DOM (Document Object Model) is created, and based on CSS - the CSSOM (CSS Object Model). These are two "construction plans" that the browser combines into one whole.
3. Creating the Render Tree - the browser combines the DOM with the CSSOM, creating a render tree. It determines which elements will be visible and what styles to assign to them.
4. Layout (positioning) - the browser calculates the positions and dimensions of each element on the page.
5. Paint (rendering) - finally, the browser draws pixels on the screen, creating what you see.

This process happens lightning fast - in milliseconds! But understanding it will help you write more efficient CSS.

A First Look at CSS

In the next lesson, you'll take apart your first CSS rule: the selector that points to an element and the declarations in curly braces that say what to change. For now, it's enough to see CSS in action.

In the editor below, the same HTML gets its look from the style.css file. Change the heading or background color and watch the browser repaint the page right away:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>First CSS</title>
6  <link rel="stylesheet" href="style.css">
7</head>
8<body>
9  <h1>Karnak Temple</h1>
10  <p>The same HTML - the style.css file gives it its look.</p>
11</body>
12</html>

You've just painted your first temple wall. In the next lessons, step by step, you'll turn the bare stone of HTML into chambers worthy of a pharaoh.