CSS Introduction

CSS stands for cascading style sheets.It is used for styling the web pages like giving color to text, changing font-size, giving background-color,height, width etc.The simplified version of what happens when a browser loads a webpage is defined below:

1. The browser loads the HTML document.
2. It converts the HTML into DOM.
3. The browser then fetches the resources linked to the HTML document like images, videos amd linked CSS.JavaScript is handled a bit later.
4. The browder parses the fetched CSS and sorts the different rulus by their selector types into different "buckets" eg element,class etc.Based on the rules, the browser works out which rules shoulb be applied to which nodes of the DOM and attaches styles to them as required.
5. The tree is laid out in the structure it should appear in, after the rules have been applied.
6. The visual page is displayed on the screen ,this stage is called painting.

CSS syntax:

A CSS rule-set consists of a selector and a declaration block which define the properties to be applied to the nodes.

    p{
        font-size:30px;
        color:blue;
    }

Here, "p" is the selector which targets the paragraph node of the DOM and the properties inside it defines the styling of the node.

CSS selctors:

The CSS selectors have been classified into five main categories:

1. Simple selctors.
2. Combination Selectors.
3. Pseudo-class selectors.
4. Pseudo-elements selectors.
5. Attribute selectors.