html

How CSS works

If HTML is the foundation of a website, CSS is the paint color and window styles. It helps web developers format web pages in a way that people can understand. It helps web pages look more visually appealing and readable. Moreover, several other properties can be handled, like the size of fonts/images, color, font, and background images.

CSS can be used to change the layout design, so you only need to write one code for all your elements. By using CSS, you can use less code to create your web page. You can apply one CSS rule to all tags on a page. By learning CSS, you can make your website look great.

How CSS Works

The cascade process of CSS allows multiple stylesheets to be combined. It helps to avoid conflicts when different styles define the same property, like font size. When an element has more than one stylesheet, the browser will pick the most appropriate one (the latest one) and resolve the conflict.

Components of a CSS code

This section describes the fundamental instances of a CSS code.

Let’s take the example of a simple CSS code for a heading (h1):

h1 { color:black; font-weight:bold; }

A screenshot of a computer Description automatically generated with medium confidence

The above CSS code comprises of the following parts:

h1 is known as “selector

– The text written inside curly braces is called “declaration“; the code inside the curly braces is applied to the selector that is defined before the curly braces.

– The color and font-weight are the properties whereas the black and bold are the values of the properties

Apart from the above stated components, a semi-colon is inserted after each property before starting the other one. In short, a simple CSS code has four components: selector, declaration, property and value.

How CSS code is embedded

A CSS code can be embedded in one of the following ways:

Inside an HTML element: The properties are defined in a specific element of HTML and the image shown below shows the application of inline CSS.

Text Description automatically generated

As an internal CSS: The code is written using <style> element and inside the head tag of the HTML file. For better understating of internal CSS, we have attached the image that shows font and color are set for paragraphs:

Diagram Description automatically generated

– As an external CSS file: A CSS code is written inside a separate file and then the CSS file is linked to the HTML file:

Text Description automatically generated

How CSS and HTML work together

The CSS and HTML phenomenon are interlinked to each other. An HTML code may be referred to as the structure of the building whereas CSS is the beautifying process of that structure. A raw structure is useless without paint, and other decorations. The HTML and CSS work collaboratively on a web page:

A webpage follows the below-stated process to load properly:

– An HTML page is loaded by the browser

– The browser converts that HTML into DOM (Data Object Model) tree

– Meanwhile, the browser loads the styles associated with that HTML page: For that, the CSS file (linked to that HTML file) is parsed to create a Data Object Model(DOM) tree.

– After successful addition of styling rules, the last step (display) is then carried out

The visual representation of loading a webpage is displayed below

The Data Object Model (DOM) is a hierarchical (tree-like) structure of the HTML code. Each element and its associated properties are known as DOM nodes. The CSS selectors (it can be any HTML element) are checked with the DOM nodes and the matching nodes adopt the properties/values that are defined in a CSS file.

Conclusion

The CSS process identifies the elements of a web page. It also determines how styles are applied to these elements. It is essential to understand that CSS is not a language that is limited to one language or a single style sheet. This descriptive post enlightens the fundamentals and working of CSS. Initially, we have provided brief detail about the fundamental concept of CSS and then described the collaborative working of HTML and CSS.

Happy Computing!

About the author

Adnan Shabbir