CSS notes 2: Global CSS
syllabus | schedule | assignments | Web Resources | ARTC courses
[Intro]     [Tags]     [CSSStyles]     [Lists]     [Links]     [ImageTypes]     [Optimization]    [GlobalCSS]     [CSSBackgrounds]
[Tables]     [Slices]     [IR Rollovers]     [Animated GIFs]     [JS Rollovers]     [CSS Margins]     [Windows]     [Video]     [Metatags]     [Imagemaps]     [FormInput]     [FormAtttributes]    [AdvancedForms]    [WhatisJavaScript]    [Windows2]    [Windows3]    [BrowserInfo]    [StatusBar]    [Alerts]    [Randomness]    [Frames]    [iFrames]    [Frames2]   

Typical HTML method of changing background color, and link colors:

<BODY BGCOLOR="#FFFF99" BACKGROUND="images/bgimage.gif" LINK="#000055" VLINK="#5555AA" ALINK="#FF9999" TEXT="#000000" >

CSS can work globally by placing CSS it in the HEAD of the file: (view >> source of this page as an example)

This example removes the link color code from the BODY tag and places it in a STYLE tag in the HEAD. In this case, style is no longer an attribute for a specific tag like we saw with the FONT examples, but is now used as a tag itself.

a:link - a = selector, which happens to be the tag for links.

<HEAD>
<title> my webpage</title>
<style type="text/css">

--link - possible values = overline, underline, line-through

a:link {

text-decoration: none;
color: #00FF99;
}

--visited link

a:visited {

text-decoration: none;
color: #0033FF;

}

--rollover

a:hover {

text-decoration: none;
color: #CC0000;

}

--active link

a:active {

text-decoration: none;
color: #990099;

}

</style>
</HEAD>

NOTE: Defining the various links in the HEAD, will automatically change any LINK within the document.

If you want two selectors, such as, hover and visited to be the same, use a comma to combine like items:

a:visited, a:hover {

text-decoration: none;
color: #0033FF;

}

You can also add to your STYLE tag to customize any of the tags we have seen so far, for example:

ul {

list-style-type: disc

}

-or- multiple UL designations:

ul.disc {

list-style-type: disc

}

ul.circle {

list-style-type: circle

}

ul.square {

list-style-type: square

}

ul.none{

list-style-type: none

}

NOTE: Unlike the LINKs above, if you define multiples for many tags, you need to specify which one you want to use. In this example of UL, if we don't specify which CLASS, then the default -- generic UL with the list-style-type = disc -- will be used.

If your document has multiple ULs and you want to use various looks, then you need to be more specific in the definition and the call.

Call:

<UL class = "circle">

<LI>first list item</LI>
<LI>second list item</LI>

</UL>

 

Define (in the HEAD) a consistent P look (P = paragraph tag - <p></p> - used for chunks of text):

--effects all P tags
--can add other attributes, ie., color

p {

font-family: courier;
font-size:16px;

}

--effects designated P tags

p.small {

font-family: sans-serif;
font-size:10px;

}

p.big {

font-family: Times;
font-size:30px;

}

Call (in the BODY):

<p>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text</p>

<p class="small>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text </p>

<p class="big>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text</p>

 

Lesson 5
Use the CSS Syntax Guide online to look-up various styles and their attributes: http://www.w3schools.com/css/css_syntax.asp

1) Build upon the style sheet in the HEAD of your file. Experiment with some of the HTML tags you have seen so far: a, font, body, ol, p, hr, h1, h2, etc..

2) Add various classes to a specific selector (tag), as shown in the P example above.

3) Put those styles to use in the file.