How to add CSS to a Webpage

When it comes to adding CSS to your document, you have a choice of methods. However, one method stands out as the most common.

There are 4 ways of adding CSS to a webpage: declare inline, embed into the head of your document, link to an external CSS file, import a CSS file.

Inline CSS

Style sheet information is applied to the current element. Instead of defining the style once, then applying the style against all instances of an element (say the <p> tag), you only apply the style to the instance you want the style to apply to.

For example:

Embedded CSS

You embed CSS information into an HTML document using the 'style' element. You do this by embedding the CSS information within <style>... </style> tags in the head of your document.

For example, place the following code between the <head>... </head> tags of your HTML document:

p {color:#ff9900;}

Now, whenever any of those elements are used within the body of the document, they will be formatted as instructed in the above style sheet.

External CSS

An external style sheet is a separate file where you can declare all the styles that you want to use throughout your website. You then link to the external style sheet from all your HTML pages.

This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.

For example:

  1. Type the following into a plain text file, and save with a .css extension (eg, external_style_sheet.css).

    p {font-family: georgia, serif; font-size: x-small;}
    h1 {color: #000099; }
  2. Add the following between the <head>... </head> tags of all HTML documents that you want to reference the external style sheet.
    <link rel="stylesheet" href="external_style_sheet.css" type="text/css">

External style sheets are the most common method of applying styles to a website. Most modern websites use an external stylesheet to apply site-wide styles to the whole website.

Imported CSS

You can use the @import rule to import rules from other style sheets.

Add either of the following between the <head>... </head> tags of all HTML documents that you want to import a style sheet into.

@import "imported_style_sheet.css";
@import url("imported_style_sheet.css");