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:
- Separation of content and design. Using CSS, website developers can specify how each HTML tag will look on the page with content markup that “reflects the logical structure of the information.” and the freedom to specify exactly how each html tag will look.
- Efficient control over many pages. One CSS page can control the graphic look and feel of thousands of pages.
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:
- keep the typography uniform on all Web pages, giving your Web site a unified look.
- change the typography of your entire Web site by changing the specifications of one page.
- 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:
- Open an new document in your text editor. The document must be blank, with no HTML tags on it.
- Save your new document in your production folder and name it style.css.
- 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.
- Copy the blank stylesheet and paste it into your style.css file.
- SAVE your CSS page.
- 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.
- Test your styles using a method similar to what you used in Chapter 1 to test your HTML5 page:
- Open your HTML5 page in your browser.
- 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.