CSS - Demo of the Basics

Featuring: CSS- We apply the previous basics to change our complete page styling
Motivation: See how much can be accomplished with basic CSS knowledge

This will be a test of 2 things - first how easy or hard is it to make complete changes to a website using the basic CSS which we have learned so far. Second we have added two new CSS stylings as well - use of a background image, and changes to the <a> link tag so we can create menu like behavior for our tags. Other than that everything is the same old, same old basic CSS we have been learning so far.

The Change Over

To make the change over I created a new .css file called newstyled.css and filled it with the following CSS styling code:

body, h1  {
 background-color:#442200;
	background-image:url(images\backcss.gif);
	background-repeat:repeat;
	font-family: Helvetica, sans-serif; 
	color:#FFFFff;text-align: justify;
}
p, table, td, tr {
 background-color: #331100;
	font-family: Helvetica, sans-serif;
	font-size: 11pt; color:#ffffcc;
	padding-left: 12px;
	padding-right: 2px;
	padding-top: 6px;
	padding-bottom: 2px;
	
}
a.menu {
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	background-color: #cc4400;
	margin-left: 2px;
	margin-right: 2px;
	color:#000000
}

a.menu:visited {
	color:#990000
	}
a.menu:hover {
	text-decoration: underline;
	color:#990000
	}

I then added a new style linkage to this file using the standard code we just learned in Core Basics 101:
<link href="newstyled.css" rel="stylesheet" type="text/css">
And I made sure this link was below the link for the previous osstyle.css so that the new styles would take precedence over the old (this is a nifty way of transitioning to a new style sheet, just stick the new below the old and then slowly phase out the old).

Voila - I am done and this is the styling of the new page.

No brownie points will be earned by the styling of this new page except perhaps in the Woofie awards. However, the exercise is useful in demonstrating how completely one can change a web page (or site for that matter)with fairly simple changes contained in one .CSS file. The changes are to background color and image, font style, size and type, padding at the margins, and how links look and work. In the latter case we have added a few wrinkles that give the links a menus look.

Now for the details on those changes. The first CSS style changes all <body> and <h1> tags. Whenever they are used they will:

1) Have a background color of chocolate just in case the background image cannot be found; otherwise they wail show the background, repeating gif image of CSS styling statements in black type on brown;
2)Use either Helvetica or some sans-serifl font at 16points;
3)Color the type white;
4)Make the text blocks justified.

The second styling applies to all <p> paragraph, <table>, <tr>-table row, and <td> - table cell tags. Whenever they are used they will:

1)Use a darker, burnt sienna background color;
2)Also use Helvetica and then some sans-serif font type if Tahoma is not available at 11 points;
3)Color the type a light pale yellow;
4)Add left padding of 12 pixels, on the right and bottom of 2 pixels each and on the top of 6 pixels.

You can clearly see the padding on the left because the code which is under the <pre> tag has no padding and so it is closer to the left margin. In an upcoming tutorial I shall explain CSS's box model for margins, border and padding around text.

In the meantime I want to explain the next three styling which all apply to the <a> tag. As I noted at the beginning, the desire is to make links look and work more like menu items. Hence the a.menu style which says that all links (i.e. <a href="..."> tags) with the class="menu" setting will do the following:

1)Use the font Arial, Helvetica and sans-serif in that order if available:
2)Use a bold font without any text decoration (underline, superscript, overline, etc);
3)Have a light orange background color and black font color;
4)Have left and right margins of 2 pixels, this will keep the spacing the same if the <a> tags are next to each other giving them more of a proper menus look.

But there is more. The a.menu:hover style is based on the a.menu style and takes all its properties. However, the Descriptor for a.menu:hover determines what will happen when a user hovers a mouse over the <a> tag. It will change its font color to deep red and add an underline. So as soon as the mouse hovers over this link it changes in color and underline enough that the user knows along with the change of the cursor to a pointing hand (this is consistent browser behavior), that this is a link or menu item. Clicking on it will take the user elsewhere on the Web, trigger a program and all the things possible using a link.

There is one more touch: the a.menu:visited style. This style is used to let users know when they already have visited a page. Again, it inherits all the properties of the a:menu style but overrides the font color changing it from black to dark red. Here is what happens when a link does not contain the class="menu" - go to CSS References. The default <a> tag style from the original osstyle.css stylesheet takes precedence in this case. This will become a recurring theme in our tutorials; which style applies depends on a cascading set of rules. Like Selector targeting, cascading rules go from simple to very complex . We shall try to balance effectiveness with "requisite complexity" in our coverage of CSS.

Finally we have changed the JavaScript code used with Google ads to conform with the new colors. Also the <cite> tag works differently in the various browsers about where it inherits its properties from. So I have changed it to a new .citer style class and substituted a <blockquote>.This is another legacy from the browser wars and the fact that Microsoft stopped all updates to IE6 for 7 years and still has not met its commitments to full CSS implementation from 10 years ago.

Summary

This tutorial shows the dramatic changes one can make to their website with a few simple changes to a central .css file. It uses basic CSS stylings which we have learned in just three lessons. In short, it demonstrates the versatility of CSS. Users looking for more details on <a> tag changes should check pages 16-40 inCSS in Easy Steps by Mike McGrathor pages 128-132 in Beginning CSS by Richard York. The next tutorial will look at more targeting rules and continue on background stylings.