HTML has its limitations when it comes to the presentation of a web page. Originally designed as a simple means of presenting information, CSS (Cascading Style Sheets) was introduced in December 1996 by the World Wide Web Consortium (W3C) to offer a more effective way of styling HTML elements.
With CSS, it becomes effortless to specify various aspects such as font size and typeface, text and background colors, text and image alignment, spacing between elements, element borders and outlines, and numerous other styling properties.
There are two ways to include style information in an HTML document: either as a separate document or by embedding it directly within the HTML document. These are the two approaches for implementing styling information in an HTML document.
style attribute in the HTML tag.<style> element inside the head section of an HTML document.<link> element, reference to an external CSS files.In this tutorial, we will comprehensively discuss each of the various types of style sheets individually.
Note: The highest priority is given to inline styles, while the lowest priority is given to external style sheets. This implies that if you define styles for your paragraphs in both embedded and external style sheets, the conflicting style rules in the embedded style sheet will take precedence over the external style sheet.
Inline styles are employed to implement distinct style rules to an element by directly inserting the CSS rules into the start tag. The style attribute can be utilized to associate it with an element.
The style attribute consists of a sequence of CSS property and value pairs. Each pair, written as property: value, is delimited by a semicolon (;), similar to how you would format it in an embedded or external style sheet. However, it must be written on a single line without any line breaks after the semicolon.
The following example illustrates how to set the color and font-size of the text:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:18px;">This is a paragraph.</p>
<div style="color:green; font-size:18px;">This is some text.</div>Using inline styles is generally regarded as a poor practice due to the fact that style rules are directly embedded within the HTML tags. This leads to a blending of presentation and content within the document, making website updates and maintenance significantly more challenging.
For a detailed understanding of the different CSS properties, please check out CSS tutorial section.
Note: It has become unfeasible to apply styles to pseudo-elements and pseudo-classes using inline styles. Hence, it is advisable to refrain from using the style attribute in your markup. The recommended approach to add style information to an HTML document is by utilizing an external style sheet.
Embedded or internal style sheets have an impact solely on the document in which they are embedded.
The <style> tag is used to define embedded style sheets in the <head> section of an HTML document. Multiple <style> elements can be defined within the <head> section.
The subsequent illustration showcases the integration of style rules within a webpage.
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>An external style sheet is the perfect choice when you want to apply the same style to multiple pages.
An external style sheet allows you to store all the style rules in a separate document that can be linked from any HTML document on your website. External style sheets offer great flexibility as they enable you to update the appearance of your entire website by simply modifying one file.
There are two ways to attach external style sheets: — linking and importing:
An external style sheet can be reference to an HTML document using the <link> tag.
The <link> tag is put inside the <head> section of an HTML document, as shown below:
<head>
<link rel="stylesheet" href="css/style.css">
</head>The @import rule provides an alternative method for loading an external style sheet. By using the @import statement, you can direct the browser to load an external style sheet and apply its styles.
There are two ways to utilize this rule. The first and easiest approach is to include it within the <style> element located in the <head> section of your HTML document. It is important to note that other CSS rules can still be included within the <style> element alongside the @import rule.
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>In the Similar way, you can use the @import rule to import a style sheet into another style sheet.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}Note: All @import directives should be placed at the beginning of the style sheet. Any style rule specified within the style sheet takes precedence over conflicting rules in the imported style sheets. Importing style sheets using the @import directive can potentially impact performance, therefore it is advisable to minimize the usage of this feature.