Web Development Tutorials- CSS Course

CSS - Brief Introduction

What is CSS?

CSS stands for Cascading Style Sheet. This course is an introduction to the CSS styling language, and to follow it, you need to be familiar with the HTML markup language. CSS is used to create the design of web pages — for example, to change the font, color, size, and spacing of content, for animations, and other decorative presentation features.

How does CSS work?

When a browser displays a document, it needs to combine the content of the document with its styling information. The document is processed in two stages:

1. The browser transforms HTML and CSS into the DOM (Document Object Model) and CSSOM (CSS Object Model), then combines the two structures in the computer's memory.
2. The browser displays the DOM content.

The DOM has a tree-like structure. Each element, attribute, and text sequence in the markup language becomes a node in the DOM, forming the tree structure. Nodes are defined by their relationship to other DOM nodes. Some elements are parent elements, others are of course child elements, and child elements have siblings. Understanding the DOM helps you design, debug, and maintain CSS, because the DOM is where CSS and document content meet and work together.

Let’s see in the following example how HTML and CSS work together:

<p>
 Use:
 <span>Style</span>
 <span>Sheets</span>
 <span>Cascade</span>
</p>

In this small DOM, the p element is a parent. Its children are a text node "Use:" and the nodes corresponding to the span elements. The span nodes, which are siblings, are also parents themselves to the text they contain.

P
├─ "Use:"
├─ SPAN
|  └─ "Style"
├─ SPAN
|  └─ "Sheets"
└─ SPAN
   └─ "Cascade"

See the result below:

Let’s see what happens after we add a bit of CSS to our document to change its appearance. We add:

span {
  border: 1px solid black;
  background-color: orange;
}

The browser will analyze the HTML code and create a DOM, then analyze the CSS and create a CSSOM. It combines the two structures into a final DOM that will be "painted" by the browser on the screen. Since there is a single rule applied to a single selector (), we will have three colored blocks, one for each piece of text contained in each span element in the DOM.

See the result below:

Inserting CSS into an HTML Document

There are three different ways to apply CSS to an HTML document:

• External – When the CSS code is written in an external file with the .css extension, which is loaded in the head section of the document using the <link> tag. This method is probably the best, because you can use a single stylesheet for multiple documents, and future changes can be made in one CSS file.

 <link rel="stylesheet" href="style.css">

• Internal – When the CSS code is placed directly inside the document using the <style> tag in the head section. This method can be useful in certain situations, but it’s not as efficient as the one above, because any future changes must be made on each page individually. Imagine a website with 44 pages whose design you want to update. You’d have to manually visit each page to apply the changes.

<style>
span {
  border: 1px solid black;
  background-color: orange;
}
</style>

• Inline – When CSS declarations affect a single element. Immediately after the element, the style attribute is inserted, followed by the CSS declarations, like this:

 <p style="color: blue; background-color: yellow; border: 1px solid black;">Inline CSS Example</p>

Using inline CSS should be avoided, except in situations where there is no other option, because structural information will be mixed with presentation information, making the HTML document very difficult to read and maintain.

You should use this method only when you don’t have access to the external CSS file.

Below you can see the three methods of inserting CSS into a document. Remove the comments to see exactly what happens.

🧠 Final Quiz – CSS Introduction