Setting up web sites with CSS and HTML is a little bit more difficult than the old way of sticking all the code in HTML and letting 'er rip. However, the first time you have to make any changes to the site, you'll love CSS. Rather than make repetitive and error-prone changes to all of the files on the site, you change just the CSS file and everything is changed: the colors of the background and text, the fonts, the width of the menu bar on each page, the logo, the color of headlines, etc. is all controlled via one CSS file.
There are some important things to learn about using CSS with HTML, however. The first is that you need to create a way of differentiating different uses for the same element. You wouldn't want your menu list to look like a list of items for sale. Class and ID to the rescue. Consider the following CSS which creates two classes of unordered lists (ul), one "menu" and the other "dots:"
ul.menu { list-style: none;
padding: 10px;
margin: 0px;
width: 200px;
background: red;
color: white; }
ul.dots { list-style: disc;
padding: 0px 100px;
margin: 0px; }
The first would be invoked by the following code:
<ul class="menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
and look like:
ul.menu { list-style: none;
padding: 0px;
margin: 0px;
background: red;
color: white;}
ul.dots { list-style: disk;
padding: 0px 20px;
margin: 0px; }
The second would be invoked by the following code:
<ul class="dots"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>
and look like:
Notice that other than the change of the class name, nothing else changed in the HTML. All the formatting took place in the CSS. Want to change the menu to blue background this year? Change the one background: red to background: blue and you are done. Actually, you'll have much greater control over colors if you use numerical codes rather than the limited set of color names, but for clarity, I've used names in the examples.
The CSS for this is in the demo page (see floatleft). It is a basic text box and an example of how to make text into a block element using a div. Normally, paragraph text is an inline element.
To the right and below is an example of an imageright (see the CSS). As defined in the CSS, the floatright/left creates a thick, solid blue border around the element. The imageright/left creates space with no border. Generally, it is best to put borders around text to separate it from other text and not to put borders around images. There are exceptions, of course. It's up to your own artistic feel.
The html to create the two floats are as follows:
<div class="floatleft"> <p class="red">The text goes in here.</p> </div>
<div class="imageright"> <img src="image/ilona.jpg" width="125" height="147" alt="Picture of Ilona" /> </div>
When including images, it is best to give a width and height. This will cause the page to load first with just a space-marker for the picture. After the page has loaded, then the picture is rendered. If the html doesn't know the size of the picture in advance, it has to render the picture before it can continue with the html. Particularly if you are including a large picture, be sure to include the dimensions. Also, it is important to include something meaningful in the alt tag. What you put there will be read to the vision impaired and on certain limited browsers, on cell phones with Internet capabilities, for example.
Sometimes you'll want to create text with a different background color -- something like using a highlighter on text. Consider the following CSS:
span.yellowback { background: yellow; }
Now we create an element that looks like <span class="yellowback">Yellow text goes here</span> and whatever we put inside the spans will have a yellow background.
Suppose you want to have a horizontal menu, rather than a vertical menu. How does one create that? Below is a centered, vertical menu, showing the current page. It makes more sense to have such a menu at the top of the page, but this will work for the demo. It uses the following style:
#tab { text-align: center; }
#tab ul {
margin-left: 0;
padding-left: 0;
display: inline; }
#tab ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;
display: inline;
background: #00f; }
#tab ul li a { color: #fff;
font-weight: bold ;
text-decoration: none;
background: #00f;}
#tab ul li.here {
border-bottom: 1px solid #fff;
list-style: none;
display: inline;
color: #00f;
background: #fff; }
#tab ul li.here a {
color: #00f;
background: #fff; }
#tab ul li a:hover {color: #f00;}
I stole the example of the above menu, with minor modifications, from A List Apart, one of the better resources on the Internet for articles on CSS and HTML.
Now suppose you want to use the techniques we've learned to create a breadcrumb trail of where you are in your deeply nested site. No problem. Create styles that look like:
#bread {
color: #fff;
background-color: #006;
padding: 3px;
margin-bottom: 25px;
}
#bread ul {
margin-left: 0;
padding-left: 0;
display: inline;
border: none;
}
#bread ul li {
margin-left: 0;
padding-left: 2px;
border: none;
list-style: none;
display: inline;
}
And then add code that looks like:
<div id="bread"> <ul> <li class="first">Item 3 <ul> <li>» Stuff <ul> <li>» Junk <ul> <li>» Flotsam</li> </ul></li> </ul></li> </ul></li> </ul> </div>
You'll get something that looks about like:
CSS code can set up inline (in the middle of your page) for one-time changes as I've done above, in the <head> or by reference to an external style sheet. I strongly urge you to put your CSS in a style sheet. This way, each page can have one line that references the style sheet. Any changes you make to the one page are automatically propagated to all pages. If you want to have a section of your site with different attributes, use a second CSS file. Those things you change on the second will override the first. Everything else will flow through, making global changes a piece of cake -- well, less difficult, anyway.