This tutorial demonstrates how to use a CSS “cascading style sheet” to style an HTML web page. We explain how to read and create a CSS file.

This article was first seen on and republished from html-and-css-tutorial.com

Tutorial 1: How To Create Your First HTML Elements With Examples
Tutorial 2: How To Create a Valid HTML Web Page With Elements
Tutorial 3: What Are More Examples of HTML Elements and Structure
Tutorial 4: How To Use CSS (Cascading Style Sheets) To Style HTML

In the previous tutorials, you learned how to mark up your HTML documents using HTML elements. By marking up an HTML document, you clarify the document’s structure and prepare the web page for adding CSS. Applying CSS allows you to style the document’s visual appearance.

This CSS tutorial will create CSS stylesheets that control how HTML web pages render in a web browser.

What is a CSS stylesheet (stylesheet.css)?

A CSS stylesheet is a file that stores styles in a separate file from your HTML document. One CSS file can style many web pages. You often create only one CSS document to style all your web pages when you create a website. This way, you can make sure all your web pages have a uniform look. If you decide to change the look of your pages, you only need to update one file, the CSS file.

A CSS document is often called a stylesheet. Many times people name their stylesheet file “stylesheet.css” or even “style.css”

How to include a CSS stylesheet in HTML?

There are three options to include CSS styles for an HTML file:

First, you can inline CSS by using the style attribute.
Two, you can embed CSS in the <head> element.
Last, you can include an external CSS file.

How does the web browser know which CSS document, or style sheet, to apply when displaying a web page?

There is a unique element linking CSS to an HTML document. This is the link element, which may only occur within the page’s head element.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

In the above example, the head element contains a single link element. The link element tells the web browser which stylesheet to apply. All HTML documents you want to style should have a link reference or CSS embedded within a style in the head element to use CSS.

The link element is an element that only has a start tag and no end tag, just like the <img> image
element. For now, treat the link element as magic. (Seriously, don’t conjure up any demons)

The link element in the example above refers to a stylesheet named “style.css”. When a web browser prepares to show an HTML document with this link element, it will download the “style.css” stylesheet and apply the rules to the web page.

You can add a link element to the head element, and the head is the only area the link can be placed and is a strict rule for HTML validation. To make sure your HTML is valid you can visit the W3C validator.

How to create a CSS stylesheet?

To create a CSS stylesheet, you must save a file in any text editor with a .css extension. Next, you add CSS rules to define how elements in a web page should look. Now it’s time to see what a stylesheet looks like. Below are the contents of a stylesheet suitable to style all the examples from the previous HTML tutorials.

h1 {
   font-family: arial, sans-serif;
   font-size: 20px;
   font-weight: normal;
   color: red;
}

p {
   font-family: times, serif;
   font-size: 16px;
}

Does this CSS stylesheet look cryptic to you, or are you able to guess the meaning of some parts of the document? The style sheet contains two rules defining how the content of h1 and p elements should render to the users.

h1 {
   font-family: arial, sans-serif;
   font-size: 20px;
   font-weight: normal;
   color: red;
}

The first rule styles all h1 elements. It says:

The text should use the Arial font, and if Arial is not available, it applies the sans-serif font.
The height of the font should be 20 pixels.
The font’s weight should be “normal”, neither bold nor light.
The color of the font should be red.

p {
   font-family: times, serif;
   font-size: 16px;
}

The second rule styles all p elements. All paragraphs enclosed within p elements will have styles using this rule. The rule says:

The text should use the “times” font, and if “times” is not available, it applies the serif font.
The height of the font should be 16 pixels.

The rule styling of p elements said nothing about the color of the font. A standard (the default value) applies when some HTML element properties do not explicitly contain a style. For font color, the standard color usually is black.

Let’s apply the CSS above to an HTML document and observe what it looks like.

Below is one of the HTML documents we have discussed previously, this time as a complete and valid document with a link to the above stylesheet. The style sheet file name is style.css.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <h1>Cobb salad</h1>
    <p>Cobb salad is a tasty salad, one of my favourites.</p>
  </body>
</html>

Finally, here is the finished result.

Cobb salad

Cobb salad is a tasty salad, one of my favourites.

You can see how the stylesheet has affected the elements of the document. The heading text becomes red, and the styles apply a “times” font to the paragraph text, etc.

Are you starting to see how easy it can be to style HTML documents using CSS?

Vocabulary: Rule, Selector, Declaration, Property, and Value

CSS stylesheets contain rules like the one below:

p {
    font-family: times, serif;
    font-size: 16px;
    border: 2px solid red;
}

A rule consists of two parts:

The selector. The selector says which HTML elements the rule is to style. For the rule above, the selector is the p. The selector is the link between the HTML document and the style sheet.
A list of declarations. Brace characters (“{“, “}”) enclose the declarations and semicolons separate each property. Each declaration consists of two parts:
1. The property name names the aspect of the selected HTML element(s) that is to be affected. Font-family is a property name in the above example.
2. The value of the property, for instance, the name of a font.

All HTML element types are possible selectors. You can thus style all the element types we have talked about in the previous HTML tutorials, including h1, h2, p, ul, ol, li, b, and i.

A declaration consists of two parts, the property name, and the value. A colon character separates two pieces of any CSS declaration. It is customary to place the colon immediately after the property name, as shown in all the examples in all tutorial examples.

We will look more at the declarations part of stylesheets in the following CSS tutorial. CSS properties are where the exciting stuff is. The stylesheets are where you decide what your web pages will look like.

What is a CSS rule?

A CSS rule works by grouping CSS properties and using a selector to target an HTML element or elements. The rule then applies properties within it. Additionally, a rule encloses properties within two brackets: the start bracket and the closing bracket. A CSS rule consists of at least three parts, selector, property, and value, and some CSS rules have multiple properties and values per group.

Down below, in the diagram, we have a CSS rule which includes a single background property with a #ffffff value. We will look more at the declarations part of stylesheets in the following CSS tutorial. CSS properties are where the exciting stuff is. The stylesheets are where you decide what your web pages will look like.

.container {     background: #ffffff;     }
 ^         ^     ^           ^            ^
 |         |     |           |            |
 |         |     |           |            |—— Closing Bracket
 |         |     |           |—— Declaration Value (Color) 
 |         |     |—— Declaration Property (Background)
 |         |—— Start Bracket 
 |—— Selector (Class Name)

What is a CSS selector?

The first part of a CSS rule is a selector. It is a term that contains a sequence of characters that allow a web browser to target certain HTML elements. The selector applies the properties inside to the elements it targets. Selectors are the first part of a CSS rule. Below, we have a couple of selectors: an ID selector, a general element selector, and a class selector.

/** Selector (Element with an ID value of "idSelector") **/     
#idSelector { 
  background: #ffffff;
}

/** Selector (All div elements) **/  
div { 
  background: #ffffff;
}

/** Selector (Element with the class name "classSelector") **/
.classSelector { 
  background: #ffffff;
}

What is a CSS declaration?

A CSS declaration comprises a CSS property and a value, constructed as a key-value pair inside the CSS selector brackets. The key-value pair is always separated with a colon and ends with a semi-colon. For example, look at the CSS property background: #ffffff; it contains a colon separator and terminates with a semi-colon. Below, we illustrate a complete CSS declaration with a selector, property, and value.

/** A Declaration is a key-value pair **/
.container {     background: #ffffff;     }
                 ^           ^            
                 |           |            
                 |           |            
                 |           |—— Declaration Value (Color) 
                 |—— Declaration Property (Background)

What is a CSS property?

A CSS property is a style name that applies unique styles to an element in an HTML web page. For example, the “color” property changes text color within an element. The property contains a value, which a colon separates from the property name. Many different property names are available to choose from and apply to elements. Here is a reference to a whole hoard of CSS properties. We have an example of a selector that contains five CSS properties with their values. Take a look down below.

/** Selector (All div elements) **/  
div { 
  background: #ffffff;
  color: #202124;
  font-family: Roboto,arial,sans-serif;
  font-size: 16px; 
  border: 1px solid black;
}

What is a CSS value?

A CSS value is the value of a CSS property and can contain a complex string of characters, like a URL, a simple integer, or even a text string. Some CSS values have single or double quotes, like the content property.

/** A CSS value is the value of a property **/
.container {     background: #ffffff;     }
                             ^            
                             |            
                             |
                             |—— CSS Value #ffffff

Summary

In this CSS tutorial, you have seen what a CSS stylesheet looks like and learned the fundamental structures of a stylesheet:

Stylesheets contain rules
A stylesheet rule starts with a selector identifying which HTML element the rule applies to.
A stylesheet rule includes a list of declarations setting property values for the HTML element named by the selector.

Addionally, you also learned to link an HTML document to a specific style sheet.

How To Use CSS (Cascading Style Sheets) To Style HTML