How do you use Cascading Style Sheets (CSS)?

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language that is used to style and layout web pages, such as changing the font, colour, size, and spacing of your content, splitting it into numerous columns, and adding animations and other decorative elements.

A cascading style sheet is made up of rules. A CSS rule is made up of one or more selectors and a semicolon-separated list of declarations inside brackets.

Example:

p {color: teal;}
  • p is called the selector
  • The information between the curly brackets { } is called the declaration
  • color is the property
  • teal is the value

Using CSS

CSS allows you to customise the look and feel of one or more web pages. You can target one, several, or all of the given items on a single page, or even all of the site’s pages, swiftly and efficiently.

CSS can be added to HTML documents in 3 ways:

  • Inline – by using the style attribute inside HTML elements
  • Internal – by using a element in the <head> section
  • External – by using a element to link to an external CSS file

Inline CSS

The first is to use an inline style, where we apply directly to individual elements with the style attribute.
The text colour of the <h1> element is blue, and the text colour of the <p> element is red in the following example:

<h1 style=“color:blue;”>A Blue Heading</h1>

<p style=“color:red;”>A red paragraph.</p>

Internal CSS

Internal CSS is defined within an element in the <head> section of an HTML page.

The example below changes the text colour of ALL <h1> elements on that page to blue.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {background-color: powderblue;}
        h1   {color: blue;}
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

External CSS

Many HTML pages rely on an external style sheet to establish their look.
Add a link to an external style sheet in the section of each HTML page to use it:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Any text editor can be used to create the external style sheet. The file must be saved with a.css extension and must not contain any HTML code.

This is how the "styles.css" file appears:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

External style sheets are the most efficient way to use CSS on a website (it’s easier to maintain track of and implement a site’s style from a dedicated CSS file), whereas internal style sheets and inline style can be utilised on a case-by-case basis when individual style modifications are needed.

Further reading

To learn more about CSS and it’s capabilities, be sure to check out MDN Web Docs

Share this article. Follow me on Twitter for more updates.

How do you use Cascading Style Sheets (CSS)?
Scroll to top

Pin It on Pinterest