Home / HTML & CSS / Cascading Style Sheets (CSS ) Complete Guide

Cascading Style Sheets (CSS ) Complete Guide

HTML5 together with CSS and JavaScript types a built-in instrument. CSS is basically
a language that works along with HTML to provide visible styles to the elements of the
doc, similar to measurement, color, backgrounds, borders, and so on.
A style sheet is a set of guidelines that specify the looks of information in an HTML
doc. HTML is a markup language that focuses only on the structure of the content on
a Web page. Nonetheless, making use of layouts to more than one prevalence of an HTML component
in an HTML page is a tedious job.
For example, if you wish to change the textual content within the H2 component to bold, this needs to be done
manually for all of the H2 elements. Such a manual process may consequence into human errors such
as lacking a prevalence of the H2 component for making use of the bold format. This leads to
format inconsistency among the many H2 components inside an HTML page. Additional, the required
formatting may not have similar look throughout various devices such as computers
and mobiles.
Style sheets overcome these issues by specifying the formatting instructions in a
separate file as shown in figure 1.0
CSS is a rule-based language, which specifies the formatting instructions for the content
specified in an HTML page. Its goal is to separate HTML content material from its formatting so
that Web page designers wouldn’t fear in regards to the formatting and structure. It’s because
they will outline the structure and formatting of the content in a separate file saved with an
extension of .css. Within the .css file, the formatting instructions for an element are referred
to as a rule set. Every rule defines how the content specified inside an element needs to be
displayed in an Internet browser.
Whereas displaying the HTML web page, the browser identifies the .css file for the web page and applies
the rules for the required elements. You’ll be able to merge the rules from totally different .css files or can edit them. This process of mixing and matching rules from totally different files is known as
cascading. Figure 1.2 shows an example of CSS.



Advantages of CSS

A number of HTML pages can use a CSS document. CSS provides some helpful advantages that make
it a perfect choice to specify the looks of the content in an HTML web page. These advantages
are as follows:
Code Reusability:


      CSS saves time by specifying the formatting choices of an element
only once and applying them to a number of HTML pages

·        Much less HTML Code:

CSS helps in reducing the file measurement of HTML documents by

specifying the formatting instructions in one other file.

·       Device Independence:

CSS is designed for various devices to provide the same

look and feel of the HTML web page across them.

Working of CSS


You’ll be able to embed the CSS code throughout the HTML code or link the HTML file externally to the
CSS file. The browser will find the style sheet no matter its location and will apply
the style to the HTML web page. There are particular steps concerned in applying a style sheet to an
HTML page. These steps are as follows:
·         The consumer requests for a Web page from the browser using the URL.
·         The server responds with the HTML file and associated files such as picture files, audio
files, and external .css files if any.
·         The browser executes the CSS code using the rendering engine and applies the styles
to the HTML file.
·         The Web page is then displayed within the browser.
The rendering engine is a software program that applies the formatting instructions to the Web
page and shows the formatted content material on the display screen. Figure 1.3 shows the working of


About admin

IT Expert, Web Designer & Developer, SEO Specialist, YouTuber. Studying BS (Software Engineering) From Middlesex University Lived in Islamabad, Pakistan

One comment

  1. What’s up friends, its fantastic post about teachingand fully explained, keep it upall the time.

Leave a Reply

Your email address will not be published. Required fields are marked *