CSS stands for Cascading Style Sheets. It is the language we use to style an HTML document. At a high level, HTML is intended to provide the structure of a document, through tags, while CSS can be seen as the presentation layer of that structure: color, spacing, layout, and much more. CSS also enables the user to specify how the content should be presented across different types of media and different sized screens.
CSS is a rule-based language, which allows us to concisely specify how we want different parts of our HTML pages to look like. It allows us to declare things like I want all paragraphs on my HTML page to be red over a blue background, with a 16pt font size, in a machine-readable language. Writing this verbal rule in CSS looks like this:
p {
color: red;
background-color: blue;
font-size: 16pt;
}
What you see above is a rule. A stylesheet (CSS file) consists of multiple rules like this one, which get applied to various parts of our HTML page.
The syntax of an individual rule consists of:
p, meaning that the rule gets applied to all paragraphs (HTML <p> tags.)There are three main ways of styling an HTML page. They all use the same CSS language and syntax, but are different in where the CSS code lives. We’ll mostly use the third option, but it’s important to be aware of all three.
Option #1 (not great): style attribute for individual elements
<html>
<head>
<!-- We have an empty head tag here, no page metadata. -->
</head>
<body>
<p style="color: red;"> This is a red paragraph </p>
<p> This paragraph is NOT red. </p>
</body>
</html>
Using the style attribute is a great way to try things out quickly in CSS. However, as an element’s styling gets more complex (meaning multiple CSS properties,) and more elements get custom styles, the HTML document can become really messy really quickly. At the same time, if we wanted to apply the same style to two different elements, we would have to copy and paste the value of the style attribute, and that’s not ideal. This is why we will rarely use style as an attribute.
Option #2 (a bit better): <style> tag, declared inside of <head>
<html>
<head>
<style>
p {
color: red;
}
</style>
<!-- The CSS code above applies the red color property to ALL <p> tags on the page. -->
</head>
<body>
<p> This is my red paragraph. </p>
<p> This is another red paragraph. </p>
<p> All paragraphs are actually red in this example. </p>
This text, however, is not red, because it's not enclosed in a p tag.
<div> Neither is this one. </div>
</body>
</html>
Option #3 (much better): Using a separate CSS file
This is really just Option #2, but the <style> tag is replaced by an external file. Everything else is the same. We first create a file called style.css where we write our style declarations:
p {
color: red;
}
And then point the HTML page to this external styling file. To link an external stylesheet, you'd include a <link> element inside the [<head>](<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head>) tag of your HTML file like this:
<html>
<head>
**<link rel="stylesheet" href="/style.css">**
<!-- We use the <link> tag to point to our CSS file. -->
</head>
<body>
<p> This is a red paragraph. </p>
<p style="color: blue"> The style attribute has higher priority
than the external stylesheet, so this paragraph will be blue.
</p>
</body>
</html>
The <link> HTML element we used to include the stylesheet specifies relationships between the current document and external resources. This element is most commonly used to link to stylesheets, but is also used to establish site icons. The **rel** stands for "relationship", and is probably one of the key features of the <link> element — the value denotes how the item being linked to is related to the containing document. As you'll see from our Link types reference, there are many different kinds of relationship.