Dave's Site - Millions Served.
Confused about getting a
.com? Answers are here.

Dave's Web Design 
Tutorial & Guide: Tips and Tutorials

Web Design Guide: Tips and Tutorials

Design Chapter 01 - Details Page

Basic CSS (Cascading Style Sheet) Formatting Overview


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:

screenshot of HTML elements without CSS formatting.

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:

screenshot of HTML elements with CSS formatting (version 1).

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:

sceenshot of HTML elements with CSS formatting (version 2).

...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>
 

screenshot of HTML elements with CSS formatting (version 3).

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.

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