3 CSS levels

Do not miss this exclusive book on Binary Tree Problems. Get it now for free.

CSS, short for Cascading Style Sheets, is utilized to apply styles to web pages that include HTML components. It manages various attributes of web page elements, such as the background color, font size, font family, and color.

There are three categories/ levels of CSS:

Inline CSS
Internal or embedded CSS
External CSS

We will dive into each level.

1. Inline CSS: Inline CSS refers to the inclusion of CSS properties within the body section of an element. The style attribute is employed to define this type of style directly within an HTML tag.

Example: The following example demonstrates the usage of inline CSS.

<!DOCTYPE html>
<html>
<head>
	<title>Inline CSS</title>
</head>

<body>
	<p style="color:yellow; font-size:50px;
			font-style:italic; text-align:center;">
		Opengenus
	</p>
</body>
</html>

Output:

2. Internal or embedded CSS: Embedded CSS, also known as internal CSS, is employed when a specific HTML document needs to have its own distinctive styling. In this approach, the CSS rule set is enclosed within the head section of the HTML file, specifically within the style tag.

Example: The following example illustrates the implementation of internal CSS.

<!DOCTYPE html>
<html>
<head>
	<title>Internal CSS</title>
	<style>
		.main {
			text-align: center;
		}

		.OG {
			color: yellow;
			font-size: 50px;
			font-weight: bold;
		}

		.opengenus {
			font-style: bold;
			font-size: 20px;
		}
	</style>
</head>

<body>
	<div class="main">
		<div class="OG">Opengenus.org</div>

		<div class="opengenus">
		 The best learning platform for genus
		</div>
	</div>
</body>
</html>

Output:

3. External CSS: External CSS is comprised of standalone CSS files that exclusively contain style properties using tag attributes such as class, id, header, etc. These properties are written in a separate file with the .css extension and need to be connected to the HTML document through a link tag. This ensures that the style can be defined once for each element and will be applied consistently across multiple web pages.

For instance, the provided file, opengenus.css, contains CSS properties and is saved with the .css extension.

body {
    background-color:rgb(103, 163, 171);
}
.main {
    text-align:center;   
}
.OG {
    color:yellow;
    font-size:50px;
    font-weight:bold;
}
#opengenus {
    font-style:bold;
    font-size:20px;
}

Here is the HTML file that utilizes the external style sheet that was created.The link tag is employed to connect the external style sheet to the HTML webpage.
The href attribute is utilized to indicate the location of the external style sheet file.

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="opengenus.css" />
</head>

<body>
	<div class="main">
		<div class="OG">Opengenus.org</div>
		<div id="opengenus">
			The best learning platform for genus
		</div>
	</div>
</body>
</html>

Output:

CSS Priorities:

The priority order of CSS styles is as follows: Inline CSS holds the highest priority, followed by Internal/Embedded CSS, and finally External CSS, which has the lowest priority. It is possible to define multiple style sheets on a single page, and styles for an HTML tag can be specified in various ways, as mentioned below.

Conclusion:

Since Inline CSS takes precedence, any styles defined in the internal and external style sheets are overridden by Inline styles.Internal or Embedded CSS has the second highest priority and overrides styles defined in the external style sheet.
External style sheets are given the least priority. If no styles are defined in the inline or internal style sheets, the rules from the external style sheet are applied to the HTML tags.

CSS serves as the fundamental building block of webpages and is used to style websites and web applications.