Great, now you know how to add CSS to your web pages inside the head element of your HTML file. You also know how to add an external CSS file to your web page. But there is one more way to add CSS to your web pages. You can add CSS to your web pages using the style attribute. This is called inline CSS.
Do note that inline CSS is not recommended. It is better to use internal CSS or external CSS. But it is good to know how to use inline CSS because you will see it in other people’s code and sometimes some frameworks that generete HTML code for you will use inline CSS. So let’s get started!
The style attribute#
Remember what an attribute is? An attribute is a property of an HTML element. For example, the href attribute is a property of the <a> element. The href attribute specifies the URL of the page that the link goes to.
Just like the href attribute is a property of the <a> element, the style attribute is a property of an HTML element. Just like the href attribute is used to add a link to an HTML element, the style attribute is used to add CSS to an HTML element. And it works on any HTML element!
The style attribute is used to add CSS to an HTML element. The style attribute is placed inside the opening tag of an HTML element. The style attribute contains CSS code that is applied to the HTML element. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1 style="color: red;">My First Web Page</h1>
<p>This is my first web page.</p>
</body>
</html>
As you can see, we have added the style attribute to the <h1> element. The style attribute contains CSS code that changes the color of the <h1> element to red. The result is a web page with a red heading.
This is called inline CSS because the CSS code is contained within the style attribute. This is the last way we can add CSS to our web pages.
Be wise#
As you can see, is not very easy to maintain inline CSS. It targets only one element in your entire document and it is not reusable. It can also be super hard to maintain. Imagine you have a 10000 line HTML document and some evil developer decided to add inline CSS to some of the elements. You would have to go through the entire document to find that one element and remove the inline CSS. And if you are not careful, you might remove the inline CSS from the wrong element.
Or say a client asked you to change the color of the <h1> elements to blue. But when you go to your CSS file, you see that the color of the <h1> element is already blue. You might think there is a bug in your code. But in reality, what happened is that someone put an inline CSS rule in your HTML file that changes the color of one single <h1> element to red. This is enough to override your CSS rule that changes the color of all <h1> elements to blue (we will see the hierarchy of CSS rules in a later lesson). And you would probably spend a lot of time trying to figure out why the color of the <h1> element is red instead of blue.
To make your life and the life of your other developers easier, it is better to use internal CSS or external CSS and to avoid inline CSS as much as possible. But it is good to know how to use inline CSS because you will probably see it out there in the wild.
Activity#
Feel free to experiment with the CSS code in the style attribute of one of the web pages that you built in the previous lesson. Try changing the color of the <h1> element to something other than red. You can also try adding a CSS rule that changes the color of the <p> element.