FIT 100: Fluency with Information Technology

LAB 6: Style tags and Style Sheets

(A quick look at some advanced HTML formatting)

Required Reading for Lab:

The CSS Introduction by w3schools: http://www.w3schools.com/css/css_intro.asp
Browse through the CSS section of the w3schools site to get a feeling for the different styles you can use.

Introduction:

Style sheets, or Cascading Style Sheets (CSS), are quickly becoming the preferred method of formatting for website developers. Styles can give you control over spacing, font styles, and can even change the look of your page depending on what browser is viewing it.

Styles can be stored within the HTML file itself, or in an external document called a CSS file. Storing your styles in an external file allows you to apply the same style formatting too many pages at a time. On the other hand, putting the styles within a single HTML file can be a good starting point for understanding styles and will allow you to create style for each of your pages independently.

Text Box: Note:
Browsers older than Netscape 4.0 and Internet Explorer 4.0 are not able to understand styles. However, without styles, the page will still be readable, but perhaps not a nice looking.

Today’s lab will expect that you have completed labs 3 and 4 and will be adding to the file you created in those labs. For those students who feel comfortable with the material and would like to experiment with styles in a separate file, feel free to create your own external CSS file that you can reference from your webpages.

CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}[i][i]

Selector is the tag or element that you want to define. Property is the attribute and each property has a value that you want it to take on.

Objectives:

1. To learn the basics of style sheets by learning how to apply styles to paragraphs,

2. To provide a jumping off point for further study or use of Cascading Style Sheets

3. To learn how styles can make website maintenance easier.

TO DO:

Add some code to your HTML page that tells the browser that you are using styles.

A. In the <head> section of your HTML page, put the following code:

<STYLE TYPE="text/css">

</STYLE>

B. Insert comment codes between the begging and end of your <Style> tags. This will prevent older browsers from simply printing the text of your styles when they don’t recognize the code. Use the following:

<!—

-->

Your HTML should look like this now:

<STYLE TYPE="text/css">

<!—

-->

</STYLE>

Text Box: For those of you who want to use an external file, use:

<LINK REL=stylesheet HREF="fitstyles.css" TYPE="text/css">

where fitstyles.css is the file you create to store you styles in. IGNORE this note if you are not using external files.

2. Change the color and size of your <H1> tag to be Blue and 16 points.

A. Between the comment tags, add the following:

H1 {color: blue; font-size: 16pt}

B. Save your work and look at your webpage in a browser. If you used the H1 tag, you will see that it is now 16 points tall and blue.

3. Change the paragraph font style to Verdana:

A. Below the code that you added to change the H1 tag, add the following:

p {font-family: Verdana}

Text Box: Your styles should now look like:

<STYLE TYPE="text/css">
<!—
h1 {color: blue; font-size: 16pt}
p {font-family: Verdana}
-->
</STYLE>

4. Make the bullets in your ordered list become squares using styles

A. In the same area as your h1 and p tags, insert the following:

ul {list-style-type: square}

5. Add a property and value to your h1 tag that will make it bold

A. Insert the property font-weight and the value of bold into the h1 style. Remember that a semicolon (;) separates each property.

Text Box: HINT:
If you are confused about what a property or a value is in this context, find the information in the introduction.

6. Add “backup” fonts to your paragraph font-family.

When you specify a font for the browser to display, you always have to remember that the computer that the browser is on has to have to have the font already installed. One easy way to get around this is to specify a series of fonts. In plain English, you are telling the browser, “Look for this font and if you don’t find it, try the next font on my list.”

A. Add the bolded fonts to your <p> style:

p {font-family: Verdana, Helvetica, Arial, Sans-Serif}

Sans-Serif is a special font name that refers to a clean and clear font. Most computers have a specific font specified as the sans-serif font. This is usually the last font specified and will tell the browser to use whatever its default sans-serif font is. Sans-serif is just one of the generic fonts that should be used last to ensure that the browser does not display the standard font for HTML. [1][ii] Here is a list:

serif (probably Times)

sans-serif (probably Arial or Helvetica)

cursive (probably Comic Sans)

fantasy (probably Ransom)

monospace (probably Courier)

(Note: Netscape Communicator doesn't support cursive or fantasy.)

Further Exercises

7. Change the color of the links within your document.
Reference them in the following order:

· a:link {color: red}

· a:visited {color: yellow}

· a:hover {color: black}

· a:active {color: pink}

Add to the properties for these selectors and create your own style of links.

8. Change the font family of the heading tags that you use:

· Make the H1 tag a Courier Font
H1 {color: blue; font-size: 16pt; font-family: courier}

9. Remember to log off the machine as you leave.

Lab Questions

10. What is a practical reason to use a style tag or an external style sheet in web page design?

11. What style will be used when there is more than one style specified for an HTML element? Is there an order of implementation that is followed?

12. What is the order?