Contents  >

Introduction to CSS

Learning Goals

At the end of this Tutorial you will be able to:

There are no sample files to download, create or update in this Tutorial.

Contents

Applying your own styles to your web pages

The structure of a CSS file

CSS selectors

CSS properties and values

Indentation guides

The common CSS properties

Styling with font-family

Styling with font-size

Styling with font-weight

Styling with font-style

Styling with color

Styling with letter-spacing

Styling with text-transform

Styling with text-align

Styling with line-height

Styling with margin-top and margin-bottom

Styling with background-color

Adding comments to a CSS stylesheet

Further resources

Applying your own styles to your web pages

In the previous Introduction to HTML Tutorial, you added markup tags such as <h1> and <h2> to the text of your sample HTML files.

When you saved your files and displayed them in a web browser, you could see the text styled with headings, sub-headings and paragraphs.

Tutorial: Styling HTML with CSS

Where did these styles come from?

The answer is that these are default styles created by the web browser – Google Chrome, Mozilla Firefox or whatever.

To create and apply your own styles to a web page, you need to follow these steps:

The next Tutorial, Styling Web Pages with CSS, takes you through the above steps based on the four sample web pages you created in the Introduction to HTML Tutorial.

This Tutorial explains the basic structure of a CSS stylesheet file, and introduces the CSS properties most commonly used by web designers when styling web pages.

The structure of a CSS file

Some CSS files are only 30-50 lines long. Others may have as many as 50,000 lines. In every case, they all have a similar structure.

All CSS files consist of so-called selectors. Each has a selector name (such as h1 or p) that matches a tag name (such as h1 or p) in a linked HTML file.

After the selector comes what is called a declaration block. These always begin with an opening curly brace ( { ) and end with a closing curly brace ( } ).

Tutorial: Styling HTML with CSS

CSS selectors

You use a selector in a CSS file to ‘target’ elements in a linked web page. For example:

In the simplest case:

CSS properties and values

Inside every CSS declaration block is at least one style rule that consists of two parts:

Below you can see two sample rules, each on a line of its own. The font-weight and font-size are the properties, and normal and 16px are the values.

   font-weight: normal;
   font-size: 16px;

Every property must be separated from its associated value by a colon (:) character.

Tutorial: Styling HTML with CSS

As you can see from the example below, it makes no sense to enter a property on its own without a value.

 /* Any particular value? 16px maybe? Or perhaps 64px? */
 h2 {
    font-size
 }

Conversely, a value entered on its own without a property also makes no sense. As the following example makes clear.

 /* Size of what? Font? Bottom margin? Left margin? */
 h2 {
    24px
 }

Style rules must be separated from one another by a semi-colon character (;). Otherwise, the web browser cannot tell when one style rule ends and the next style rule begins.

Tutorial: Styling HTML with CSS

As for the last rule before a closing curly brace, you can follow it with a semi-colon. But it is not necessary. The following two examples have exactly the same effect.

   font-weight: normal;
   font-size: 16px;
}
   font-weight: normal;
   font-size: 16px
}

When a selector contains just one, two or three rules, it is often typed on a single line. See the example below.

p {
   font-family: sans-serif; font-size: 16px; margin-bottom: 12px
}

Or, more simply:.

p { font-family: sans-serif; font-size: 16px; margin-bottom: 12px }  

Indentation guides

Visual Studio Code displays vertical lines called indentation guides to help you visually organise blocks of indented text.

Indented text is text that is ‘pushed in ’ from the left margin, typically by pressing the Tab key.

Here are the steps to follow when creating a new style in a CSS file:

Indentation guides can also help you identify errors such as missing (or extra) opening or closing curly braces. In the example below, you can see that the opening and closing curly braces line up correctly.

Tutorial: Styling HTML with CSS

In the two examples below, the first is missing a closing curly brace, while the second has two closing braces.

Tutorial: Styling HTML with CSS

The common CSS properties

The following table lists and describes the main CSS properties you will use when styling web pages.

Tutorial: Styling HTML with CSS

The next sections of this Tutorial look in more detail at each of these widely-used CSS properties.

Styling with font-family

The two basic values of the font-family property in CSS are serif and sans-serif.

Tutorial: Styling HTML with CSS

By default, web browsers display both headings and paragraphs in a serif font.

/* These two style rules make no difference. 
Both h2 and h3 sub-headings are already serif by default. */
h2 ( font-family: serif }
h3 ( font-family: serif }

/* This style rule does make a difference. */
p ( font-family: sans-serif }

For printed documents, such as books, newspapers, magazines and so on...

In web pages, however, there is no evidence that paragraphs of text are more readable in serif fonts. So you will see fonts of either the serif or sans-serif family used for various elements of web pages.

Tutorial: Styling HTML with CSS

Styling with font-size

As its name suggests, the font-size property sets the size of text in headings and paragraphs.

Here are the default values of font-size for headings and paragraphs used by most web browsers.

/* Default values for font-sizes in most web browsers. */
h1 ( font-size: 32px }
h2 ( font-size: 24px }
h3 ( font-size: 18px }
p  ( font-size: 16px }

Particularly for <h1> and <h2> headings, the font-size values you choose will depend on the number of characters in the heading. See the examples below.

Tutorial: Styling HTML with CSS

Styling with font-weight

The two basic values of font-weight are normal and bold. By default, web browsers display paragraphs in normal weight and all headings and sub-headings in bold.

/* This does make a difference. Headings are bold by default. */
h2 ( font-weight: normal }

/* This makes no difference. Paragraphs are normal by default. */
p ( font-weight: normal }

As you learnt in the previous Introduction to HTML Tutorial, you can make one or a few words in an element bold with the <b> ... </b> tag pair in HTML.

Tutorial: Styling HTML with CSS

To make entire heading or text paragraph bold, however, use the font-weight: bold property and value pair in CSS.

Styling with font-style

The two basic values of font-style are normal and italic. By default, web browsers display both all headings, sub-headings and text paragraphs in the normal font-style.

/* These make no difference. Both are already normal by default. */
h2 ( font-style: normal }
p ( font-style: normal }

As you learnt in the previous Introduction to HTML Tutorial, you can make one or a few words in an element italic with the <i> ... </i> tag pair in HTML.

Tutorial: Styling HTML with CSS

To make entire heading or text paragraph bold, however, use the font-style: italic property and value pair in CSS. The two examples below are from Lou Levits.

Tutorial: Styling HTML with CSS

Styling with color

You use the color property (US spelling) to set the colour of headings, sub-headings and text paragraphs. By default, web browsers display text in black.

/* These make no difference. Both are already black by default. */
h2 ( color: black }
p  ( color: black }

In web design, the simplest way of setting colours is to use colour names. Many colour names are both easy-to-remember and self-explanatory. For example, yellow, purple and so on. Other colour names are less obvious, such as hotpink, mediumvioletred and lavenderblush.

Colour names are not case-sensitive. For example, these three versions of the same colour name are all valid.

  h1 { color: DarkOrchid }
  h2 { color: darkorchid }
  h3 { color: DARKORCHID }

You can see a full list of colour names on this W3 Schools web page.

In a later Tutorial, Colours and Web Design, you will learn about two of the colour name systems used by professional web designers: the RGB system and the hex code system.

Styling with letter-spacing

The letter-spacing property sets the spacing between text characters within a heading, sub-heading or paragraph. Like the font-size property, you can set letter-spacing in px units.

In web pages, reduced or increased letter-spacing is often used in headings for visual effect. In text paragraphs, however, web designers typically use default letter spacing.

You will commonly see letter spacing effects applied in brand logos to achieve a distinctive appearance. See the examples below.

Tutorial: Styling HTML with CSS

Styling with text-transform

You can use the text-transform property to control how the web browser displays text in headings, sub-headings or paragraphs as capital letters.

The most commonly-used value of the text-transform property is capitalize. The forces all the text to appear in CAPITAL LETTERS, regardless of how the text is typed in the web page.

/* These force all the text to display in CAPITAL LETTERS. */
h3 ( text-transform: capitalize }
p  ( text-transform: capitalize }

Styling with text-align

In Microsoft Word or other word processors, you are typically offered four choices for aligning both headings and text paragraphs: Left, Centered, Right and Justified.

Tutorial: Styling HTML with CSS

In CSS, the equivalent alignment values are:

   text-align: left; /* Default value  */
   text-align: center;
   text-align: right;
   text-align: justify; /* Not recommended */

Below are examples of the left, center and right values of the text-align property in CSS.

Tutorial: Styling HTML with CSS

The justify value of text-align is not recommended because web browsers do not distribute spacing between characters and words proportionally.

Styling with line-height

The line-height property sets the vertical distance between lines of text within an element. For most web browsers, the default line-height is in the range 1.1 to 1.2.

Tutorial: Styling HTML with CSS

Styling with margin-top and margin-bottom

The margin-top and margin-bottom properties control how much vertical spacing is displayed above and below web page elements such as headings and text paragraph.

Like the font-size property, these two properties can be written in px (for pixel) units.

Consider the Microsoft Word Paragraph dialog box below.

Tutorial: Styling HTML with CSS

The equivalent in CSS would be:

Below you can see examples of margin-top, margin-bottom and line-height values in CSS.

Tutorial: Styling HTML with CSS

Styling with background-color

By default, browsers display web pages with a white background. You can change this by setting a CSS background-color property for the <body> tag.

(Again, note the US-style spelling of this property.)

/*  Web Page Background Colour  */
body { background-color: red }

In a later Tutorial, Colours and Web Design, you will learn about two of the colour name systems used by professional web designers: the RGB system and the hex code system.

Adding comments to a CSS stylesheet

In a CSS file, a comment is one or more lines of text that have no effect how the web page is displayed by the web browser.

You can see an example of a short, one-line comment below.

  /* This is a comment in a CSS file */ 

And here is an example of a longer, multi-line comment.

  /* 
  Generated by Animista on 2019-4-3 8:17:9
  http://animista.net, @cssanimista
  */

Follow these steps to create a comment in VS Code.

By default, VS Code displays CSS comments in a dark green colour.

Further resources

Hello CSS
From Interneting is Hard

Fundamental text and font styling
From the Mozilla Developer Network

Tutorial: CSS for absolute beginners
By Luke Fabish at the Luke Fabish Blog

Guide to styling and CSS
By The Geekiest One

Applying CSS
From The HTML Dog Tutorials


Return to Contents.