Introduction to HTML 11: Publishing & the Web Server

Introduction to HTML 12: CSS - Cascading Style Sheets

Cascading Style Sheets

The term "Cascading" Style Sheets is used because more than one Style Sheet can affect the same page. For instance, if you are using a Style Sheet on the actual document, called an "in-line", and a style sheet that is being referenced by multiple pages, called a "span" or “external”, both can have an effect on the items in the page. If both the in-line and the span Style Sheet are attempting to affect the same item, like an <H1> command, the closest to the <H1>command wins. That would be the in-line in this case.

Implementing the Style Sheet

There are two ways to implement a style sheet:

You can put a separate style sheet on each page. (When used like this, it technically isn't a style sheet, it's an in-line style block.)
You can create one style sheet and link all your pages to it

Follow these rules to place a Style Sheet (Block) on your page:

It must be within the <HEAD> and </HEAD> commands.
The text must be surrounded by <STYLE TYPE="text/css"> and </STYLE>
The style sheet is text so if you just type it on the page, it will show up and we can't have that. So! In addition to the style commands above, surround the text with

When you're all done, the format will look like this:

<HEAD>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>

Basic Format:

TAG {definition; definition; definition}

Here's what a line from this page's style sheet looks like:

H2 {font-size: 16pt; font-style: italic; font-family: arial}

H2
{
font-size: 16pt;
font-style: italic;
font-family: arial
}

* Notice the thing before the definition is a "{" not a parentheses() or a bracket "]".

* Notice the spaces! You don't have to leave them, but it helps to be able to read your style sheets later. Just don't forget the semi-colons.

* Notice each definition is separated by a semi-colon, but the definition contains a colon!

You're not limited either. You can use 30 Style Sheet commands to affect the same H2 command, just remember to separate them all by semi-colon.

What HTML Tags Can I Define?

You can define any HTML tag. The most used are:

H1 through H6
P
BODY
A:link (That denotes the unvisited link)
A:visited (That denotes the visited link)
DIV (That denotes a division of the page)

The Definitions

Below are 28 very common Style Sheet commands. You can put together a myriad of different looks with these. However, this is a list of less than half of those available. For a full discussion on CSS go to World Wide Web Consortium's Style Site

The FONT/TEXT Definitions:

font-family

Denotes typeface.
H2 {font-family: arial}

font-style

Denotes the style of the text. Use normal, italic, small caps, or oblique for commands.
H3 {font-style: small caps}

font-size

Denotes the size of the text. Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
o H4 {font-size: 20pt}

font-weight

Denotes text presence. Specify in extra-light, light, demi-light, medium, bold, demi-bold, or extra-bold.
A:link {font-weight: demi-light}

font-variant

Denotes a variant from the norm. Specifiy normal and small-caps
H2: {font-variant: small-caps}

text-align

Justifies the alignment of text. Specify as left, center, or right
H1 {text-align: center}

text-decoration

Lets you decorate the text. Specify as italic, blink, underline, line-through, overline, or none.
A:visited {text-decoration: blink}

text-indent

Denotes margins. Most often used with the <P>. Make sure you use </P also!> Specify in inches (in), centimeters (cm), or pixels (px).
P {text-indent: 1in}

word-spacing

oDenotes the amount of spaces between words. Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
P {word-spacing: 10px}

letter-spacing

Denotes space between letters. Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
P {letter-spacing: 2pt}

text-transform

Denotes a transformation of the text. Specify capitalize, uppercase, lowercase.
B {text-transform: uppercase}

color

Denotes color of text. Click here for a few color codes. If you use the six digit hex codes, make sure you place a hash mark (#) in front.
H3 {color: #FFFFFF}

2. The MARGIN/BACKGROUND Commands

Note! When used with the "BODY" tag these commands affect the entire page!

margin-left
margin-right
margin-top

Denotes space around the "page". Specify in points (pt), inches (in), centimeters (cm), or pixels (px).
BODY {margin-left: 2in}
P {margin-right: 12cm}
BODY {margin-top: 45px}

margin

Denotes all three margin commands above in one command. The pattern follows top, right, and then left.
P {margin: 3in 4cm 12px} (note no commas or semi-colons)

line-height

Denotes space between lines of text. Specify in points (pt), inches (in), centimeters (cm), or pixels (px), or percentage (%).
TEXT {line-height: 10px}

background-color

Denotes page's background color. Specify the color in hex or word codes, or use "transparant"
BODY {background-color: #ffffff}

background-image

Denotes the background image for pages. Specify the image you want through that image's URL.
BODY {background-image: url(../images/tile.gif); }

background-repeat

Denotes how the image will tile. Specify repeat-x, repeat-y, or no-repeat.
BODY {background-repeat: repeat-y}

background-attachment

Denotes how the image will react to a scroll. Specify scroll, or fixed.
BODY{background-attachment: fixed}

3. The Positioning/Division Definitions:

These commands come into play when you begin working with text and image positioning. Note these examples are given using a specific item.

position

Denotes the placement of an image or a division of the page. Specify absolute for specific placement, or relative for a relative placement to other images.
<IMG STYLE="position:absolute" SRC="joe.jpg">

left

Denotes amount of space allowed from the left of the browser screen when positioning an item. Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
<IMG STYLE="position:absolute; LEFT: 20px;" SRC="joe.jpg">

Denotes amount of space allowed from the top of the browser screen when positioning an item. Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
<IMG STYLE="position:absolute; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">

width

Denotes width of image or page division. Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
<IMG STYLE="position:absolute; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">

height

Denotes height of image or page division. Specify in points (pt), inches (in), centimeters (cm), pixels (px), or percentage (%).
<IMG STYLE="position:absolute; HEIGHT: 55px WIDTH:80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">

overflow

If the item is too large for the height and width specified, this tells the page what to do with the overflow. Specify visible, hidden, or scroll.
<IMG STYLE="position:absolute; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">

z-index

Denotes an item's position in the layering structure. The lower the number, the lower the layer. An image marker with a 20 would go overtop of an image marked with a 10. Specify by number.
<IMG STYLE="position:absolute; Z-INDEX: 10; overflow: hidden; WIDTH: 80px; LEFT: 20px; TOP: 200pt" SRC="joe.jpg">-

What It All Looks Like

Here's a very simple Style Sheet that would be included in the head section of a page:

<STYLE TYPE-"type/css">

</STYLE>

What If I Want The Same Tag Handled Different Ways?

What you do is assign different "classes" of tags. For example:

H3.first {font-size: 20pt; color: #FF00FF}

H3.scnd {font size: 18pt; color #DD00FF}

Label the H commands separately by adding a dot and then a suffix. Here, the H3 used "first" for the first type and "scnd" for the second type. You can use what ever you want.

When you place them on your page (use), you do this in the text:

<H3 CLASS="first">This will be affected as outlined in "H3.first"</H3>

<H3 CLASS="scnd">This will be affected as outlined in "H3.scnd"</H3>

One Style Sheet--Many Pages

First off, create a style sheet as you did above. This will be the only thing on the page. No <HTML>, No <HEAD>, No <BODY> commands this time. You will make the file so that if I wanted, I could just copy and paste what you have right into my own <HEAD> commands. Which is just about what you will be asking the computer to do.

The Style Sheet will be a simple text file with a .css suffix. Let's say you name your style sheet "fred". Its name would become "fred.css". The suffix is required for browsers to recognize it as a style sheet.

Place this command on your page to call for the Style Sheet:

<LINK REL=stylesheet HREF="http://www.your.page/fred.css" TYPE="text/css">

Here's what's happening:

* LINK tells the browser something must be linked to the page.

* REL=stylesheet tells the browser that this linked thing is relative to this page as a style sheet.

* HREF="---" denotes where the browser will find the style sheet.

* TYPE="text/css" tells the browser that what it is reading is text that will act as a Cascading Style Sheet. If the document isn't text with a .css suffix - no dice.

Every page that contains this command will be affected by the one style sheet you created and placed in your directory. One sheet - many pages.

Can I Use These Style Elements on Individual Items?

Yes you can. They simply sit inside the TAG you are working with. Just make sure to denote them using the STYLE command. Since they sit inside another command as just a defining command, they require no /STYLE. In that position, they affect only what you say they will rather than the entire page. Like so:

<FONT STYLE="font-weight: extra light; font-family: courier">affected text</FONT>

Follow this format and you can define a style for just about any HTML TAG.


Home	Previous	Next