Lesson Two

Knowing how to code in HTML and CSS is like knowing how to plant a flower; the more you do it, the better you are. But if you only know how to plant a flower, you may not get to see the flower's full beauty. The same goes for the styles you use with HTML. Each HTML element has special states or uses associated with them that can be styled independently by using pseudo-classes.

When using pseudo-classes, you can change the default state of an HTML element. Let's look at link pseudo-classes. When picking link styles like the colors of each type of link (unvisited, visited, etc.), choose a high contrast color for unvisited links and a low contrast color for visited so that the user will be aware that they are different links. To set these properties, you use the anchor followed by the style like this: a:link {...}, a:visited {...}, or a:hover {...}. Below is a list of properties you can set for links:

Pseudo-Class	Description
:active	Element being clicked.
:first-child	Element that is the first child of another element.
:focus	Element that has screen focus.
:hover	Element with mouse cursor over it.
:lang()	Element with language code defined.
:link	Element that has not been visited.
:visited	Element that has been visited.

Pseudo-elements are a specific, unique part of an element which can be controlled independently of the rest of the element. Say you wanted to start the first paragraph of each of your pages with a large capital letter like in most novels. You can set these properties by the following style: p.dropCap:first-letter {...}. Then, you call the style property by typing: <p class="dropCap">...</p>. Below is a list of properties you can set for links:

Pseudo-Elements	Description
:first-letter	First letter in element.
:first-line	First line of text in element.
:after	Space immediately before element.
:before	Space immediately after element.

The first line of any page can be styled to stick out by using the :first-line pseudo-element. This isolates the first line of the paragraph that the style is assigned to and renders it like a heading. You set the style by typing: p.firstPage:first-line {...}, and you call the style by typing: <p class="firstPage">...</p>.

The :before and :after pseudo-elements we'll discuss in later lessons.

Now that you've learned how to control the content of your web page, you need to make it look just as good on paper or other media device as it does on screen. We can use cascading style sheets to tell the browser to use different style sheets depending on the media that is rendering them.

There are a few tricks to remember to make your pages look good on any media. Define your media using different style sheets for each media. Use page breaks before headers to keep them with their text. Keep the main content and the navigation styles separate. Avoid using transparent colors with graphics to prevent white spots when you print your page on paper; it may not be white on screen, but it will be on paper. Avoid text in graphics as it will look blocky when you print. Avoid dark colored backgrounds and light colored text. Do not rely on color to convey your message as many people print in black and white to save color.

You can specify styles for multiple medias by creating an external style sheet for each media. Once you do that, you can specify which sheet you are going to use with which media. Below we decided to show you how to specify the media just by what media you are using in your link:

<link href="print.css" rel="style sheet" media="print"> // Sets everything up for printing

<link href="screen.css" rel="style sheet" media="screen"> // Sets everything up for the web browser

Both of the lines above get added to the <HEAD> section of you document, one immediately below the other, waiting for the media to call upon it. There are several media types available, but most of the common Web browsers only support screen, projection, and print. You can design your style for handhelds, which are becoming popular and shouldn't be difficult to tailor to, but handhelds aren't being designed to use the "handheld" media type, so don't be surprised if you only get a few people that can view your site properly.

When setting a page up for printing, remember that Web pages break wherever they happen to break. The longer your Web pages, the more pages that will print. If you don't want your header or title on the bottom of one page and the first paragraph on the top of another, you can force a page break. Say you wanted to start a new chapter, yet you don't want to use a link to because of it printing on each page, you can set the page break by typing: <H2 style="page-break-before: always;">. The page break only works if included in the style="..." attribute. You will then set the page break before or after the element you are adding the style to. Finally you can use always to set the break before or after, or auto to allow the browser to determine where the breaks should be. Although you may plan your pages well, you may end up with what is called either a widow or an orphan. A widow occurs when the last line of a paragraph ends up at the top of the next page, and an orphan is when the first line of a paragraph ends up at the bottom of the first page. This can be prevented by using cascading style sheets to add a certain amount of lines of text to the top and bottom of each page before a page break is allowed. To do this, you enter the style: p {widows:5; orphans:10;}. Below is a table of page break values you can use:

Page Break Values
auto
always
avoid
left
right
inherit

If you want to set your style sheets into sections or describe what your style does and why for future editors to see, you can add comments just like you do in HTML or any other programming or scripting language. One word of warning: watch your opening and closing brackets; you are not allowed to use nested comments. Below is how both a line comment and a block comment should look:

/* This is my comment line */

/* This is my comment block. Although this may be written on many lines, it doesn't interfere with the programming nor does it add to the length of the style. */

There are certain things you want to be aware of when creating your style sheets. Wherever possible, place your styles in an external style sheet. Make a default style sheet for your whole site and separate sheets for refining certain aspects of your pages. If you can remember these tips, you can change one style and affect your whole site, where it would take a lot more time to change a style in every tag of every page it is used in.

Question: WOW! I never thought cascading style sheets were so complex. I just though it was something simple you could do to enhance your Web pages, not some new professional programming language. I've seen how to set up the style sheets, but how can I use them to make my pages look more professional?

Answer: Cascading style sheets aren't that complex once you understand them. In the next lesson, we'll show you how to make your Web pages look more professional by setting the font properties.

Lesson One | Home | Lesson Three

If you have a questions about any of the lessons, feel free to ask.