Useful Resources
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses
CSS in the Header

Embedded CSS

CSS can work throughout the page by placing CSS it in the HEAD of the file. This is called Embedded CSS.

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

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

<!-- linked text -->

a:link {

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

}

<!-- visited text -->

a:visited {

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

}

<!-- rollover text -->

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>

 

[BACK to RESOURCES]