Cascading Styles Sheets (CSS) are the primary method of styling HTML, of customizing the appearance of our websites. Styles can be applied to HTML elements through property names and values. There are different ways in which these styles can be applied. We’ll explore these methods with the example of changing text color to red.
For a more in-depth look at CSS, explore the Learn CSS guide.
The most basic way we can apply style to an element is with an inline style where we add a style attribute to an element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p style="color: red;">hello, world!</p>
<p style="color: red;">goodbye, world!</p>
</body>
</html>
Using an inline style is not particularly efficient in cases when we have to apply a style to multiple elements. Consider the case where we want to set all paragraphs to have red text. It’d be incredibly repetitive and tedious to have to include a style attribute for every paragraph element. However, for one-off styles, I will sometimes still use inline styles for convenience.
Alternatively, and more succinctly, a style tag can be included in the head of the document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>hello, world!</p>
<p>goodbye, world!</p>
</body>
</html>
The selector (p) precedes a block delimiter (i.e., the curly braces { and }) which contains a property (i.e., color: red). This style will make all paragraph elements have red text.
In cases when I don’t have many elements or styles, I will use a style tag directly in the HTML head. However, in cases where there are many elements or many styles, I will extract the CSS into another external file.
Even with many styles, there are sometimes cases when using an internal style tag is beneficial. In the case that we extract CSS into another file, the client will need to send another HTTP request (in addition to the HTML) to parse and apply the CSS to the document. This can lead to a flash of unstyled content (FOUC) where the document appears unstyled before CSS is fully parsed. Sometimes, we should put critical CSS (i.e., CSS that would style elements that immediately appear on the website) directly in a style tag while other “non-critical” CSS be put into an external file.
Separation of concerns is a computer science principle which says that different functionalities should be divided into distinct sections. This drives the rationale of moving style into distinct files. External styles are written in the same way that internal styles are written, but should be written in a .css file.
p {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<p>hello, world!</p>
<p>goodbye, world!</p>
</body>
</html>
In the above code, the CSS file is named main.css and is located as a sibling to the HTML file. The rel="stylesheet" is required in order for the browser to understand the file as CSS.
Alternatively, we can also use an import statement to include an external CSS file.