---

This is the example from Chapter One, explained in more detail about formatting with CSS (a cascading style sheet):

Here is the original code:

<h1>Seasons</h1>

<h2>Spring</h2>

<p>This can be a really long description of spring,
   taking up an entire paragraph's worth of space.</p>

<p>There can even be several paragraphs.</p>

<h2>Summer</h2>

<p>You can also have one or more paragraphs describing summer.</p>

Here is how it looks without any CSS format:

Now, we can add some CSS before it in the HTML file (don't worry, you don't have to understand it all, just glance over it):

<style type="text/css">
<!--

 h1 { font-family: Arial, sans-serif; font-size: 18pt; }
 h2 { font-family: Arial, sans-serif; font-size: 14pt; }
 p  { font-family: Arial, sans-serif; font-size: 10pt; }

-->
</style>
 

(Learn about the difference between serif and sans-serif fonts.) Now it looks like this:

But, we can also change any part of this CSS styling we want to change. This example changes the paragraphs:

<style type="text/css">
<!--

 h1 { font-family: Arial, sans-serif; font-size: 18pt; }
 h2 { font-family: Arial, sans-serif; font-size: 14pt; }
 p  { font-family: Georgia, serif; font-size: 10pt; color: white; background-color: gray; }

-->
</style>
 

Looking better, but not perfect:

...it needs some margins and padding! Update the CSS once more:

<style type="text/css">
<!--

 h1 { font-family: Arial, sans-serif; font-size: 18pt; }
 h2 { font-family: Arial, sans-serif; font-size: 14pt; }
 p  { font-family: Georgia, serif; font-size: 10pt; color: white; background-color: gray;
      margin: 6px; padding: 3px; }

-->
</style>
 

As you can see, a few good lines of CSS coding can totally change your site. You can see why learning CSS (as well as learning HTML) is a great idea.

You have no need to understand all of this code yet. Just realize that using CSS and using HTML together can be incredibly powerful. You can even one CSS file for your entire web site, so one line change could potentially change the style on every single page.

| Current Chapter: 01 Details | Return to Chapter: Designing for the Digitized Web Canvas

website design guide home / 01 - designing digitized web / 02 - making your site accessible / 03 - fundamental web design layout / 04 - using images and video / 05 - bandwidth, transfer, and web hosting / 06 - basic web technology and web design software / 07 - finishing up: web design loose ends

tell a friend about this website design tutorial

other website design sections: learn html with our html tutorial and guide, learn css with our css tutorial and guide

davesite.com home ----- Copyright © 2009 dave kristula. all rights reserved.