Untitled Document

Examples to work on

Create an external style sheet to go with this simple file.

Type in the following code or create in dreamweaver:

<html>
<head>
<link rel=StyleSheet href="style.css" type="text/css">
</head>
<body>
<center>
<H1>My Heading in GREEN</H1>
</center>
<P>Paragraphs will be <U>indented</U> by the style sheet.</P>
</body>
</html>

Save as style.htm.

Now, create a text file containing the two style sheet rules. (Highlight and copy them from below.) And, then save the file as style.css.

H1 {color: green}
P {text-indent: 3em}

View the file style.htm in the browser and see the changes. Try doing another change in the style sheet and save the changes and view.

Next open the resume1 file. Copy the text into dreamweaver and add header and paragraph markers. Make changes again to the external style sheet and view. Do the same to the resume2.

resume 1

resume 2

Now, let's add an internal style sheet.

So, the above example of a two rule style sheet could be coded directly into a <HEAD> section as follows. Try entering this code into resume1 and see how it changes it.

Now, let's add some other selectors:

P.yellow { background-color: #FFFF66 }

B { color: blue }

B { text-transform: uppercase }

A:link { text-decoration: none }
A:active { text-decoration: none }
A:visited { text-decoration: none }

Text Transform:

uppercase makes every single character capitalized. This sentence serves as an example.
lowercase makes all of the characters lowercased. This sentence serves as an example.
capitalize makes the first character of every word capitalized. This sentence serves as an example.
none means that any inherited text-transform value will be ignored, and the text will display normally. This sentence serves as an example.

Types of fonts:

serif (probably Times)
sans-serif (probably Arial or Helvetica)
cursive (probably Comic Sans)
fantasy (probably Ransom)
monospace (probably Courier)

Text decorations:

underline makes the text, um, underlined. Check out these words.
overline adds a line above the text. Check out these words.
line-through puts a line through the text (i.e., strike through). Check out these words.
blink is your basic, familiar nightmare. The text blinks. Check out these words.
none makes sure none of the above happens.

Add, separate identities to each paragraph"

P.first { color: green }
P.second { color: purple }
P.third { color: gray }

And your HTML code would look like this:

<P CLASS="first">The first paragraph, with a class name of "first."</P>
<P CLASS="second">The second paragraph, with a class name of "second."</P>
<P CLASS="third">The third paragraph, with a class name of "third."</P>