Instructional Technology Resource Center (ITRC) - Saint Mary's College, Notre Dame, IN

Instructional Technology Resource Center - Saint Mary's College - Notre Dame, Indiana

Cascading style sheets have two basic purposes. The first is to regulate the style of an entire web site quickly and easily. This function is used mostly by Web developers who are doing multiple pages that need to all have the same look. Instead of redefining the text styles over and over, this is done in one external file. The second purpose is to give one control over the exact position of text or images on a page. Style sheets work by defining classes with certain style characteristics once and then using those classes over and over again whenever one needs that type of font. For example, one might define a class that makes the text bold and red. Then, everytime one needs text to be bold and red she uses that class. First we will learn how this type of application is done.

To learn about positioning text.

Getting Started

Styles are always defined in the <HEAD> tag of any html page. Using the <STYLE> tag, we define our styles. There are three ways to define styles:

change the definition of specific tags

ex: b{ font-style: bold; color: green}

All text that is bolded will also be green.

define a new class ex:

ex: .changecolor{ color: blue}

All text that is of the class "changecolor" will be blue.

define an id

ex: #bright{font-weight:bolder}

All text of the id will be bolder.

All three of these different ways work, but it is best to define classes instead of specific tags. This way all of the defined tags in the document do not have to be of that format.

Here is a simple example of how to define a specific tag, a class and an id. We will use the heading tag <H1> for our example. The definition is in the <STYLE> tag.

<HTML>

<HEAD>

<STYLE> h1{ font-family:Havetica; font-style:bold; color:blue}

.astyle{ font-family:Arial; font-style:italic; color:red}

#anid{ font-family:Arial; font-style:bold; color:green}

</STYLE>

</HEAD>

Style Attributes

There are several different attributes used to define a style. Their definitions are listed below.

color: The color of the text

font-family: The type of font used.

font-size: The size of the font

font-style: The style of the font. For example, bold, italic, underlined.

Applying the Styles

Once you have defined your class you are ready to use that class. One can use either the <SPAN> tag or the <DIV> tag.The <SPAN> tag is a generic container tag for applying any kind of style information. It will not change the look of your text at all besides what class you are using. The <DIV> tag works like the paragraph tag in that it leaves space both above and below what it surrounds. Thus, decide which tag you would like to use and then just surround the text that you want your class to apply to. Here is an example:

<HTML>

<HEAD>

<STYLE>

h1{ font-family:Havetica; font-style:bold; color:blue}

.astyle{ font-family:Arial; font-style:italic; color:red}

#anid{ font-family:Arial; font-style:bold; color:green}

</STYLE>

</HEAD>

<BODY>

<H1> This text was defined with the heading tag <H1> and will be bold and blue!!</H1>

<SPAN CLASS="ASTYLE"> This text was defined with the "astyle" class and will be red and in italics!!</SPAN>

<DIV ID="anid">This text was defined with the "anid" id and will be bold and green!!</DIV>

</BODY>

</HTML>

See It In Action!!

Please note that the name of the class or id must be in quotations!

POSITIONING TEXT