What is CSS?
Cascading Style Sheets (CSS) is a way to add aesthetic look and design layouts to the barebone skeletal structure of the HTML (Hyper Text Markup Language) pages in the web browser. Let’s understand each term word by word.
Cascading
Before understanding Cascading look at the code and it HTML preview below:
what we noticed was that on applying <h1> tag to the content it was displayed by the Browser in a particular pre-defined way of appearance. These pre-defined styles are applied by an Browser by default to display HTML elements this is called User-Agent Stylesheet.
Here’s an example of a User-Agent Stylesheet looks
Now as it this default style is pretty unattractive and lame so we add our custom stylesheets to our HTML Code , beautifying it. So basically what happens is when we write our own custom CSS Code then that code it added by the Browser on top of its User-Agent Stylesheet. This is called Cascading.
Here’s is the applied styling to the above image.
Stylesheets
In CSS, stylesheets are files containing rules and declarations that define the appearance and layout of the HTML elements. They control styling aspects like colors, fonts, spacing, and positioning etc. Stylesheets can be written inline in the HTML element, internally inside the <style> tag, or externally in a separate style.css file enabling separation of content and design for consistent, reusable and maintainable web development.
CSS syntax basics
CSS is a rule-based language — here you define the rules by specifying groups of styles that should be applied to particular elements or groups of elements on your web page.
For example in the above image we stylized the <p> tag with red background color and yellow font-color. The following code shows a very simple CSS rule that did this:
p {
background-color : red;
color : yellow
}
In the above code, the CSS rules opens with a selector. This selects the HTML element that we are going to style. In this case, we are styling the paragraph <p>.
We then have a set of curly braces - { }.
The braces contain one or more declarations, which take the form of property and value pairs. We specify the property (for example background-color and color in the above example) before the colon, and we specify the value of the property after the colon ( red is the value being set for the background-color property and yellow is the value being set for the color property).
Different CSS properties have different range of allowable values. In our example, we have the background-color property, which can take various color-values; similarly for the color property.
A CSS stylesheet can contain many such rules written one after another.
How is CSS applied to HTML?
When a Browser displays a document, it must combine the document’s content with its styling information. It processes the document in a number of stages which are (Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways.) :
The browser loads the HTML.
It converts the HTML into a tree-like structure called DOM (Document Object Model) tree. The DOM represents the document in the computer’s memory.
The Browser then fetches most of the resources that are linked to by the HTML documents, such as embedded images, videos, and CSS!.
The Browser parses the fetched CSS, and sorts the different rules into different “buckets” based on which HTML elements they will be applied to. The Browser then attaches styles to different elements as required ; this intermediate step is called a render tree.
The render tree is laid out in the structure it should appear in after the rules have been applied.
The visual display of the page is now shown on the screen; this stage is called painting.
The following diagram also offers a simple view of the process :
Summary
Now from this blog you would have now had a fairly good idea about how the CSS works!? Now you can practice and deepen your CSS understanding by making your own beautiful designs.