External Stylesheets

CSS is usually used by creating a stylesheet file and linking your HTML code to that file.

Creating a CSS File:

  1. Open a text editor and type/paste the CSS code into a new file.
  2. Save the file as style.css
  3. Open your index.html file. Paste the following line in the head (between the <head> and </head> tags):
<link href="style.css" rel="stylesheet" type="text/css" />

4. Save index.html and load it in your browser. You should see your style!

Make sure that you’ve put the tag in the head section of your webpage (not the body section), and that the value of the hrefattribute contains a path to the CSS file you’ve just created.

Stylesheet Syntax

The stylesheet is organized into “blocks” of CSS rules. Each block is composed of a selector, followed by a list of rules enclosed with curly braces ({ and }). A CSS selector is a way of defining the scope of the rules; in other words, a selector defines to which elements the rules will be applied. The example below shows the generic syntax of a stylesheet.

/* this is a block of CSS rules */
selector {
  property: value;
  property: value;
}

/* this is another block */
selector {
  property: value;
  property: value;
}

Note: In CSS, lines that begin with /* and end with */ are comments. Just like HTML comments, they have no impact on the webpage; they are only displayed in the code and are meant to add documentation or any other notes to the code.