3.3: Working with the blank stylesheet

CSS Zen Garden is a cool place to explore the magic of CSS. It has links to dozens and dozens of pages that all use exactly the same HTML. Each designer then creates his or her own CSS and images to change the look of the page. Visit the CSS Zen Garden site to explore more of what you can do using CSS in your designs.

The blank stylesheet provides three things:

You will begin working below the label /*BEGIN EDITING BELOW*/. As you look over the code below, note that instructions are “commented out.” The type within the slash-asterisk asterisk-slash (/* */) will be ignored by the browser.

/*BEGIN EDITING BELOW*/
/* This specification defines the body tag, sets the basic font string 
for your site, text color and background color */
body
{
	background-color: #fff;
	color: #000;    
	font-family: Georgia,Times,'Times New Roman', serif;
}

Next comes the various sections of the page:

Start with the main section

The first specification will set the width and spacing of your main content area. For now, set a moderate width, some padding and a border


/************************************************** 
MAIN SECTION: The main content area is where the bulk of 
your content will go; set up most of your general text styles here
***************************************************/
main 
{
	width: 800px;
	padding: 20px;
	border: 1px black solid;
	float:left;
}

Notes:

After we set up our space, we can build styles for our main content area using parent-child selectors.


main h1, h2, h3, h4, h5, h6
{
	margin: .5em 0 .25em 0;
}

/* Use these styles to set up headings with a series of sizes */
main h1
{
	font-size: 24pt;
	line-height: 24pt;
}

main h2
{
	font-size: 18pt;
	line-height: 18pt;
}

main h3
{
	font-size: 14pt;
	line-height: 14pt;
}


main h4 
{
    font-size: 10pt;
    line-height: 1em;
    font-weight:normal;
    text-transform: uppercase;
}

Here is how it looks:

By Peter Mirkwood

Remember that web crawlers used by search engines look for heading tags, so use them carefully. The next section sets up an important style, that of your basic body text paragraph.


/* Content paragraph: This is your main body text style */

main p
{
	margin: 0;
	text-indent: 1em;
	font-size:12pt;
	line-height:14pt;
}

This is 10-point type on 12-point line-height: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.


This is 10-point type on 20-point line-height: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullam corper suscipit lobortis nisi ut aliquip ex ea commodo consequat.

Setting up link styles

Very often we want our links within text to look different for different parts of the page. For example, we often have a different background color for our footer, so the links would need to be in a different color, too.


/* Styles for links within your text */

main a
{
	color: #00F;
	text-decoration: underline;
}

/*Set the color for visited links*/

main a:visited
{
	color: #909;
}

/* Set the behavior and color for links when the mouse hovers. 
DO NOT change fonts, font size or font weight (i.e. light-bold) */

main a:hover
{
	color: #900;
	background-color:#009;
}

List styles

List are used today in HTML pages for an almost limitless number of functions, such as roll-over navigation and drop-down navigation. Lists allow blog software to post several blog entries on a page automatically. Look at the styles below:


/* List styles 
/* Unordered list (bulleted) */
main ul
{
	list-style-type: disc;
	margin: 0 0 .25em 0;
}
/* Ordered list (numbered) */
main ol
{
	list-style-type: decimal;
	margin: 0 0 .25em 0;
}
/* Set the size and spacing for your list items */
main li 
{ 		
	font-size: 12pt;
	text-indent: 0;
	line-height: 1.5em;
	margin: 0 0 0 2em; 
}
/* This sets the styles for second-level lists, known as lists within lists */
main li ul 
{ 
list-style-type: circle; 
}
main li ol 
{ 
list-style-type: lower-latin; 
}
main li ul
{
	list-style-type: disc;
	margin: 0 0 .25em 0;
}

Important stylesheet tips

  1. The stylesheet page is NOT and HTML5 page. It contains only your CSS specifications.
  2. Write all of your specifications in lowercase letters.
  3. Note that the comment function uses /* and */ to open and close the commented text. This is different from html comments.
  4. Use single quote marks only around a specification that is more than one word, such as 'Times New Roman'.
  5. Get in the habit of putting your anchor specifications in this order:
  6. 
     a:link  { }
     a:visited { }
     a:hover { }
     
  7. Put a semicolon after every value, even the last one in a specification.
  8. Be very careful about punctuation, and of course, spelling. Everything must be in the right form!

Making it work

We have created these styles to work only in the main content area of our HTML page. To activate the styles, you must add div tags to your HTML, like this:

        
<body>
<main>

[... YOUR CONTENT GOES HERE...]

<main> 
</body>
</html>