External css
In this aticle we are going to learn about external style sheets, how we can add styles in html pages to style as many html pages as possible by linking css file to more than one html pages.
We learnt about css in general, fonts, colors, background colors, borders, margin, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css and internal css so, we will be focusing on external style sheet.
External css
External css is a way of adding style sheets in webpages that can affect other pages by adding the style in one style sheet file and link it to different html pages. The style is linked to pages to be styled.
Let us create css file that will be linked to html file, copy and paste below code and save your file as example.css.
.example {
background: yellow;
color: red;
}
The style sheet is coded in the css file then linked to html file, and the style can affect all the pages is linked to.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="example.css"/>
</head>
<body>
<div class="example">This is a div element with external css applied.</div>
</body>
</html>
So, let us create html file that css will be linked to, copy and paste below code and save your file as example.html
Let us create anothercss file that will be linked to html file, copy and paste below code and save your file as example.css.
.example {
background: red;
color: yellow;
}
The style sheet is coded in the css file then linked to html file, and the style can affect all the pages is linked to.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="example.css"/>
</head>
<body>
<div class="example">This a is div element with external css applied.</div>
</body>
</html>
So, we should have the following results.
We can add any Cascading Style Sheets properties to external style sheet file and link it to html files as many as possible.