Proof 2: February 2nd, 2008

Give this web page some life

Chapter 3 gives us some light in how we can spice up our website so that it is not so sad.
Because my web site right now is quite shamefull, I will give chapter 3 a go.

Inline Styles

First, we will take the following link back to the home page so that you can see the temporary disclaimer while this site is being periodically built.
As you will see, not only color was added but also a bold weight.

The span Element

What better way to roll of the inline style than with a span element in this text. This helps you hight light specific words and narrows down what you want. Span in the heading uses the span element but in order to show its capability, I used it in this whole last bit.

Embedded Styles

Now the book talks about a more efficient way to highlight, color, and change the font type without using inline styles.
This would be ideal if you wanted all of one page to be a default color and type. For this example go to Proof 1 -- January 19th, 2008 and I will only use the color brown to demonstrate.

Embedded Style Sheets

This was the most time consuming but the most fun I have had yet seeing little details of my site perform. You can open my style sheet to see what I have done thus far to put more umph in my site. As you may see, the font size, type, and strength has changed, the background color has changed, and every heading has its own attribute.
This is the most productive way to design many pages of a website so that they are all consistent.
For the sake of this assignment, I will only apply these sheets to:

Contextual Selectors

You can also see where I gave my little tagline on the home page a tweak. Thats what you call a contextual selector
. There is also another example on the home page with the assignments list with navigation.

Grouping Styles

Here is an example of how to group multiple headers with same style applied to the associated pages.

Styling links

I have choose not to mess to much with my link colors because of an alertbox that I covered today also. However, I fiddled with the LVHA option which means the link, visited, hover, and active options that you can give to links.