You are here:About>Computing & Technology>Web Design / HTML> About.com Web Design A to Z> Web Design Articles R-Z> Web Design/HTML Articles Y> Your First Style Sheet Using Cascading Style Sheets or CSS
About.comWeb Design / HTML
Newsletters & RSSEmail to a friendSubmit to Digg
More About CSS

Using CSS Site WideUsing Class & IDBeginning CSS

More About CSS

Using CSSCSS LibraryStyle Tags

More About CSS

CSS LinksBeginning CSS Links

Your First Style Sheet Using Cascading Style Sheets or CSS

From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

CSS is Easier Than You Think

As HTML becomes more and more a description of the content of Web pages and less the look and feel, you need a tool to describe how your pages should look. That's where Cascading Style Sheets (CSS) come in.

CSS is not hard, in some ways it's almost easier than HTML. The trickiest part is remembering the many different choices you have to choose from. Let's start with a simple style sheet that includes some of the more common styles.

Fonts and CSS

The most common adjustment to Web pages is to the fonts on the page. You can change the color, style, size, and face of your fonts, and you can do it all with CSS.

Creating a Style Sheet

The first key to writing a style sheet is to decide what you want your text to look like. You should decide the color, the font, the style and so on. You also need to decide what the different styles should be for the different tags, headings, and so on.

My Proposed Styles

  • Standard paragraph text should be black, arial narrow, and medium sized
  • Top level (h1) headings should be red, bold, and small-caps
  • Second level headings (h2) should be blue and italic
  • Notations should be standard text with a yellow background

These are the CSS elements that can change the font. Examples for how to use the CSS property are included in italics:

  • font-family
    change the actual face of the font. You can use specific font names or generic terms such as serif, sans-serif, monospace, courier, fantasy
    font-family : arial, geneva, helvetica;
  • font-size
    change the size of the font. Define the size as an absolute size, relative size, percentage, or length.
    font-size : small
  • font-style
    changes the style from normal to italics or oblique.
    font-style : italic
  • font-variant
    change the look of the text from normal to small-caps
    font-variant : small-caps
  • font-weight
    change the font to bold
    font-weight : bold
  • color
    change the color of your text. Use either named colors or hexadecimal codes
    color : #ff0000
  • background-color
    change the color behind the text. Use either named colors or hexadecimal codes.
    background-color : yellow;

Once you've decided on the styles you want, you need to write your style sheet. Place the following in the <head> of your HTML document:

<style type="text/css">
<!--
p { color : #000000; font-family : arial narrow; font-size : medium; }
h1 { color : #ff0000; font-weight : bold; font-variant : small-caps; }
h2 { color : #0000ff; font-style : italics; }
.note { background-color : #ffff00; }
-->
</style>

The first three of the above styles will be set by using the tags: <p></p>, <h1></h1>, and <h2><h2>. The final style notation is used with the class attribute. Since it is a notation that would be on text within a paragraph, but not a separate paragraph, it would usually be used with the <span></span> tag. Paste the following HTML into the document with the above CSS:

<p>
This paragraph would be in the p style. <span class="note">Note: inheritance means that this text will have the same styles as the paragraph itself</span>
</p>

The styles set by the first tag will be inherited by any tag that is within it. This is why we don't have to redefine the font color or size for the note.

Previous Features
Las Vegas on a Budget

Find a BargainHotel DealsCheap EatsFree AttractionsEntertainment for Less

 All Topics | Email Article | | |
Advertising Info | News & Events | Work at About | SiteMap | Reprints | HelpOur Story | Be a Guide
User Agreement | Ethics Policy | Patent Info. | Privacy Policy©2008 About, Inc., A part of The New York Times Company. All rights reserved.