Style
Sheets
Cascading Style
Sheets, or CSS, are a technology that is set to revolutionise the way
we web design: Style Sheets use special tags and files to define styles
of text (font, colour, size, etc) as classes to be used for any block
of text, leaving HTML as the language it was meant for: simply giving
the bare elements of the page, not formatting them.
Style Sheets are one of the most browser dependent
technologies in the business yet: they are capable of what is called exact
positioning, which in theory means you can place an element you define
in the HTML code anywhere on the page you want, and exactly too! In practice
at the minute the situation is not quite as good: The W3C
(WWW Consortium) has brought out the implementation of style sheets (CSS
level 1), but the draft for absolute positioning (CSS Level 2) has yet
to be implemented. This means that browsers that came out before CSS Level
1 did aren't likely to display the same stuff as ones that support it,
and all browsers at the minute don't display the exact positioning (Level
2) the same. You may well ask then why are we using it yet? Well, the
answer is that if you can get the right page to the right browser you
are ok, as your pages will look even better. Browsers that support Style
Sheets are as follows:
Internet Explorer 3.x (Although not fully by any means, as it came out
before CSS Level 1)
Netscape Communicator (4.0) (Reasonable, although some of the newer stuff
such as DHTML (explained in another topic), is not supported, layering
is).
Internet Explorer 4.0 (supports CSS Level 1, CSS Level 2 Draft, HTML 4.0,
most DHTML)
Internet Explorer 5.0 (CSS
1 & 2, HTML 4.0, XML, DHTML, Behaviours).
The examples in this tutorial only work with the specified
browsers, so, if you aren't viewing these pages with them, the examples
will not appear as they should do.
Style sheets can be defined to work in a page in
three ways:
- Having a class definition of the syles in a block
in the <HEAD> block.
- Using special tags within the document to apply
a style on a particular part of text, with the style defined in those
tags.
- Using an external Style Sheet file, which is then
linked to from the document.
I will first tell you about how to define the classes
in the <HEAD> tag and also in the tags around individual elements.
Style Sheets start with the tag <STYLE>. This is also where we
tell the browser what kind of style sheet it is: at the moment there are
only two types, normal text style sheets, and Netscape's proprietary JavaScript
ones. The definition is as follows (we will be using the text ones):
<STYLE TYPE="text/css">
<!--
-->
</STYLE>
We put in the comment tags to stop old browsers reading
this and just putting it up as part of the normal page text, which could
be a trifle embarrassing! Between these comment tags we define the styles.
Styles can be applied to any element on the page, text, images, whatever
you have on the page. You can define what are called classes, which can
then be applied to a specific page element, or define a style for a tag,
such as the <B>, or Bold, tag, or define a style that is inline,
actually within the HTML code, which you are applying to a large part
of the page.
The way we define styles for a tag is to use the
following format:
<STYLE TYPE="text/css">
<!--
tag {attribute: setting;}
-->
</STYLE>
The tag can be any tag without it's normal
< and > round it. This is then followed by the opening curly bracket
which contains all the different attributes with a colon and the setting
for that attribute and then a semi-colon (;). The semi-colon separates
one attribute from the next, as you may define many attributes for a single
tag. After all the desired attributes have been defined, the style definition
for that particular tag is closed by the closing curly bracket.
An example is:
P {font-size: 15pt; color: blue;}
This makes all blocks of text or other elements on
the page surrounded by the <P>, or pragraph, tag, have a font
size of 15 points (pt), and have the color blue. Neat eh?
In other words, like
This!
You can group tags that you want to have the same
style together:
H1, H2, H3 {font-size: 15pt; font-weight: bold;
color: maroon}
To define classes, which can be applied to any tag,
we use the following format:
.classname {attribute: setting;}
Where classname is any name you want to call
the class, preceded by a full stop (.), and attribute and setting
are as explained above. Therefore, we can define a class called "bluetext"
in the following way:
.bluetext {font-size: 20pt; color: blue; font: verdana;
font-weight: bold;}
This defines a class that makes any text told to
"take on" that class be in the Verdana font, be 20 points high, be blue,
and be in bold type.
In other words, like this!
You may now be wondering how you apply classes to
tags and objects. Well, you use the following format for tags:
<TAG CLASS="classname">Text
or Object</TAG>
Where TAG is any tag you want, it could be
<B> or <BODY> or anything you want. classname is
the name of the class you want that particular tag to have (but not any
others of the same kind on the page, otherwise you would just define the
style for the tag in the header as explained above).
An example is:
<B CLASS="bluetext">Some text</B>
which would give you:
Some text
You can specify that large portions of the web page
inherit the class by using two special tags, <SPAN> and </SPAN>,
and <DIV> and </DIV>. These you can put round any number
of elements in the page and they will all inherit the style defined by
that class. The format is:
<SPAN CLASS="classname">Any Element
of the page</SPAN>
This format is the same for the <DIV> tag.
The <DIV> is used for large containers, such as a whole page of
text, whereas <SPAN> is used for smaller page elements, words
or even letters. An example of the way these two tags are used is:
<SPAN CLASS="bluetext">Any Element of the
page</SPAN>
Which results in:
Any Element of the page
Lastly, you can specify different classes for one
type of tag. This means you could have, for example, 5 different classes
for the <P> tag:
P.normal
P.red
P.green
P.bold
P.italic
These are defined just like any other class or style,
as follows:
<STYLE TYPE="text/css">
<!--
P.normal {font-size: 12pt; font: arial;}
-->
</STYLE>
These different classes for one type of tag are used
as follows (using the <P> from above as the example):
<P CLASS="normal">Text with the normal style</P>
<P CLASS="red">Text with the red style</P>
<P CLASS="green">You get the picture...</P>
One thing you might be wondering about is can you
have a different style of tag when you've specified a style for that tag
already? the answer is yes you can, and the way to do it is simply call
another class from the tag you want to be different from all the rest
of the same kind of tag.
An example is when you have specified the following:
<STYLE TYPE="text/css">
<!--
LI {font-size: 12pt; font: arial; color: blue;}
.redtext {color: red;}
-->
</STYLE>
<UL>
<LI>A list item with the normal class
<LI CLASS="redtext">A list item using the "redtext" class.
</UL>
This gives the following result:
- A list item with the normal class.
- A list item using the "redtext"
class.
Tags can also have what are called inline styles
defined in them. This simply means that styles can be defined in the HTML
code rather than having to be specified as classes in the header between
the <STYLE> tags. The format is as follows:
<TAG STYLE="attribute: setting;">Any
page Element</TAG>
An example is:
<U STYLE="font-weight: demi-bold; color: green;">Some
text with an Inline Style</U>
Which results in:
Some
text with an Inline Style
The other way of introducing styles to a page is
by linking a stylesheet file to the web page. This enables you to be able
to modify the styles which affect a whole group of pages by editing one
file, which is especially good if you want your whole site to look reasonably
the same, or at least have the same text fonts and sizes. The way you
link to external stylesheet files is using the following code on the header
(between the <HEAD> and </HEAD> tags):
<LINK REL=STYLESHEET HREF="path/to/stylesheet/.css"
TYPE="text/css">
The path/to/stylesheet/.css is the exact URL
of the stylesheet.
External Style Sheets are created by simply defining
the styles as shown but without any HTML tags in the file, so for example,
this could be an external style sheet:
LI {font-size: 12pt; color: green;}
.boldgreen {font-weight: bold; color: green;}
The style sheet is then saved as a file with the
.css extension. As an example, lets say I've created a file called "homepage.css".
I would link to it by putting the following in the header of the page/s
that used it:
<LINK REL=STYLESHEET HREF="homepage.css" TYPE="text/css">
Something special you can do is make different styles
for links depending what status they have: whether they are unvisited,
visited or active (when a link is clicked it flashes it's active colour).
The way to do it is as follows:
A:link {attribute: setting}
A:visited {attribute: setting}
A:active {attribute: setting}
Where the attribute and setting are
the normal way styles are defined. The A:link is for unvisited links,
the A:visited for visited links, and the A:active for active links. These
style definitions are like any others and go between the <STYLE>
tags in the header.
Style Sheets support the following properties:
Attribute |
Description |
Possible Values |
Example |
font-size |
Sets the size of the font in points |
any number in points (pt)
pixels (px)
centimetres (cm)
inches (in). |
{font-size: 12pt} |
font-family |
Sets the actual font |
Typeface name
Font Family name |
{font-family: courier} |
font-weight |
Sets thickness of type. |
extra-light
light
demi-light
medium
demi-bold
bold
extra-bold |
{font-weight: bold} |
font-style |
Sets text in italics or not |
normal
italic |
{font-style: italic} |
line-height |
Sets the distance between bottoms of each line of text. |
points (pt)
inches (in)
centimeters (cm)
pixels (px)
percentage (%) |
{line-height: 24pt} |
color |
Sets color of text. |
color-name
RGB triplet |
{color: blue} |
text-decoration |
Underlines or highlights text. |
none
underline
italic
line-through
overline
blink |
{text-decoration: underline} |
margin |
Sets the value for all the margins. |
Numbers separated by commas in the order: top, right, bottom,
left. If only one value is specified, it applies to all four margins. |
{margins: 12, 34, 4, 34} |
margin-left |
Sets distance from left edge of page. |
points (pt)
inches (in)
centimeters (cm)
pixels (px) |
{margin-left: 1in} |
margin-right |
Sets distance from right edge of page. |
points (pt)
inches (in)
centimeters (cm)
pixels (px) |
{margin-right: 1pt} |
margin-top |
Sets distance from top edge of page. |
points (pt)
inches (in)
centimeters (cm)
pixels (px) |
{margin-top: -20px} |
text-align |
Sets justification. |
left
center
right
justify |
{text-align: right} |
text-indent |
Sets distance from left margin. |
points (pt)
inches (in)
centimeters (cm)
pixels (px) |
{text-indent: 0.5in} |
background-color |
Sets background images or colors. |
URL
color-name
RGB triplet |
{background-color: #33CC00} |
a:hover |
Used once in the style definition to specify the colour links
go when the cursor is over them. |
color-name
RGB triplet |
<STYLE TYPE="text/css">
A:hover {color: #0000FF; }
</STYLE> |
height |
Specifies the height of an object. |
points (pt)
inches (in)
centimeters (cm)
pixels (px) |
{height: 48px} |
width |
Specifies the width of an object. |
points (pt)
inches (in)
centimeters (cm)
pixels (px) |
{width: 57pt} |
letter-spacing |
The spacing between the letters in a word. |
A number in em s (1em is the space taken up by the letter m) |
{letter-spacing: 3} |
background-image |
Used to specify an image as a background. |
Filename
URL |
{background-image.url(back.gif)} |
background-repeat |
Whether and how the background is tiled. |
repeat-x
repeat-y
repeat |
{background-repeat: repeat} |
background-position |
If the background doesn't repeat, you'll probably want to position
it. |
top
bottom
center
left
right
The format is first the horizontal parameter and then the vertical. |
{background-position: right, center} |
background-attachment |
How the background behaves when the page scrolls. |
fixed [background doesn't move as you scroll, so you can have an image that is the background only at the top of a page]
scrolling [as normal, the default]. |
{background-attachment: fixed} |
word-spacing |
The space between words |
em |
{word-spacing: 6 } |
vertical-align |
The vertical alignment of an object |
baseline
sub [that means subscript]
super [superscript]
text-top [aligned with the top of the paragraph text]
text-bottom
middle
top
bottom
x% [where x is a number indicating the %age distance from the baseline,
+ve or -ve] |
{vertical-align: text-top} |
text-transform |
Changes the text to a different case. |
capitalize [the first letter of each word]
uppercase
lowercase
none |
{text-transform: capitalize} |
padding-top
padding-bottom
padding-left
padding-right |
Used for tables, to define the distance of the cell wall from
the text. |
Any unit of measurement, or a percentage. |
{padding-top: 23px} |
padding |
Sets the value for all padding. |
Any unit of measurement, or a percentage. |
{padding: 10px} |
border-top
border-bottom
border-right
border-left |
Sets the type of border on each side of an object. |
[One of the following border types]
none
dotted
dashed
solid
double
groove
ridge
inset
outset
[and then a colour]. |
{border-top: dashed red} |
border-top-width
border-bottom-width
border-right-width
border-left-width |
Set the thickness of an object's separate borders. |
Any unit of measurement, a percentage, or one of the following:
thin
medium
thick |
{border-top-width: 4px} |
border-width |
Set the thickness of all of an object's borders. |
As above. |
{border-width: medium} |
border-color |
Color of all of an object's borders. |
Any colour. |
{border-color: red} |
border-style |
Style of all of an object's borders. |
none
dotted
dashed
solid
double
groove
ridge
inset
outset |
{border-style: groove} |
border |
Group all the border attributes together for all of an object's
borders. |
Order for specification is:
width style color |
{border: thick dashed blue} |
float |
Similar to ALIGN in HTML. |
left
right
none |
{float: right} |
clear |
Same function as <BR CLEAR="x"> |
none
right
left
leftright |
{clear: left} |
display |
How text with the style is displayed. |
none [isn't displayed]
block [a new container for the text is created on a new line]
inline [a new container on the same line as the previous text]
list-item [same as block, except that list item markers are added].
|
{display: block} |
white-space |
How blank spaces and new lines in the code are displayed. |
normal
pre [like the <PRE> tag in HTML]
nowrap [new lines are only displayed when there is a <BR>
tag].
|
{white-space: nowrap} |
list-style-type |
The type of list markers (bullets) that are displayed. |
disc
circle
square
decimal [normal numbers]
lower-roman [e.g. i, ii, iii]
upper-roman [e.g. I, II, III]
lower-alpha [e.g. a, b, c]
upper-alpha [e.g. A, B, C]
none
|
{list-style-type: square} |
list-style-image |
The image used as a bullet in a list. |
The URL from an image, bullet.gif can be changed to the filename
or Internet address you want. |
{list-style-image: url(bullet.gif)} |
list-style-position |
How the lines in a list are placed. |
inside [second and subsequent lines are justified with the item
marker]
outside [default, subsequent lines are indented] |
{list-style-position: inside} |
list-style |
Group all the list-style attributes together. |
Order is:
list-style-type list-style-image list-style-position
Note that you don't normally have both list-style-type and list-style-image. |
{list-style: circle inside} |
position |
How objects are positioned on a page. |
absolute [you specify the exact left and top distances]
relative [co-ordinates relative to the previous object]
static |
{position: relative} |
visibility |
If the object the style is applied to is visible or not. |
inherit [takes the visibility of the parent object, e.g. text in
a table inherits the table's visibility]
visible
hidden |
{visibility: hidden} |
overflow |
How text that doesn't fit into a container is displayed. |
hidden [what doesn't fit gets cut off]
visible [text "overflows" out of the container]
scroll [scrollbars appear if doesn't fit]
auto |
{overflow: scroll} |
z-index |
The stacking order of layers. The lower the index the higher up
the stack. This defines when two or more layers are on top of eachother
which is displayed. |
auto
a number value, such as 1 or 2... |
{z-index: 1} |
cursor |
The style of cursor the user's pointer takes on when they pass
it over the object with this style. |
hand
crosshair
wait
text
default
help
e-resize [East corner resize]
ne-resize [North East corner resize]
w-resize
nw-resize
n-resize
s-resize
se-resize
sw-resize
auto
|
{cursor: hand} |
Possible colour names are:
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua
There are a few more attributes which are only supported
by Internet Explorer 4.0, such as filter, which can produce drop shadows
on text, (and other effects), page-break, and clip.
Well, this has been a rather long tutorial, but I
think you'll agree it's been worth it.
|