We have already seen one of the pillars of the web, structure with HTML. Now we move on to the second one, applying visual style rules CSS.
So far we had a boring web page, in black and white, as if we were reading a scientific document from 1995. To fix this and give color, shape and positioning to our content, we need to apply CSS code (Cascading Style Sheets).
The first step is to see how we can connect our CSS code to the structure of an HTML document so that the browser knows how to draw each element on the screen.
And of course, there are different methods, each with its advantages and disadvantages. So let’s get to it 👇.
Inline Styles
The most basic and direct way to apply CSS is to add style rules directly on the HTML tag we want to modify.
To do this, we use the global attribute style.
<h1 style="color: blue; font-size: 24px;">My main title is blue</h1>
<p style="color: gray; margin-top: 10px;">This is a test paragraph.</p>
By using the style attribute, the rules are applied only and exclusively to that specific element. It won’t even affect other <h1> headings you have on the same page.
At first glance, it may seem like the easiest option because you don’t have to leave the HTML file. However, in the real world, this practice is considered an anti-pattern in most cases.
Disadvantages of Inline CSS
- Everything lumped together: We mix structure (HTML) with presentation (CSS), breaking the separation of concerns.
- Zero reusability: If you have 50 buttons and want to change the color from red to green, you would have to manually modify the
styleattribute 50 times.
Still, despite its bad reputation, inline CSS has its specific use cases (few, though).
For example, it is well used when we dynamically manipulate elements with JavaScript, or apply CSS variables (we will see them later).
Internal Stylesheet
The next logical step in the evolution of web design was to group all style rules in one place within the same HTML document.
This is done inside the <head> section of our page, wrapping the CSS code with the <style> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Web</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>My main title is blue</h1>
<p>This is a test paragraph.</p>
</body>
</html>
With this method, we have managed to visually separate design from content. The <body> is clean again and all rules apply at the document level.
It’s cleaner. But it still has a serious scalability problem. If your website has a homepage, a contact page, and a store (three different .html files), you will have to copy and paste that same <style> block into all three files.
If tomorrow your client wants to change the font, you will have to open all the website files one by one.
External Stylesheet
This is the standard and correct way to work, in most cases. It consists of extracting all the design code into a completely independent file with the .css extension (e.g., styles.css or style.css).
Once we have our separate CSS file, we must link it to our HTML documents. To make this connection, we use the <link> tag inside the <head> section.
<head>
<link rel="stylesheet" href="styles.css">
</head>
And in the same directory, we would have a file named styles.css that contains only pure CSS rules (with no trace of HTML tags):
/* Inside styles.css */
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
}
