The correct way to add CSS to a web page
In this article, we’ll look at the correct way to add CSS to a web page, as well as which ones we shouldn’t use and the problems they bring us
How to add CSS to a project?
Today we have three ways to add CSS:
- External file (correct way);
- CSS in the head – internal (incorrect less severe);
- CSS in element – inline (incorrect more severe);
Let’s then open the negative points of the incorrect ones, so that you can see the potential problems that can be generated.
Then we will talk about option number 1, which I think is the most correct.
It is also important to mention that I am dealing with a web project without JavaScript frameworks like Vue, React, or Angular.
Because when we enter this world there are many more variables.
For example some frameworks encourage their users to style components in the component file itself.
So in these cases, this article is not so valid, as the guideline of where to place CSS or not maybe a matter of software architecture.
Inline CSS
The big problem with using CSS in the middle of HTML tags is the maintainability of the code.
Whenever the element we apply inline styling is modified, we have to remember to change this CSS on every page it is on.
This causes a performance drop on the dev team, even more, if the code is versioned.
It May result in multiple revisions, because of a CSS tweak.
An example would be:
<p style="font-size:20px;">Test</p>
So every time the paragraph changes the font size, we’ll have to change all the files that need this change.
Furthermore, the accumulation of CSS rules can make HTML as well as CSS unreadable.
Once again disturbing the dev, which has to separate this tangle of things to make changes that shouldn’t be complex.
CSS in the head – internal
A little better than inline is adding CSS to the head, but it’s still problematic.
One of the problems is that this code is added to the HTML, so we have to change it in all the files that need the modifications as well.
Generating code maintenance problems, but the good part is that it is always at the head of the page, having a fixed and objective place that the dev will make the change.
But this creates another problem, too much CSS code can make your HTML document too big, making a file too big to change.
Think about it: go to HTML, make the change, scroll back to CSS, and make the change.
This one comes and goes can be very exhausting.
In addition, we are assigning more weight to the HTML file, which can lead to slower loading of the page.
Then you will also have performance issues.
Website analyzers like Google Page Speed advise you to take this kind of CSS out of your HTML file, so this is a good time to rethink this practice.
An example of CSS in the head would be:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
The {
display: block;
width: 160px;
height: 40px;
}
</style>
</head>
<body>
<a href="#">Click here!</a>
</body>
</html>
In this case, you would lose the chance to use this style for the a tag in the rest of your project.
And whenever it was modified, you should open this file to change it and if you had it in others you would do the same process.
The correct way to add CSS – separate file, external
The best way! Simply separate your CSS code from the HTML.
A good practice might be to create a file called styles.css with all the rules and import it into HTML, like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<a href="#">Click here!</a>
</body>
</html>
To make it even better: you can put it in a specific style folder, named CSS.
It’s a good convention, so you can leave the style files on this page and the image files in an img folder for example.
Go further: if your project is very large, don’t limit yourself to a CSS file.
Break them into modules, for example:
- styles.css: general design styles;
- products.css: product page styles;
- catalog.css: catalog page styles;
And so you can keep expanding your project and making it very easy to maintain by applying this simple folder structure and file separation 🙂
Conclusion
In this article you learned the correct way to add CSS to a web page!
You should choose to use CSS externally, that is, one file for CSS and one file for HTML.
Try as much as possible to avoid using CSS inline and also in the head (internal).
Because they are bad practices and can influence several things like code maintenance, performance, and time to review the code.
And that’s it for today, until the next post!
