You can change the appearance of hyperlinks using the a, a:visited, a:link, a:active and a:hover attributes.

Edit style.css to add the following code:

a {font-size: 0.65em; color: green}
a:hover {color:red; text-transform: uppercase}

Save the file and refresh the HTML pages in the browser.

Pseudo-Classes

A pseudo-class is a classification of an element based on its status or use. The attribute a:hover is an example of a pseudo-class with the status being the condition of the link. Additional pseudo-classes under CSS2 specifications are as follows. Keep in mind these are not fully supported yet.

p:first-line {tex-transform: uppercase}

p:first-letter {font-size: 200%}

Classes

You can customize styles using classes. You define a class in your stylesheet using element.classname {styles}. In your HTML document you activate the class using the class attribute in the HTML tag using <tag class="classname">. If you want to use a custom class in multiple tags, omit the tag element preceding the dot. Examples are:

CSS style:
h1.FirstHeader {text-decoration: underline}
.FirstHeader {text-decoration: underline}

HTML tag:
<h1 class="FirstHeader">Astronomy</h1>
<h2 class="FirstHeader">Chemistry</h2>

IDs

The id attribute applies an id ot a specific element in the document. In the stylesheet, an id class is preceded by the # symbol. The difference between classes and ids are that ids must be unique for each HTML element. Examples are:

CSS style:
#FirstHeader {text-decoration: underline}

HTML tag:
<h1 id="FirstHeader">Mathematics</h1>

Use Classes and IDs

Edit style.css to add the following style:

li.special {color: blue; font-weight: bold}

Save the file.

Edit astrotxt.htm to add the class attribute to two of the <li> tags.

<li class="special">

Save the file and refresh in the browser.

<div> & <span>

The <div> tag is for grouping blocks of text. The <div> tag by itself doesn't do anything but group the text it contains, so to be useful you would use a style, class or id attribute to format the text.

The <span> tag is for text-level elements. It, too doesn't do anything without including a style, class or id attribute.

CSS style:
#intro {color: white; background-color: blue}
#title {color: yellow}

HTML tags:
<div id="intro">

<p><span id="title">Text goes here</span>Rest of paragraph goes here</p></div>

Control Page Layout

You control page layout by formatting block-level elements. Think of block-level elements as existing in boxes on the page. Each box has three elements: margin, border and padding.

You can specify margins for block-level elements by specifying margin-top, margin-right, margin-bottom, margin-left. You can specify padding in the same way using any valid unit of measure. When you use % in padding, it is relative to the width of the element, not the parent.

li {margin-left: 2em; margin-right: 2em; margin-top: 1em; margin-bottom: 1em} or
body {margin: margin-top margin-right margin-bottom margin-left}

blockquote {padding-left: 10px; padding-right: 10px}

Border

Optional attributes for borders are as follows. Width can be stated in a unit of measure or using keywords thin, medium or thick. Color can be stated using color names or values. There are nine possible styles including solid, dashed, dotted, double, outset, inset, groove, ridge or none.

border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style

Resizing and Moving Block-Level Boxes

Use the width: value attribute to control the width of a box. The float: value attribute allows you to control the position of a block-level box.

Work with Containers and Block-Level Elements

Edit and save style.css:

div.article {background-color: rgb(252,221,163); padding: 0.5em; border-style: solid; border-width 2px; width 250px; float: right}

Edit and save astrotxt.htm:

<div class="article"><h3>Run the Messier Marathon</h3>.......</div>

Refresh in the browser