CSS is a completely different topic on its own and is a very broad subject that warrants its own separate how-to guide. However, today’s standard call for CSS’s usage in almost every HTML website there is and therefore must be discussed to a certain extent in every HTML curriculum.
As what we’ve mention in previous chapters, CSS stands for Cascading Style Sheets. A stylesheet is basically a separate document that defines how an HTML should look like when rendered in a browser. The reason why it is called a cascading stylesheet is because the stylesheets can apply formatting to content when multiple styles already apply.
For example, let’s say we want all our paragraph content to have a red font. We can actually pick out one paragraph specifically to have a yellow font. CSS can definitely do that. Let’s take a look at our example HTML code below and its corresponding stylesheet:
1<!DOCTYPE html>
2<html>
3<head>
4<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
5<title>Fancy Fonts</title>
6</head>
7<body>
8<p>The Ink that I used to write this sentence is blue. However, the ink I used to write the word “<span>pen</span>” is red!</p>
9</body>
10</html>
Its corresponding style sheet document is:
1p {
2color: blue;
3}
4
5span {
6color: red;
7}
If your render our example HTML code in the browser with this stylesheet, it’ll have this output:
––––––––
Similar to our photo album HTML code, we link our external stylesheet to this code via the link tag. Looking at our CSS document, we’re defining attributes for two HTML elements; the paragraph <p> element and the <span> element. Our CSS document basically states that paragraphs will have a blue-colored font, while span elements will have red-colored fonts.
Looking at the rendered output, you can see that as soon as we used the elements listed in CS in our HTML code, the attribute values specified in CSS are immediately applied. Using CSS is just that easy.
What we’re doing with CSS basically is separating the style formatting (CSS) from the structural content of an HTML document. Doing these has three main benefits:
There are actually two ways to put create CSS in one place. The first is by making use of the style tag inside the head of the HTML document. Inside the style tag you’ll nest the various element attributes that you want to apply in the HTML document. Look at an example of this below:
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5p {
6color: red;
7}
8</style>
9<title>The Red Ink</title>
10</head>
11<body>
12<p>Check out this paragraph written in bright red ink!</p>
13</body>
14</html>
As you can see in lines 4 through 8 of our example HTML code above, we’ve created a style element where the CSS styles are nested.
The second way, which is considered by many as the best way, is by linking an external CSS document to the HTML document via the <link> tag. We’ve already made use of this when we made our online photo album in the last chapter. Let’s take at look at another example of this below:
1<!DOCTYPE html>
2<html>
3<head><link type="text/css"; rel="stylesheet"; href="stylesheet.css"/>
4<title>The Paragraph with the Big Red Font</title>
5</head>
6<body>
7<p>The font size of this paragraph is 35 pixels and has a red font color.</p>
8</body>
9</html>
And here is its corresponding CSS/stylesheet document:
1p {
2font-sizes: 35px;
3color: red;
4}
Here’s a point to remember whenever you use the link tag to link an external CSS document in HTML: 4Tthe values for the type and rel attributes of the link element are constant. Every time you make use of the link element, make sure that the type attribute always have the “text/css” value, and the rel attribute always have the “stylesheet” value. The only link attribute that may change is the href attribute since file locations for the CSS document may vary from project to project.