The last way in which we can apply a style is through an external style sheet.
How does the stylesheet look?
span{
color:white;
background-color:red;
}
Note that when you save this on a separate page, it must be called mainstyle.css It always ends with a .css extension.
Now, we can assign it to a page like this.
<html>
<title>External Style Sheet</title>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
</head>
</html>
There are a couple of things to note. The rel is the relationship attribute, and the type specifies the type of file. Finally, the href, which should look familiar, is the file location. Remember, if it defined like it is above, it has to be in the same folder. Otherwise, you need to add the correct path.
We use style sheets so that we can apply a style sheet to many pages. If we want to make a change, we can change it in one file and use it everywhere.
So, when you have all three types of styles on your page, which style is applied? It always goes in this order.
Yes, that's right; the browser has a style sheet. If you are interested, take a look around, and you can find and change your browser's style sheet. Fun right?