External CSS
CSS is all about presentation. Discover how External CSS works to transform plain HTML into a premium user experience in the guide below.
Using an external style sheet is typically preferred when you need to apply modifications across various pages. This approach is particularly advantageous as it enables you to alter the appearance of the entire website by modifying a single file.
It employs the <link> element on each page, while the <link> element should be placed within the head section.
Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The external style sheet can be created using any text editing software, however, it needs to be saved with a .css extension. It is important to note that this file should not include any HTML tags or elements.
Let's consider a scenario with a style sheet document titled "mystyle.css".
File: mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Note: It is important to avoid inserting a space between the property value and the unit. For instance, the correct format is margin-left:20px and not margin-left:20 px.
