The last way in which we can apply a style is through an external style sheet.
How does the stylesheet look?
/*
This is what will go inside the external style sheet
Notice that the <style> tags are not required here
*/
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>
<head>
<title>External Style Sheet</title>
<!-- This link tag allows us to connect the HTML page to the external stylesheet -->
<!-- Once again, notice this is in between the head tags of the HTML page -->
<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 relative path. *Remember: A relative path is something that is relative to the page is linking to it versus an absolute path is one that contains the full path the file on one's computer.
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?
See the Pen External Style by Michael Cassens (@retrog4m3r) on CodePen.