Previously, we looked at adding CSS code to each HTML element by using attributes, but this was quite messy and code quickly became difficult to read. While Aria often likes leaving a mess, in code it’s not a good idea!
We can use other HTML attributes, like id and classes, to refer to specific elements or groups of elements. This means we can write all our CSS together and tell the computer which elements to apply the styling to by using HTML ids and classes.
But where do we write all of our CSS?
One way is to include it at the very top of your HTML file. This is called internal CSS.
How do we do that?
Oddly enough, it starts with a new HTML element.
Before you can start adding internal CSS to your HTML file, you need to tell the computer that you’re adding CSS so it should expect the next batch of code to be in a different coding language.
This is done by simply using the style tag in HTML.
<style>
CSS Code Goes Here
</style>
Now we are ready to add CSS inside this element. As this CSS is saved inside the HTML file it applies to, it is called internal CSS.
Let’s say we are trying to style HTML elements created with the following code.
<h1 id="main-title">Aria The Cat's Website!</h1>
<p class="intro-text">I am a tabby cat named Aria and I like to sleep quite a lot. Every cat does because, let’s face it, sleeping is great.</p>
Also, I have an owner who, in my opinion, could feed me more enthusiastically.
I am a tabby cat named Aria and I like to sleep quite a lot. Every cat does because, let’s face it, sleeping is great.
Also, I have an owner who, in my opinion, could feed me more enthusiastically.
Each element has an id or a class, so we can refer to them specifically, right?
That’s right but the reference is different when using ids and classes.
When referencing a HTML element’s id in CSS, add a # symbol before the id value in your CSS code to tell the computer that it should look for a HTML element with this id.
This would look like this.
#main-title
Then to add CSS, follow the id name with a { symbol, add your CSS and then add a } symbol. All the CSS code relevant to this particular HTML element should go in between these symbols.
What are these symbols called?
{ and } are generally called curly brackets.
That’s cute. I don’t like it, I’m supposed to be the only cute one.
When referencing a class value, instead of a # symbol, use a full stop instead. Just like this:
.intro-text
Let’s add some CSS now. What colours do you want to make the text?
Grey and white like me!
Well white might be difficult to read, especially on a white background.
You sap the fun out of everything. How about brown and grey?
#main-title {
color: brown;
}
.intro-text {
color: grey;
}
Like we did with HTML, I’ve spaced the words out so it is obvious which CSS statements apply to which elements. Remember to finish each CSS property value with a ; symbol and remember that this CSS code should sit within a HTML style element.
Use the boxes below to try your own colours on these HTML elements.
#main-title {
color:
}
.intro-text {
color:
}
I am a tabby cat named Aria and I like to sleep quite a lot. Every cat does because, let’s face it, sleeping is great.
Also, I have an owner who, in my opinion, could feed me more enthusiastically.
There are several advantages of internal CSS over in-line CSS. Firstly, it is much more organised.
All your CSS for that page is in one place and so it is easier to find the code you want to change. It is also easier to see which CSS properties are applied to each HTML element as the classes or ids are shown with your CSS code.
Another advantage of internal CSS is that it is easy to manage additions to your page.
Say you need to add some more paragraph elements to your page and you want them to be styled in the same way as all the other text. With in-line CSS you would need to add all the CSS to each new element but with internal CSS you can just give these new elements the same class as the other text and you’re finished!
Going back to our flea treatment example we used previously, this would be like preparing a large batch of your flea treatment at a pet shop so anyone can come in and use it. This is quicker and easier, just like internal CSS is compared to internal CSS.
I guess hiding from fleas is another strategy
Another advantage of this method over individual, smaller batches, is you can easily change the ingredients and quickly change the treatment, if you find something better.
A similar advantage is true in internal CSS in that it is quick and easy to make changes to lots of HTML elements.
Let’s say you have 100 paragraph elements on your page and you added the same in-line CSS to each one but you have decided to change the colour of the text.
Can you see why this would be a nightmare?
You would have to change 100 lines of code right?
Exactly!
That’s making me tired just thinking about it.
Everything makes you tired.
With internal CSS you would only need to change one line of code to change all 100 elements, as long as they were all part of the same class. Take our intro-text example from earlier, you only need to change that one line of CSS to change the colour of all elements in the intro-text class.
Perfect. This all sounds really good so I’ll just use internal CSS.
Internal CSS is great. But what if you want your styling to be the same across all of your pages? In these instances, there are better ways than internal CSS.