Cascading Style Sheet
Cascading means look, Style means design on HTML element/ adding style to web documents and Sheet means page e.g. web page document.
Types of CSS
CSS can be used in three ways:
- Inline CSS: The inline CSS implements the style on one line.
- Internal CSS: The internal CSS apply a specified style on a single page.
- External CSS: The external CSS is a separate file and it can be used by multiple HTML documents/pages.
For this purpose, simply import the external link of CSS file within the head section.
Let’s take a look at the following css styling to have a better understanding of CSS syntax:
In the above-given snippet, p is a selector that points to an HTML element you want to style. While “background-color” is a property, and “gold” is its value.
Similarly “font-size”, and “text-align” are properties, while “medium” and “right” are values of these properties.
Example-1: This example will provide you an in-depth view of how inline CSS works:
The above script implemented some style on the first <h1> element using inline CSS. It will display the following output:
In this example, we have only two <h1> elements and we have to implement the style on only one element so, we utilized the inline CSS. So, whenever we have to style a few HTML elements we can use inline CSS for each element.
But what if we have hundreds of HTML elements on a page e.g. we have hundred <p> elements on a webpage. Will we implement the style on each element separately? Technically we can do this but definitely, it wouldn’t be a good coding practice. It would be a time taking process.
Therefore when we have to implement a unique style on the entire page we will use the internal CSS.
Example-2: The following example will implement the same background color, text color to the entire body of the HTML document:
The above snippet will provide the following output:
Now what if we have to style more than one pages? In such cases, the external CSS will be implemented. Only a single file can modify the entire look of the website. Therefore, It is recommended that always use external CSS.
If you are working with external CSS you must have to determine the <link> in the <head> section.
Example-3: This example will create a CSS file to define the style. The link to this file will be provided in the head section. Both HTML and CSS files are given-below:
The output will verify that the external CSS file is linked with the HTML file properly:
Cascade Style Order
Now you might have a question? What if we use inline, internal, and external CSS styles on a webpage? Then which of them will be implemented? Which style has maximum precedence?
Well! If there is a conflict in CSS style declaration then inline CSS will override internal CSS which in turn will override the external CSS. This means inline CSS has higher precedence than both internal and external CSS. The browser default styles have the lowest precedence.
If the various CSS styles are determined at the same precedence level then the style which is closest to the targeted element will have higher precedence.
Example-4: Let’s consider the following example which determines the multiple styles:
The above code determines three styles the output will verify that the inline CSS has highest precedence:
- It saves a lot of time while developing any web page because we can use one CSS file within multiple HTML files. For example, we have multiple HTML files then we have to deal with their look, style, etc. Instead of implementing the style on each HTML file separately, it is better to import the CSS file in any HTML document you want to style.
- Web pages load quickly because CSS doesn’t utilize HTML attributes again and again instead it creates only one CSS rule for a tag and implements it to all of its occurrences in the HTML file.
- CSS provides easy maintenance as we can handle it in a single file. Suppose we have ten paragraphs in a document and we want to change their style. Instead of doing it ten times, we can do it one time in the CSS file and it will be applied to all the ten occurrences of the <p > element.
- CSS provides compatibility. This means it is compatible with multiple devices.
CSS is a design language that builds attractive web pages. It is used for creating styles and customizing HTML elements available on a web page. It improves the site speed and provides easy customization of any webpage.
In this post, you will come to know what is CSS, how to use CSS, and what are the key advantages of CSS. Additionally, you will learn about the Cascading Styles precedence order.