CSS Lessons

After you learn to code pages with XHTML, you will probably want to explore ways to add more style to those pages. Today the current technology for styling Web pages is called Cascading Style Sheets Level 2 (CSS2). CSS was created by the World Wide Web Consortium ( W3C ) to address a problem in the evolution of HTML. When the first versions of HTML came out in the early 1990s, the language was purely structural. Tag pairs such as <head> </head>, <title> </title>, and <body> </body> simply described the structure of the document to Web browsers of the time, most of which only displayed plain text.

book cover When the graphical browser Mosaic came out in 1993, Web authors began to see the expressive potential of the medium and requested ways to add text styling and images to their pages. The W3C eventually created the <font> tag to assist authors in styling pages. The <font> tag made it easy to style a single page but maintaining a consistent style on large Web sites became a nightmare. If you wanted all your <h1> tags to be styled a certain way, you had to search and replace for <font> tag content across your entire site.

book cover When HTML 4 was created, the W3C put a stop to the madness by creating CSS level 1 to apply consistent style to the content of HTML documents. CSS level 2 came later and added more styling options and a great deal of control over the position of content on a page. This section of MakePages.com will introduce you to the basics of CSS. For a complete beginner's course on CSS, click the icon above on the right and buy The Web Wizard's Guide to DHTML and CSS . For a complete reference on CSS, click the icon on the right and buy CSS the Definitive Guide.

CSS Lessons

  1. CSS basics: creating style rules - FREE SAMPLE
  2. Placing Style Sheets: Part 1 Inline Styles
  3. Placing Style Sheets: Part 2 Internal Style Sheets
  4. Placing Style Sheets: Part 3 External Style Sheets
  5. Conflicting Rules, Element Classification, and the Element Box
  6. Property Reference Tables and Browser-Safe Fonts

For your convenience, here is a FREE interactive table of browser-safe colors to use in your style sheets. (Link opens a new window.)

Model Site for Music Educators

After learning XHTML and CSS, the next step is to learn to create pages in Dreamweaver or another good Web site editor. Here is a model site assignment for music teachers learning to create simple Web presentations in my summer workshops. The link opens a new window.

Cardigan Middle School Model Site Assignment