3.1: Introduction to CSS

Cascading Style Sheets are best way to control typography on web pages. A stylesheet is a central location for storing type and space definitions. The Web Style Guide authors note these advantages to using CSS:

Any HTML tag can be assigned a font family a certain size, weight and color, as well as with custom indents and spacing. This is the eXtensible part of HTML5. CSS allows you to:

  1. keep the typography uniform on all Web pages, giving your Web site a unified look.
  2. change the typography of your entire Web site by changing the specifications of one page.
  3. concentrate on content independently of formatting.

How to set up your CSS page

You write Cascading Style Sheets with your text editor, same as your HTML page. The CSS page is plain text, no formatting and NO HTML. Follow these steps:

  1. Open an new document in your text editor. The document must be blank, with no HTML tags on it.
  2. Save your new document in your production folder and name it style.css.
  3. Open the blank stylesheet. Web developers using WordPress or other content management systems often start with a blank stylesheet that has a group of common selectors with standardized names, a Creative Laziness™ technique that saves time and prevents error.
  4. Copy the blank stylesheet and paste it into your style.css file.
  5. SAVE your CSS page.
  6. Make sure your HTML page is linked to your stylesheet. If you copied the minimal HTML page, you should see this somewhere between the head tags:
    <link rel="stylesheet" type="text/css" href="style.css">
    
    When a browser opens your web page, it will see this link and load the styles first, then the page.
  7. Test your styles using a method similar to what you used in Chapter 1 to test your HTML5 page:
    1. Open your HTML5 page in your browser.
    2. If the page is linked correctly to your CSS page, you should see an immediate difference in that the font should change to Arial, a sans-serif font.

On the next page, we’ll learn how to write your CSS specifications.

ACTIVITY 3.1: CREATE YOUR CSS PAGE

Follow the instructions above to create a CSS page and place it in your production folder.

  • Copy the blank stylesheet as a starting point and save it in your production folder as style.css
  • Check that your HTML page (index.html) has the correct link to the CSS page.

The next sections will show you how to create styles that set your page apart.