FIT 100
Lab 6:
Style Sheets
(A quick
look at some advanced HTML formatting)
Winter 2002
Required
- The CSS Introduction by w3schools: http://www.w3schools.com/css/css_intro.asp
- Browse through the CSS section of the
w3schools 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 to 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.
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 Activity 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]
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>
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 Veranda:
A.
Below
the code that you added to change the H1 tag, add the following:
p
{font-family: Verdana}
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 italic
A. Insert the property font-weight and the value of italic into the h1 style. Remember that a semicolon (;) separates each property.
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. 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.)[ii]
Further
Exercises
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.