Great! You have learned some basic CSS properties and you know how to add CSS to your web page inside the <style> element. This is called internal CSS and it is very useful for small web pages. However, if you have a large web page with many different HTML elements, it can be difficult to keep track of all the CSS code. This is where external CSS comes in!
All your CSS code in one place#
Imagine that you have a web page with 100 different HTML elements. You would want to style all of these elements consistently to make your web page look nice. For example, you would want to make all the headings to have the same font size and color. You would also want to make all the paragraphs to have the same font size and color and the background color to be the same. Also, your navigation bar should remain the same throughout the entire web page.
If you added all the CSS code inside the <style> element for each one of your HTML pages, it would be very difficult to keep track of all the CSS code across the entire website! If you wanted to change the color of the headings, you would have to go through all the HTML pages and change the CSS code. This would be very time consuming and it would be easy to make a mistake.
This is where external CSS comes in! External CSS allows you to write all your CSS code in a separate file. This file is called a CSS file. You can then link this CSS file to all your HTML pages. This way, you only have to write the CSS code once and you can use it across all your HTML pages. This is much more efficient than writing the CSS code for each HTML page and it is like this that most websites are styled.
Linking a CSS file#
To link a CSS file to an HTML page, you have to use the <link> element. The <link> element is used to link external files to your HTML page. It is an empty element, meaning that it does not have a closing tag. It has a few attributes that you have to use to link the CSS file to your HTML page. Here is an example of a <link> element:
<link rel="stylesheet" href="styles.css">
The rel attribute specifies the relationship between the HTML page and the file that is linked. In this case, the relationship is stylesheet, which means that the HTML page is a stylesheet. The href attribute specifies the path to the CSS file. In this case, the CSS file is in the same folder as the HTML page, so we just need to specify the name of the file. If it was in a different folder (say, a folder called css), we would need to specify the path to the file, like this:
<link rel="stylesheet" href="css/styles.css">
The CSS file#
Now that you have linked the CSS file to your HTML page, you have to create the CSS file. The CSS file is just a text file with the .css extension. You can create a new file in your text editor and save it with the .css extension.
Once you have created the CSS file, you can start writing your CSS code. You can write all your CSS code in this file. You can also add comments to your CSS file. Comments are very useful for you to keep track of your CSS code, especially if you have a large CSS file. Here is an example of a CSS file:
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
h1 {
color: red;
font-size: 50px;
text-align: center;
}
p {
color: blue;
font-size: 20px;
}
In this example, we have written the CSS code for the HTML page that we created in the previous chapter. We have used the * selector to select all the elements on the page and we have set the box-sizing property to border-box. We will see what this does in the Box Model chapter. But for now, just know that this is a very useful property to use and we normally use it for all the elements on the page like this.
We have then used the body selector to select the <body> element. We have then used the h1 and p selectors to select the <h1> and <p> elements, respectively. The styles we have defined here will be applied to all the <h1> and <p> elements on all the HTML pages that link to this CSS file.
Now, if you want to change the color of all the headings of your website, you only have to change the CSS code in the CSS file. You do not have to go through all the HTML pages and change the CSS code. This is much more efficient and it is how most websites are styled!
Activity#
Now that you know how to use external CSS, it is your turn to create an external CSS file and link it to your personal website that you created in the Introduction to HTML module. Or you can also create a new HTML page.
Style different elements on your web page using external CSS. Try to make your website look nice and consistent. You can use your own CSS classes and IDs to style the elements on your website. For example, you can create a class called heading and style all the headings on your website using this class. You can also create an ID called main and style the main content of your website using this ID. You can also use the HTML elements themselves to style the elements on your website. If you need a refresher of the .class and #id selectors, go to CSS Syntax.
Once you have styled your web page, you can share it with the community!