Remember in our introduction to CSS, we can apply our CSS in 3 different ways.
Inline CSS
Internal CSS
External CSS
Today I want to talk about external CSS. And this is definitely helpful because it's going to make your web designing easier.
It's gonna be cool if we have oneself styles and oneself rules that we can apply to our website no matter how many pages we have on it.
For example, before on each webpage we need to list all the styles; turn paragraphs red, turn headers green, turn links orange, and then we go to another page (maybe contact page) and do the same thing. What if we have like 20 different pages, that will cost a lot of time.
It's going to be easy if we have one main outline that we want to apply to our entire website, evey single webpage. We'll just go on and say, use this style and it's a lot easier to manage. Imagine you want to change your blue paragraph to red, it's going to much time to edit 20 different pages instead you only have to go one location, change it and it will edit the entire website for you.
Let's open our project.html file. If you don't have it, I don't even know what to say to you.
If you have the project.html file.
Open the file and check if you have Contact Us link. Like this 👇
*UPDATE* Add a single small letter 's' to your contact.html to make it contacts.html
Why? We already have a contact.html and we want to create another contact page, that's why we need to add 's' to different it from the former one.
I'm sure you will have it. Now, copy from "<h4>Get In Touch</h4>" to .....follow us on IG</a> like this 👇
Copy the highlighted area
And create a new file, save it with contacts.html and paste the code.
Don't forget to add doctype , html, head, title and body tags. On the same contacts.html file, add this 👇 below the opening body tag.
<a href="project.html" >Home</a>
Your contacts.html file should have a complete format like this 👇
Now, we have two webpages linked to each other.
Actually, a webpage is the individual page while a website is a collection of webpages. So if you click on contact link on your project page (which is like our homepage), it will take you to the contact page and vise versa.
So if we want to apply style to our webpages, we can go ahead, since we already know to how to apply styles using internal CSS.
We add a rule for the header, paragraphs and others... Once we done with the project.html we go to contacts.html and add a rule for the header, paragraphs and others. And when we want to edit, we will go back to project.html and do that, we also go into contacts.html and do the same thing.
Before you're through with 20pages, you'll have a chronic headache.
So, let me show you a easy way that's going to help your career in web development.
Create a new file and save it with style.css
In this file is where we are going to put all of our styles but we don't need that style tags anymore like this 👇
<style > </style>
So the only thing you need to do is to type all our styles. For example, let's style header h1, paragraph and link tags
Like this 👇
Copy this 👇 and paste it in the empty text editor style.css file
_____starts from h1_____
h1 {color: green;
}
p {font-family: Tahoma;
font-size: 20px;
color: red;
}
a {color: orange;}
____stop at orange;}____
Save the file.
Now, how do we tell our webpages that these are the rules that we want to use?
Well, the first thing we need to do is to add the link to our CSS on our webpages. Instead of using style tags. This 👇
<style type="text/css">
p > a {color: red;
font-size: 30px;
}
</style>
We don't need that anymore, what we need now is link to our external CSS file.
And it's a single tag and it must be in the head just like the title tag, it can below or above the title tag, anywhere you want it but most be within the head tag. And the formula is 👇
<link rel="stylesheet" type="text/css" href="style.css">
Copy and paste this👆🏽 within the head tags of your project.html and contacts.html webpages. Like this 👇
As you can see, we have 3 attributes for this.
rel: it's like relationship or something and we put stylesheet and it's constant (never changes)
type: this means the type of file you want to link to. And it's text/css and it never changes also.
The last thing is the href and it means what is the name of the document we want to link to and in case you forgot, it's style.css
So anytime our website loads it's going to load all the rules in our style.css and apply to anywhere we have the external CSS link placed.
And since we have that, let's save and preview our contacts.html and project.html
Now, our links are orange, our paragraph texts are red and the fonts have changed to Tahoma and because we don't have header h1 nothing changed, if we change h2 to h1 below our main header, we'll see that the change in our external CSS will be applied automatically
Changed from h2 to h1
Save and preview the project.html and you will the CSS was applied automatically.
Let's say we made a website that has 50 different pages and your clients wanna make some changes, like: change the headers h1 from green to blue (thinking that they wanna suffer you) since they think you'll start going from one page to the other changing it one by one but since you know you used the external stylesheet, all you have to do is to go into your style.css file and edit the h1 style from green to blue and all your webpages will have blue header. That's the beauty of external stylesheet.
