1. How To ADD CSS in HTML?
Since all the browsers read HTML document, therefore when a browser read an stylesheet, it will define the HTML elements and style them according to the provided stylesheet. The stylesheet will tell the browser how to display the content on the screen. In order to use the stylesheets, we must incorporate them within an HTML document properly.
Following are three different ways which explains how to link CSS or add CSS into an HTML document:
- Inline Styles
- On Page or Internal Style Sheets
- External Style Sheet
2. How To Add Inline Styles
As we have studied in the HTML tutorial, we can add an inline style by using style attribute. The inline style will do its work only for specific HTML element. And It will not be reusable, i.e you may say disposable. Understand the Inline styling by following instance:
Inline Styles
<body> Following are three different HTML elements, each with its own inline styles. <h2 style="color: white; background: red;">Inline Styles</h2> <h3 style="color: white; background: blue;">Introduction to Cascading Styles</h3> <p style="color: white; background: lightblue;">CSS is a cascading style sheet language.</p> </body>
2.1. Why Inline Styling is not Recommended?
Since inline styling is incorporated within the content of the document, so it is not recommended. You can use inline styles oftenly but excessive use is a bad practice. Because it will mix the content and styling and also it will make you to repeat the styles for every element.
3. How To Use Internal Styles
We use internal style sheet when a certain page has unique styles. To make use of internal style sheet, CSS class selector, CSS ID selector, CSS element selector or CSS attribute selector is used. We explained the process of adding internal style sheets in CSS Syntax tutorial and also in HTML tutorial. Consider the following instance to learn the use of Internal Style Sheets:
Internal Styles
<head>
<style>
.pie-content{
font-size: 20px;
color: #999;
font-family: 'Roboto', sans serif;
font-weight: 500;
background: #f4f4fb;
margin: 20px;
}
</style>
</head>
As you can see, the internal style sheet is defined within the head section of a document using style tag. Also it is useful for only that specific page.
4. How To Link External Stylesheet?
An external style sheet is the beauty of cascading style sheets and it allows us to use this style sheet for unlimited pages or websites. Whenever you need to make some modification in styles of a document or multiple websites, you just modify the single style sheet. As a result all the web pages will be updated.
4.1. Procedure to Link External Stylesheet
Following is the procedure to link an external stylesheet to any document or website.
- We have to add a link of the external style sheet on the page or website in the head section
- Also we can add multiple external style sheets on a single web page
- To add an external style sheet, we use <link> element
- It has multiple attributes to locate the style sheet properly
- A rel attribute defines relationship of the style sheet and the document, mostly it takes the value of stylesheet
- A type attribute defines the type of the linked file, usually it is text/css
- Finally the href attribute, that points towards the location of the style sheet
- Furthermore an external style sheet can have unlimited style declarations in a single file
- Importantly an external style sheet must not have any HTML entity
- The external style sheet must be saved under the .css extension
Consider the blew example to learn how to link CSS to HTML i.e an external style sheet:
External StyleSheet
Following is the linked external style sheet. Now you just need to use the defined declarations/styles in your document.
<head> <title>External Style Sheets</title> <link rel="stylesheet"href="style.css"> </head>
5. Cascading Order
Whenever there are more styles linked or specified in a document, the styles will be used according to the following rule, in a cascading order:
- Inline style sheets (Highest Priority)
- Internal style sheets and external style sheets
Consider the below example to clear the cascading order.
style.css
This is an external style sheet for instance. It has following styles defined.
h1,h2,h3,h4,h5,h6{
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
h1{
font-size: 40px;
}
h2{
font-size: 34px;
}
h3{
font-size: 28px;
}
h4{
font-size: 22px;
}
h5{
font-size: 20px;
}
h6{
font-size: 18px;
}
p{
font-size: 18px;
font-family: 'Jura', sans-serif;
}
Cascading Order
<!Doctype HTML>
<html>
<head>
<title>Cascading Order</title>
<link rel="stylesheet"href="/pie.css">
<style>
h1{
font-size: 36px;
}
h2{
font-size: 30px;
}
p{
font-size: 16px;
}
</style>
</head>
<body>
<h2>Cascading Order</h2>
<h3>CSS styles are linked in the head section</h3>
<p style="font-size:12px; background:#999; color: #fff;">After adding a link of the style sheet, we can use the defined classes or ids in the HTML elements to have the result.</p>
</body>
</html>
As you see, internal style sheet is after external style sheet, therefore it will override the styles for h1, h2 and p. The styles of internal style sheet will get more priority than external style sheet. Also an inline style is defined for p element, it will override both external and internal style sheets. And will use the styles defined within the paragraph element.