Style Sheet Lab Notes by djmbenga


									                              Style Sheet Lab Notes

/* These are the lab notes for practicing with the
functionalLinkTyping.htm HTML document */

/*   This is a comment in a style sheet */

Font Colour
You can use one of 16 colour names (black, green, silver, gray,
white, maroon, red, purple, fuchsia, lime, olive, yellow, navy, blue,
teal, aqua), or specify an RGB Hex Code.

1. The first thing to do is establish what font style, size, and margins we
want to establish for our document. Contracting the margin on either
side by 5% gives us a bit of whitespace.
body {font-family: verdana; font-size: 11pt; margin-left: 5%; margin-
right: 5%;}

2. Create styles for the major headings.
h2 {color: navy; font-size: 20pt; text-align: center;}
h1 {color: gray; font-size: 14pt;}

3. Create a Class-Selector:

Remember, a class selector is a tailor-made selector that allows us to
alter existing HTML elements so that we can apply specific styles to

What we will do first is create a class-selector that will indent the first
line of each paragraph by 5% .
 p.body {text-indent: 5%}

Note that in the article text we have already marked up the Introduction
content by surrounding the reference list with a <p class=”body”> tag.

We can then use pseudo-elements to further enhance the appearance of
the beginning of each paragraph by making the first letter larger and a
different color.
p.body:first-letter {font-size: 125%; font-family: georgia; color: navy;}

4. Create other class selectors.

Create a class selector for the address.
p.address {text-align: center; font-size: 10pt;}

Create a class selector for the abstract.
p.abstract {font-style: italic; margin-left: 20%; margin-right: 20%;}

We can even create a class nested class selector so that we can change
the „abstract‟ label in the abstract to a different color and make it all
p.abstract b {text-transform: uppercase; color: gray;}

Create a class selector to alter the look of the permissions.
p.permissions {font-size: 75%; font-style: italic; color: gray;}

In this example, we create a nested class selector for an unordered list
element so that when we use the UL element for a reference (or citation)
list we can give it a special layout.

What we will do here is reduce the default list indent by 5% (lessen the
indent), remove the bullets (list-style-type: none), and put a blank line
after each reference in the list.

Note, again, that in the article text we have already marked up the
reference content by surrounding the reference list with a <ul
class=”cite”> tag.

We create the corresponding class selector in the stylesheet and
indicate that the style will be applied to the <li> elements in the
unordered list.
ul.cite li {text-indent: -5%; list-style-type: none; margin-bottom:

5. Alter the links using pseudo-class selectors.
a:link {color: blue;}
a:visited {color: red;}
a:active {color: yellow;}
a:hover {background-color: silver;}

6. What we can also do is hide some of the elements in our article. Note
that in the article I use the <div> tag to divide the article into major
components: authorAddress, abstract, introduction, discussion,
conclusion, notes, and references. Each of the divisions was identified
by „Naming‟ the division:

      <div id=”introduction”>

This allows us to address each of these divisions independently.

For example, we might wish to “hide” some of the divisions so that the
reader sees only certain parts of the document.
For this we use the “display: none” property.

We may want to hide the author information.
div#authorAddress {display: none;}

Or, everything but the abstract and reference list.
div#introduction {display: none;}
div#discussion {display: none;}
div#conclusion {display: none;}
div#notes {display: none;}

We‟ll see that identifying the divisions like this also has utility in
specifying internal links.

To top