How Does CSS Work?
When you access a web page, your web browser fetches the HTML document corresponding to that page from the host server. Next, the HTML document is converted into a Document Object Model (DOM).
A DOM functions as a representation of both the structure and contents of an HTML document, with each element, attribute, and piece of text converted to a DOM node and organized in a tree-like structure..
Once the conversion is complete, your web browser will fetch any additional resources from the host server that are linked to by the HTML document. This includes images and video that are stored on the host server, as well as the CSS document containing the style rules for the page.
The web browser then parses the fetched CSS document and sorts the rules according to their Selector types. As it does this, it determines which style rules should apply to each node in the DOM, and attaches style to these nodes as prescribed.
Once the rules from the CSS stylesheet have been attached to the correct nodes, you’re left with a render tree that contains only the nodes required to render the page. In the final step, your web browser will use this render tree to determine the exact size and position of every object on the page, then “paint” the webpage onto the screen of your computer.
What is the Syntax for CSS?
Now that we know how CSS works with HTML to help web browsers render a page, let’s examine the syntax for CSS to better understand how CSS rules are written to modify HTML elements.
A CSS rule has two parts:
1. Selector(s)
In CSS, a Selector is a bit of text that specifies the HTML element(s) you want to style. CSS Selectors are versatile and can be used in highly specific ways, but web developers generally rely on the six Simple Selectors listed in the image below:
2. Declaration(s)
A Declaration consists of a CSS Property and its corresponding Value, separated by a colon. A CSS rule can contain multiple Declarations that should be separated by a semi-colon. The entire block of Declarations should be surrounded by curly brackets.
There are more than 100 different CSS Properties that can be set as part of a Declaration in a CSS rule.