CCS Editing
Content
CCS EDITING
CSS has several options for defining the styles of text.
These options can entirely replace the <font> tag, but there's even more. CSS
allows you to define these styles much more powerfully than you could ever do
with plain HTML.
FONT PROPERTIES
Property
Values
NS IE Example
fontfamily
font name
generic font
4+
4+
4+ fontfamily:arial
4+ fontfamily:arial, helvetica
fontstyle
normal
italic
oblique
4+
4+
4+ fontstyle:normal
4+ fontstyle:italic
4+ fontstyle:oblique
fontvariant
normal
small-caps
fontweight
normal
bold
bolder
lighter
100-900
4+
4+
4W
4W
4+
4+
4+
4+
4+
4+
fontweight:normal
fontweight:bold
fontweight:bolder
fontweight:lighter
fontweight:250
fontsize
normal
length
length
absolute
absolute
absolute
absolute
absolute
absolute
absolute
relative
relative
percentage
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
fontsize:normal
fontsize:14px
fontsize:14pt
fontsize:xxsmall
fontsize:xsmall
fontsize:small
fontsize:medium
fontsize:large
fontsize:xlarge
fontsize:xxlarge
fontsize:smaller
fontsize:larger
fontsize:75%
4+ fontvariant:normal
4+ fontvariant:smallcaps
4P:problems, 4M:Mac only, 4W:Windows only
ASSIGNING ALL FONT ATTRIBUTES AT ONCE
An example of a typical font definition would be:
B {fontfamily:arial, helvetica; fontsize:12px; font
weight:bold;}
But since all font attributes can actually be expressed with the font property we
could actually write it this way:
B {font:arial, helvetica 12px bold}
The above is obviously a shorter way to specify font settings - but in reality it is
less useful than one might think. The reason is that you'd be assigning the same
font face to all your styles, for example, while you'd want different font weights and
sizes for headers and content areas etc.
TEXT PROPERTIES
Despite the font properties listed above there are some options for defining text
properties such as alignments, underlines, etc.
Property
Values
NS
IE
Example
lineheight
normal
number
length
percentage
4W
4+
4+
4+
4+
4P
4+
4P
lineheight:normal
lineheight:1.5
lineheight:22px
lineheight:150%
textdecoration
none
underline
overline
line-through
blink
4+
4+
4M
4+
4W
4+
texttransform
none
capitalize
uppercase
lowercase
4+
4+
4+
4+
4W
4W
4W
4W
text-transform:none
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase
textalign
left
right
center
justify
4+
4+
4+
4+
4+
4+
4+
4W
textalign:left
textalign:right
textalign:center
textalign:justify
textindent
length
percentage
4+
4+
4+
4+
textindent:20px;
textindent:10%
whitespace
normal
pre
4+
4+
4+
4+
text-decoration:none
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink
whitespace:normal
whitespace:pre
4P:problems, 4M:Mac only, 4W:Windows only
Note:
lineheight :
When using a number (such as 1.5) the number refers to the font size, where 1.5
would mean that a 1.5 lines spacing (using the current font size) will be inserted
between the lines.
texttransform :
Capitalize sets the first letter of each word in uppercase.
Uppercase forces all letters to uppercase.
Lowercase forces all letters to lowercase.
textindent :
Use this to indent the first word of a paragraph.
whitespace :
If white-space is set to pre the browser will show all spaces in the text, rather than
ignoring all occurrences of more than one space. This is similar to the<pre> tag in
plain HTML. Since the white-space is only supported by NS you should use
the <pre> tag instead.
The official CSS standard provided by W3C also includes properties for word
spacing, letter spacing and vertical align, but these aren't supported by today's
browsers.
COLORS
As you can see, the above CSS properties can replace all text formatting
that can be done with plain HTML with one exception: the color.
The color is not part of the font collection in CSS - rather it has its own
definition.
If you want to add a color to the text in the above example you'd do it this
way:
B {font:arial, helvetica 12px bold; color:red}
The color property is explained in detail on the next page.
CCS COLORS
CSS has several options for defining colors of both text and background areas on
your pages.
These options can entirely replace the color attributes in plain HTML. In addition,
you get new options that you just didn't have in plain HTML.
For example, in plain HTML, when you wanted to create an area with a specific
color you were forced to include a table. With CSS, you can define an area to have
a specific color without that area being part of a table.
Or even more useful, in plain HTML when working with tables, you had to specify
font attributes and colors etc. for each and every table cell. With CSS you can
simply refer to a certain class in your <TD> tags.
COLOR PROPERTIES
Property
color
backgroundcolor
backgroundimage
backgroundrepeat
backgroundattachment
Values
<color>
transparent
<color>
none
url(<URL>)
repeat
repeat-x
repeat-y
no-repeat
scroll
fixed
NS
4+
4+
4+
4+
4+
4+
4+
4+
4+
IE
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
backgroundposition
background
<percentage>
<length>
top
center
bottom
left
right
<background-color>
<background-image>
<background-repeat>
<background-attachment>
<background-position>
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4P:problems, 4M:Mac only, 4W:Windows only
Setting colors
Basically you have three color options with CSS:
1: Setting the foreground color for contents
2: Setting the background color for an area
3: Setting a background image to fill out an area
In the next section we will list the different properties that let you
do that.
In plain HTML, colors can either be entered by name (red, blue etc.) or by a
hexadecimal color code (for example: #FF9900).
With CSS you have these options:
Common name
You can define colors with the use of common names, by simply enter the name of
the desired color.
For example:
.myclass {color:red; background-color:blue;}
Hexadecimal value
You can define colors with the use of hexadecimal values, similar to how it's done in
plain HTML.
For example:
.myclass {color:#000000; background-color:#FFCC00;}
RGB value
You can define colors with the use of RGB values, by simply entering the values for
amounts of Red, Green and Blue.
For example:
.myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);}
You can also define RGB colors using percentage values for the amounts of Red,
Green and Blue:
For example:
.myclass {color:rgb(100%,100%,81%); background-color:rgb(81%,18%,100%);}
Setting background colors
Background colors are defined similar to the colors mentioned above. For
example you can set the background color of the entire page using
the BODYselector:
BODY {backgroundcolor:#FF6666;}
Setting a background image
CSS lets you set a background image for both the page and single elements on the
page.
In addition, CSS offers several positioning methods for background images.
You can define the background image for the page like this:
BODY {backgroundimage:url(myimage.gif);}
You can control the repetition of the image with the backgroundrepeatproperty.
backgroundrepeat:repeat
Tiles the image until the entire page is filled, just like an ordinary background image
in plain HTML.
backgroundrepeat:repeatx
Repeats the image horizontally - but not vertically.
backgroundrepeat:repeaty
Repeats the image vertically - but not horizontally.
backgroundrepeat:norepeat
Does not tile the image at all.
Positioning a background
Background positioning is done by entering a value for the left position and top
position separated by a space.
In this example the image is positioned 75 pixels from the upper left corner of the
page:
BODY {backgroundimage:url(myimage.gif); backgroundposition:
75px 75px;}
Note: Background positioning is not supported by Netscape 4 browsers.
Fixing a background
You can fixate an image at a certain position so that it doesn't move when scrolling
occurs.
BODY {backgroundimage:url(myimage.gif); backgroundattachment:
fixed;}
Note: Background fixation is not supported by Netscape 4 browsers.
Setting multiple background values
Rather than defining each background property with its own property you can
assign them all with the use of the background property.
Look at this example:
BODY {background:green url(myimage.gif) repeaty fixed 75px
75px;}
CCS LINKS
CSS has several options for redefining the style of links.
LINK PROPERTIES
Property
A:link
A:visited
A:active
A:hover
Values
<style>
<style>
<style>
<style>
NS
4+
4+
4+
6+
IE
4+
4+
4+
4+
DEFINING STYLES FOR LINKS
As mentioned in the above table, there are four different selectors with respect to
links.
You can specify whatever style you'd like to each of these selectors, just like you'd
do with normal text.
The four selectors are:
A:link
Defines the style for normal unvisited links.
A:visited
Defines the style for visited links.
A:active
Defines the style for active links.
A link becomes active once you click on it.
A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.
PRACTICAL EXAMPLES
Here you can see a few examples on how CSS can be used to replace the
traditional image based mouseover effects for links.
The hover style is not supported by Netscape browsers prior to version 6, but
since it does no harm, you can still use it for the benefit of the +90% of visitors that
arrive using MSIE).
One of the most common uses of CSS with links is to remove the underline.
Typically it's done so that the underline appears only when a hover occurs. In the
example below, we did just that. In addition we added a red color for hovered links.
Example: Hover
<style type="text/css">
A:link {textdecoration: none}
A:visited {textdecoration: none}
A:active {textdecoration: none}
A:hover {textdecoration: underline; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
Another example would be to create links that are
both underlined andoverlined.
Example: Underline/Overline
<style type="text/css">
A:link {textdecoration: none}
A:visited {textdecoration: none}
A:active {textdecoration: none}
A:hover {textdecoration: underline overline; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
A third example would be to create links that change in size
when hovered.
Example: Size changing links
<style type="text/css">
A:link {textdecoration: none}
A:visited {textdecoration: none}
A:active {textdecoration: none}
A:hover {fontsize:24; fontweight:bold; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
A final example would be to create links that have a permanent background color,
obviously standing out from the rest.
Example: Background colored links
<style type="text/css">
A:link {background: #FFCC00; textdecoration: none}
A:visited {background: #FFCC00; textdecoration: none}
A:active {background: #FFCC00; textdecoration: none}
A:hover {background: #FFCC00; fontweight:bold; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE TO SEE
MULTIPLE LINKSTYLES ON SAME PAGE
The final topic deals with how to add multiple link styles that can be used on the
same page.
In the above examples we addressed the HTML selector - A:link etc - and thus
redefined the overall link style.
How do we define a link style that is only active in a certain area of the page?
The answer is: context dependent selectors.
Rather than addressing the A:link selector we will address it while being
dependant on a certain outer class that surrounds the area where we'd like our link
style to be effective.
For example:
<html>
<head>
<style type="text/css">
.class1 A:link {textdecoration: none}
.class1 A:visited {textdecoration: none}
.class1 A:active {textdecoration: none}
.class1 A:hover {textdecoration: underline; color: red;}
.class2 A:link {textdecoration: underline overline}
.class2 A:visited {textdecoration: underline overline}
.class2 A:active {textdecoration: underline overline}
.class2 A:hover {textdecoration: underline; color: green;}
</style>
</head>
<body>
ONE TYPE OF LINKS
<br>
<span class="class1">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br>
<br>
ANOTHER TYPE OF LINKS
<br>
<span class="class2">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>
Note how we use the <span> to define the context.
This is smart for two reasons:
1) The obvious, that it allows us to use different link styles on
the same page, rather than being limited to using a single
overall link style.
2) We can define entire areas where a certain link style works for all links within
that area. Thus, we don't have to add a style definition to each and every link in
that area.
CCS LIST
CSS allows you to customize the lists that can be made
with HTML.
The good news is that there are many powerful properties for doing so.
The bad news is that Netscape and Internet Explorer often support these
properties in different ways. Both browsers have limitations in their support of list
styles.
Netscape browsers only let you add the list CSS to <LI> tags - not just any tag.
Internet Explorer's support of CSS with relation to lists is only fully supported for
browsers on the Windows platform.
In any case, be careful about using CSS for lists since it might not show the way
you want it to on all browsers. However, most things won't ruin anything if the
browser doesn't support it - it just shows as a normal list - so it will be okay to
define lists that only work for the most widely used browser.
LIST PROPERTIES
Property
liststyle type
liststyle image
liststyle position
liststyle
Values
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
none
url(<url>)
outside
inside
<list-style type>
<list style position>
<list-style image>
NS
4+
4+
4+
4+
4+
4+
4+
4+
IE
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4w
4+: Browser version 4 or newer.
4W: Browser version 4 or newer, windows only.
DEFINING STYLES FOR LINKS
As mentioned in the above table, we have four unique selectors with respect to
lists. The fourth selector, liststyle is an overall selector that let you define all list
related styles at once.
The three basic selectors are:
liststyle type
Defines the look of the bullets used in your list.
liststyle image
Let's you use a custom graphic for bullets.
liststyle position
Often the text in a list is longer than one line.
list-style position:outer lets the second line align with the first line. That is: the bullet
is to the left of both lines.
list-style position:inner lets the second line align with the bullet.
Assigning several properties at once
Instead of using different selectors for each list-style you can specify them all at
once using the liststyle property.
For example:
<html>
<head>
<style type="text/css">
LI.list1 {liststyle: circle outside; color:green;}
LI.list2 {liststyle: square inside; color:blue}
.blacktext {color:black}
</style>
</head>
<body>
<ul>
<li class="list1"><span class="blacktext">This is one black
line</span>
<li class="list1">This is another line that is much longer than
the first. But it isn't a black line since we did not specify a
style for the text that goes here other than the style we defined
for the list.
</ul>
<br>
<br>
<ul>
<li class="list2"><span class="blacktext">This is one black
line</span>
<li class="list2">This is another line that is much longer than
the first. But it isn't a black line since we did not specify a
style for the text that goes here other than the style we defined
for the list.
</ul>
</body>
</html>
The lists from the above example would look like this:
o This is one black
line
o This is another line
that is much longer
than the first. But it
isn't a black line
since we did not
specify a style for
the text that goes
here other than the
style we defined for
the list.
This is one black
line
This is another line
that is much longer
than the first. But it
isn't a black line
since we did not
specify a style for
the text that goes
here other than the
style we defined for
the list.
CCS LAYERS
With CSS, it is possible to work with layers: pieces of HTML that are placed on top
of the regular page with pixel precision.
The advantages of this are obvious - but once again Netscape has very limited
support of CSS layers - and to top it off: the limited support it offers is quite often
executed with failures.
So the real challenge when working with layers is to make them work on Netscape
browsers as well.
LAYER BASICS
First look at this example:
LAYER 1 ON TOP:
LAYER 1
LAYER 2
LAYER 2 ON TOP:
LAYER 1
LAYER 2
Second look at the code:
LAYER 1 ON TOP:
<div style="position:relative; fontsize:50px; zindex:2;">LAYER
1</div>
<div style="position:relative; top:50; left:5; color:red; font
size:80px; zindex:1">LAYER 2</div>
LAYER 2 ON TOP:
<div style="position:relative; fontsize:50px; zindex:3;">LAYER
1</div>
<div style="position:relative; top:50; left:5; color:red; font
size:80px; zindex:4">LAYER 2</div>
To create a layer all you need to do is assign the position attribute to your style.
The position can be either absolute or relative.
The position itself is defined with the top and left properties.
Finally, which layer is on top is defined with the zindex attribute.
RELATIVE VERSUS ABSOLUTE POSITIONING
You can either position your layer calculated from the upper left corner(absolute)
or calculated from the position where the layer itself is inserted (relative).
position:absolute
If you define the position to be absolute it will be calculated from the upper left
corner of the page - unless the layer is defined inside another layer, in which case it
will be calculated from the upper left corner of the parent layer.
position:relative
If you define the position to be relative it will be relative to the position of the tag that
carries the style.
That is, if you add a relatively positioned layer in the middle of the page, then the
position will be calculated from that exact spot in the middle of your page where it
was added.
DEFINING THE POSITION
While the position property indicates the out spring of our coordinate system,
the left and top properties defines the exact position of our layer.
You can enter both positive and negative values for these properties - thus it is
possible to place content higher up and further to the left on the page than the
logical position in the HTML code where the layer itself is defined.
In other words: at the bottom of your HTML code you can enter the code for a
layer that is positioned at the top of the resulting page.
Both left and top properties can be dynamically changed
with JavaScript.
This means that it is possible to move things around on the screen even after the
page has finished loading.
In fact this technique can be (and has been) used to create entire games. Other
uses might be menus that pop out when a mouse-over is detected on a link. The
possibilities are endless - but in order to keep things simple, we will not dig into
details about these dynamic HTML effects here.
POSITION IN THE STACK THE ZINDEX
Picture a game of 52 cards. If the ace of spades was at the bottom we'd say it
had zindex:1;. If the queen of hearts was at the top we'd say she had z
index:52;.
Try looking at the code example at the top of this page again, and see how we
used the z-index to put LAYER 1 on top in the first example, while we had LAYER 2
on top in the second example.
Very interesting possibilities arise from the fact that the z-index can be
dynamically changed with JavaScript.
You could create several "pages" on top of each other - all on the same page.
When the user clicks a link it will simply move the layer with the desired info on top
rather than load a new page. The techniques to create effects like that goes
beyond the scope of pure CSS however, so for now we will just refer to DHTML
(Dynamic HTML - a mix between JavaScript and CSS) for further explorations into
that area.
VISIBILE VERSUS HIDDEN LAYERS
A final property is the visibility property that will allow you to create invisible
layers.
Why would anyone want to create an invisible layer? Well, imagine the
possibilities it gives for adding pop-up menus and other cool effects on your pages.
With dynamic HTML it is possible to change the visibility of a layer according to
certain events. The most common use of this is to create menus that pop out (like
the sub menus in the START menu on Windows). The trick behind these menus is
to create all submenus as invisible layers. Then, when a mouse-over is detected on
a link the according layer becomes visible. (Sounds pretty easy - actually is pretty
easy - except when tried on Netscape browsers that seem to have only a vague
idea of the logic behind CSS layers).
Valid values for the visibility property are: visible and hidden.
This example shows how to create an invisible layer:
<div style="position:relative; visibility:hidden;">HELLO!!!</div>
PRACTICAL USE OF LAYERS
It's obvious that layers offer certain possibilities for precise positioning of static
elements on your pages.
In reality layers are often used in more dynamic ways:
Flying elements/banners on the page
Games where you move an object around
Menus that pop out when triggered
Menus that become visible when triggered
While all of these effects might seem pretty cool and useful - the fact is that the
web is filled with dynamic effects that are much more cool than the average visitor
really likes.
The more you create a unique interface for your site the more you force the visitor
to forget about what she is used to. Do not underestimate the power of sticking to
the elements that the average visitor is accustomed to.
What's cool about creating an effect that makes 90% of all web designers clap their
hands while leaving 90% of non-web designers confused or disappointed?
In any case, judge for yourself if a certain effect is really needed - and if so: do not
hesitate to use it.
CURSORS
Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors
defined with CSS.
Although the cursors will not have the customized look in other browsers it usually
doesn't ruin anything. These browsers will simply show the normal arrow-cursor
which would be same case as if you refrained from customizing cursors at all.
So unless the page really doesn't work without the customized cursor there
shouldn't be technical reasons for choosing not to.
However there might be other reasons for thinking twice before adding custom
cursor to your pages. Many users are easily confused or irritated when a site
breaks the standard user interface.
CURSOR PROPERTIES
Look
Values
Look
NS IE Example
default
TEST
6+
4+ cursor:default
crosshair
TEST
6+
4+ cursor:crosshair
hand
TEST
pointer
TEST
Cross browser
TEST
move
TEST
6+
4+ cursor:move
text
TEST
6+
4+ cursor:text
wait
TEST
6+
4+ cursor:wait
4+ cursor:hand
6+
cursor:pointer
4+ cursor:pointer;cursor:hand
help
TEST
6+
4+ cursor:help
n-resize
TEST
6+
4+ cursor:nresize
ne-resize
TEST
6+
4+ cursor:neresize
e-resize
TEST
6+
4+ cursor:eresize
se-resize
TEST
6+
4+ cursor:seresize
s-resize
TEST
6+
4+ cursor:sresize
sw-resize
TEST
6+
4+ cursor:swresize
w-resize
TEST
6+
4+ cursor:wresize
nw-resize
TEST
4+
4+ cursor:nwresize
progress
TEST
6+ cursor:progress
not-allowed
TEST
6+ cursor:notallowed
no-drop
TEST
6+ cursor:nodrop
vertical-text
TEST
6+ cursor:verticaltext
all-scroll
TEST
6+ cursor:allscroll
col-resize
TEST
6+ cursor:colresize
row-resize
TEST
6+ cursor:rowresize
cursor:url(uri)
TEST
6+ cursor:url(uri)
4P:problems, 4M:Mac only, 4W:Windows only
ADDING A CUSTOMIZED CURSOR
The syntax for a customized cursor is this:
(Position the mouse over each link to see the effect)
Selector {cursor:value}
For example:
<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>
The links from the above example would look like this:
CROSS LINK
HELP LINK
REDEFINING THE CURSOR FOR ENTIRE PAGES
If you want to redefine the cursor so that it's not only showing up when moved over
a link, you simply specify the desired cursor using the body-selector.
For example:
<html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>
<body>
<b>
SOME TEXT
<br>
<a href="mypage.htm">ONE LINK</a>
<br>
<a href="mypage.htm">ANOTHER LINK</a>
</b>
</body>
</html>
Click here to open a window that shows the result of the above example.
REDEFINING THE CURSOR FOR AREAS ON A PAGE
If you want one look of the cursor in one area of the page and another look of the
cursor in another area you can do it with context dependant selectors.
This way, you create different styles for links, that are dependant on the context.
Now if the context is set with a dummy tag, such as <span> you don't have to
specify the desired style each and every time there is a link in the section.
For example:
<html>
<head>
<style type="text/css">
.xlink A{cursor:crosshair}
.hlink A{cursor:help}
</style>
</head>
<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>
The links from the above example would look like this:
CROSS LINK 1
CROSS LINK 2
CROSS LINK 3
HELP LINK 1
HELP LINK 2
HELP LINK 3
CSS has several options for defining the styles of text.
These options can entirely replace the <font> tag, but there's even more. CSS
allows you to define these styles much more powerfully than you could ever do
with plain HTML.
FONT PROPERTIES
Property
Values
NS IE Example
fontfamily
font name
generic font
4+
4+
4+ fontfamily:arial
4+ fontfamily:arial, helvetica
fontstyle
normal
italic
oblique
4+
4+
4+ fontstyle:normal
4+ fontstyle:italic
4+ fontstyle:oblique
fontvariant
normal
small-caps
fontweight
normal
bold
bolder
lighter
100-900
4+
4+
4W
4W
4+
4+
4+
4+
4+
4+
fontweight:normal
fontweight:bold
fontweight:bolder
fontweight:lighter
fontweight:250
fontsize
normal
length
length
absolute
absolute
absolute
absolute
absolute
absolute
absolute
relative
relative
percentage
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
fontsize:normal
fontsize:14px
fontsize:14pt
fontsize:xxsmall
fontsize:xsmall
fontsize:small
fontsize:medium
fontsize:large
fontsize:xlarge
fontsize:xxlarge
fontsize:smaller
fontsize:larger
fontsize:75%
4+ fontvariant:normal
4+ fontvariant:smallcaps
4P:problems, 4M:Mac only, 4W:Windows only
ASSIGNING ALL FONT ATTRIBUTES AT ONCE
An example of a typical font definition would be:
B {fontfamily:arial, helvetica; fontsize:12px; font
weight:bold;}
But since all font attributes can actually be expressed with the font property we
could actually write it this way:
B {font:arial, helvetica 12px bold}
The above is obviously a shorter way to specify font settings - but in reality it is
less useful than one might think. The reason is that you'd be assigning the same
font face to all your styles, for example, while you'd want different font weights and
sizes for headers and content areas etc.
TEXT PROPERTIES
Despite the font properties listed above there are some options for defining text
properties such as alignments, underlines, etc.
Property
Values
NS
IE
Example
lineheight
normal
number
length
percentage
4W
4+
4+
4+
4+
4P
4+
4P
lineheight:normal
lineheight:1.5
lineheight:22px
lineheight:150%
textdecoration
none
underline
overline
line-through
blink
4+
4+
4M
4+
4W
4+
texttransform
none
capitalize
uppercase
lowercase
4+
4+
4+
4+
4W
4W
4W
4W
text-transform:none
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase
textalign
left
right
center
justify
4+
4+
4+
4+
4+
4+
4+
4W
textalign:left
textalign:right
textalign:center
textalign:justify
textindent
length
percentage
4+
4+
4+
4+
textindent:20px;
textindent:10%
whitespace
normal
pre
4+
4+
4+
4+
text-decoration:none
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink
whitespace:normal
whitespace:pre
4P:problems, 4M:Mac only, 4W:Windows only
Note:
lineheight :
When using a number (such as 1.5) the number refers to the font size, where 1.5
would mean that a 1.5 lines spacing (using the current font size) will be inserted
between the lines.
texttransform :
Capitalize sets the first letter of each word in uppercase.
Uppercase forces all letters to uppercase.
Lowercase forces all letters to lowercase.
textindent :
Use this to indent the first word of a paragraph.
whitespace :
If white-space is set to pre the browser will show all spaces in the text, rather than
ignoring all occurrences of more than one space. This is similar to the<pre> tag in
plain HTML. Since the white-space is only supported by NS you should use
the <pre> tag instead.
The official CSS standard provided by W3C also includes properties for word
spacing, letter spacing and vertical align, but these aren't supported by today's
browsers.
COLORS
As you can see, the above CSS properties can replace all text formatting
that can be done with plain HTML with one exception: the color.
The color is not part of the font collection in CSS - rather it has its own
definition.
If you want to add a color to the text in the above example you'd do it this
way:
B {font:arial, helvetica 12px bold; color:red}
The color property is explained in detail on the next page.
CCS COLORS
CSS has several options for defining colors of both text and background areas on
your pages.
These options can entirely replace the color attributes in plain HTML. In addition,
you get new options that you just didn't have in plain HTML.
For example, in plain HTML, when you wanted to create an area with a specific
color you were forced to include a table. With CSS, you can define an area to have
a specific color without that area being part of a table.
Or even more useful, in plain HTML when working with tables, you had to specify
font attributes and colors etc. for each and every table cell. With CSS you can
simply refer to a certain class in your <TD> tags.
COLOR PROPERTIES
Property
color
backgroundcolor
backgroundimage
backgroundrepeat
backgroundattachment
Values
<color>
transparent
<color>
none
url(<URL>)
repeat
repeat-x
repeat-y
no-repeat
scroll
fixed
NS
4+
4+
4+
4+
4+
4+
4+
4+
4+
IE
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
backgroundposition
background
<percentage>
<length>
top
center
bottom
left
right
<background-color>
<background-image>
<background-repeat>
<background-attachment>
<background-position>
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4+
4P:problems, 4M:Mac only, 4W:Windows only
Setting colors
Basically you have three color options with CSS:
1: Setting the foreground color for contents
2: Setting the background color for an area
3: Setting a background image to fill out an area
In the next section we will list the different properties that let you
do that.
In plain HTML, colors can either be entered by name (red, blue etc.) or by a
hexadecimal color code (for example: #FF9900).
With CSS you have these options:
Common name
You can define colors with the use of common names, by simply enter the name of
the desired color.
For example:
.myclass {color:red; background-color:blue;}
Hexadecimal value
You can define colors with the use of hexadecimal values, similar to how it's done in
plain HTML.
For example:
.myclass {color:#000000; background-color:#FFCC00;}
RGB value
You can define colors with the use of RGB values, by simply entering the values for
amounts of Red, Green and Blue.
For example:
.myclass {color:rgb(255,255,204); background-color:rgb(51,51,102);}
You can also define RGB colors using percentage values for the amounts of Red,
Green and Blue:
For example:
.myclass {color:rgb(100%,100%,81%); background-color:rgb(81%,18%,100%);}
Setting background colors
Background colors are defined similar to the colors mentioned above. For
example you can set the background color of the entire page using
the BODYselector:
BODY {backgroundcolor:#FF6666;}
Setting a background image
CSS lets you set a background image for both the page and single elements on the
page.
In addition, CSS offers several positioning methods for background images.
You can define the background image for the page like this:
BODY {backgroundimage:url(myimage.gif);}
You can control the repetition of the image with the backgroundrepeatproperty.
backgroundrepeat:repeat
Tiles the image until the entire page is filled, just like an ordinary background image
in plain HTML.
backgroundrepeat:repeatx
Repeats the image horizontally - but not vertically.
backgroundrepeat:repeaty
Repeats the image vertically - but not horizontally.
backgroundrepeat:norepeat
Does not tile the image at all.
Positioning a background
Background positioning is done by entering a value for the left position and top
position separated by a space.
In this example the image is positioned 75 pixels from the upper left corner of the
page:
BODY {backgroundimage:url(myimage.gif); backgroundposition:
75px 75px;}
Note: Background positioning is not supported by Netscape 4 browsers.
Fixing a background
You can fixate an image at a certain position so that it doesn't move when scrolling
occurs.
BODY {backgroundimage:url(myimage.gif); backgroundattachment:
fixed;}
Note: Background fixation is not supported by Netscape 4 browsers.
Setting multiple background values
Rather than defining each background property with its own property you can
assign them all with the use of the background property.
Look at this example:
BODY {background:green url(myimage.gif) repeaty fixed 75px
75px;}
CCS LINKS
CSS has several options for redefining the style of links.
LINK PROPERTIES
Property
A:link
A:visited
A:active
A:hover
Values
<style>
<style>
<style>
<style>
NS
4+
4+
4+
6+
IE
4+
4+
4+
4+
DEFINING STYLES FOR LINKS
As mentioned in the above table, there are four different selectors with respect to
links.
You can specify whatever style you'd like to each of these selectors, just like you'd
do with normal text.
The four selectors are:
A:link
Defines the style for normal unvisited links.
A:visited
Defines the style for visited links.
A:active
Defines the style for active links.
A link becomes active once you click on it.
A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
Note: Not supported by Netscape browsers prior to version 6.
PRACTICAL EXAMPLES
Here you can see a few examples on how CSS can be used to replace the
traditional image based mouseover effects for links.
The hover style is not supported by Netscape browsers prior to version 6, but
since it does no harm, you can still use it for the benefit of the +90% of visitors that
arrive using MSIE).
One of the most common uses of CSS with links is to remove the underline.
Typically it's done so that the underline appears only when a hover occurs. In the
example below, we did just that. In addition we added a red color for hovered links.
Example: Hover
<style type="text/css">
A:link {textdecoration: none}
A:visited {textdecoration: none}
A:active {textdecoration: none}
A:hover {textdecoration: underline; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
Another example would be to create links that are
both underlined andoverlined.
Example: Underline/Overline
<style type="text/css">
A:link {textdecoration: none}
A:visited {textdecoration: none}
A:active {textdecoration: none}
A:hover {textdecoration: underline overline; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
A third example would be to create links that change in size
when hovered.
Example: Size changing links
<style type="text/css">
A:link {textdecoration: none}
A:visited {textdecoration: none}
A:active {textdecoration: none}
A:hover {fontsize:24; fontweight:bold; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE
A final example would be to create links that have a permanent background color,
obviously standing out from the rest.
Example: Background colored links
<style type="text/css">
A:link {background: #FFCC00; textdecoration: none}
A:visited {background: #FFCC00; textdecoration: none}
A:active {background: #FFCC00; textdecoration: none}
A:hover {background: #FFCC00; fontweight:bold; color: red;}
</style>
The link from the above example would look like this:
LOOK HERE TO SEE
MULTIPLE LINKSTYLES ON SAME PAGE
The final topic deals with how to add multiple link styles that can be used on the
same page.
In the above examples we addressed the HTML selector - A:link etc - and thus
redefined the overall link style.
How do we define a link style that is only active in a certain area of the page?
The answer is: context dependent selectors.
Rather than addressing the A:link selector we will address it while being
dependant on a certain outer class that surrounds the area where we'd like our link
style to be effective.
For example:
<html>
<head>
<style type="text/css">
.class1 A:link {textdecoration: none}
.class1 A:visited {textdecoration: none}
.class1 A:active {textdecoration: none}
.class1 A:hover {textdecoration: underline; color: red;}
.class2 A:link {textdecoration: underline overline}
.class2 A:visited {textdecoration: underline overline}
.class2 A:active {textdecoration: underline overline}
.class2 A:hover {textdecoration: underline; color: green;}
</style>
</head>
<body>
ONE TYPE OF LINKS
<br>
<span class="class1">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br>
<br>
ANOTHER TYPE OF LINKS
<br>
<span class="class2">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>
Note how we use the <span> to define the context.
This is smart for two reasons:
1) The obvious, that it allows us to use different link styles on
the same page, rather than being limited to using a single
overall link style.
2) We can define entire areas where a certain link style works for all links within
that area. Thus, we don't have to add a style definition to each and every link in
that area.
CCS LIST
CSS allows you to customize the lists that can be made
with HTML.
The good news is that there are many powerful properties for doing so.
The bad news is that Netscape and Internet Explorer often support these
properties in different ways. Both browsers have limitations in their support of list
styles.
Netscape browsers only let you add the list CSS to <LI> tags - not just any tag.
Internet Explorer's support of CSS with relation to lists is only fully supported for
browsers on the Windows platform.
In any case, be careful about using CSS for lists since it might not show the way
you want it to on all browsers. However, most things won't ruin anything if the
browser doesn't support it - it just shows as a normal list - so it will be okay to
define lists that only work for the most widely used browser.
LIST PROPERTIES
Property
liststyle type
liststyle image
liststyle position
liststyle
Values
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
none
url(<url>)
outside
inside
<list-style type>
<list style position>
<list-style image>
NS
4+
4+
4+
4+
4+
4+
4+
4+
IE
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4W
4w
4+: Browser version 4 or newer.
4W: Browser version 4 or newer, windows only.
DEFINING STYLES FOR LINKS
As mentioned in the above table, we have four unique selectors with respect to
lists. The fourth selector, liststyle is an overall selector that let you define all list
related styles at once.
The three basic selectors are:
liststyle type
Defines the look of the bullets used in your list.
liststyle image
Let's you use a custom graphic for bullets.
liststyle position
Often the text in a list is longer than one line.
list-style position:outer lets the second line align with the first line. That is: the bullet
is to the left of both lines.
list-style position:inner lets the second line align with the bullet.
Assigning several properties at once
Instead of using different selectors for each list-style you can specify them all at
once using the liststyle property.
For example:
<html>
<head>
<style type="text/css">
LI.list1 {liststyle: circle outside; color:green;}
LI.list2 {liststyle: square inside; color:blue}
.blacktext {color:black}
</style>
</head>
<body>
<ul>
<li class="list1"><span class="blacktext">This is one black
line</span>
<li class="list1">This is another line that is much longer than
the first. But it isn't a black line since we did not specify a
style for the text that goes here other than the style we defined
for the list.
</ul>
<br>
<br>
<ul>
<li class="list2"><span class="blacktext">This is one black
line</span>
<li class="list2">This is another line that is much longer than
the first. But it isn't a black line since we did not specify a
style for the text that goes here other than the style we defined
for the list.
</ul>
</body>
</html>
The lists from the above example would look like this:
o This is one black
line
o This is another line
that is much longer
than the first. But it
isn't a black line
since we did not
specify a style for
the text that goes
here other than the
style we defined for
the list.
This is one black
line
This is another line
that is much longer
than the first. But it
isn't a black line
since we did not
specify a style for
the text that goes
here other than the
style we defined for
the list.
CCS LAYERS
With CSS, it is possible to work with layers: pieces of HTML that are placed on top
of the regular page with pixel precision.
The advantages of this are obvious - but once again Netscape has very limited
support of CSS layers - and to top it off: the limited support it offers is quite often
executed with failures.
So the real challenge when working with layers is to make them work on Netscape
browsers as well.
LAYER BASICS
First look at this example:
LAYER 1 ON TOP:
LAYER 1
LAYER 2
LAYER 2 ON TOP:
LAYER 1
LAYER 2
Second look at the code:
LAYER 1 ON TOP:
<div style="position:relative; fontsize:50px; zindex:2;">LAYER
1</div>
<div style="position:relative; top:50; left:5; color:red; font
size:80px; zindex:1">LAYER 2</div>
LAYER 2 ON TOP:
<div style="position:relative; fontsize:50px; zindex:3;">LAYER
1</div>
<div style="position:relative; top:50; left:5; color:red; font
size:80px; zindex:4">LAYER 2</div>
To create a layer all you need to do is assign the position attribute to your style.
The position can be either absolute or relative.
The position itself is defined with the top and left properties.
Finally, which layer is on top is defined with the zindex attribute.
RELATIVE VERSUS ABSOLUTE POSITIONING
You can either position your layer calculated from the upper left corner(absolute)
or calculated from the position where the layer itself is inserted (relative).
position:absolute
If you define the position to be absolute it will be calculated from the upper left
corner of the page - unless the layer is defined inside another layer, in which case it
will be calculated from the upper left corner of the parent layer.
position:relative
If you define the position to be relative it will be relative to the position of the tag that
carries the style.
That is, if you add a relatively positioned layer in the middle of the page, then the
position will be calculated from that exact spot in the middle of your page where it
was added.
DEFINING THE POSITION
While the position property indicates the out spring of our coordinate system,
the left and top properties defines the exact position of our layer.
You can enter both positive and negative values for these properties - thus it is
possible to place content higher up and further to the left on the page than the
logical position in the HTML code where the layer itself is defined.
In other words: at the bottom of your HTML code you can enter the code for a
layer that is positioned at the top of the resulting page.
Both left and top properties can be dynamically changed
with JavaScript.
This means that it is possible to move things around on the screen even after the
page has finished loading.
In fact this technique can be (and has been) used to create entire games. Other
uses might be menus that pop out when a mouse-over is detected on a link. The
possibilities are endless - but in order to keep things simple, we will not dig into
details about these dynamic HTML effects here.
POSITION IN THE STACK THE ZINDEX
Picture a game of 52 cards. If the ace of spades was at the bottom we'd say it
had zindex:1;. If the queen of hearts was at the top we'd say she had z
index:52;.
Try looking at the code example at the top of this page again, and see how we
used the z-index to put LAYER 1 on top in the first example, while we had LAYER 2
on top in the second example.
Very interesting possibilities arise from the fact that the z-index can be
dynamically changed with JavaScript.
You could create several "pages" on top of each other - all on the same page.
When the user clicks a link it will simply move the layer with the desired info on top
rather than load a new page. The techniques to create effects like that goes
beyond the scope of pure CSS however, so for now we will just refer to DHTML
(Dynamic HTML - a mix between JavaScript and CSS) for further explorations into
that area.
VISIBILE VERSUS HIDDEN LAYERS
A final property is the visibility property that will allow you to create invisible
layers.
Why would anyone want to create an invisible layer? Well, imagine the
possibilities it gives for adding pop-up menus and other cool effects on your pages.
With dynamic HTML it is possible to change the visibility of a layer according to
certain events. The most common use of this is to create menus that pop out (like
the sub menus in the START menu on Windows). The trick behind these menus is
to create all submenus as invisible layers. Then, when a mouse-over is detected on
a link the according layer becomes visible. (Sounds pretty easy - actually is pretty
easy - except when tried on Netscape browsers that seem to have only a vague
idea of the logic behind CSS layers).
Valid values for the visibility property are: visible and hidden.
This example shows how to create an invisible layer:
<div style="position:relative; visibility:hidden;">HELLO!!!</div>
PRACTICAL USE OF LAYERS
It's obvious that layers offer certain possibilities for precise positioning of static
elements on your pages.
In reality layers are often used in more dynamic ways:
Flying elements/banners on the page
Games where you move an object around
Menus that pop out when triggered
Menus that become visible when triggered
While all of these effects might seem pretty cool and useful - the fact is that the
web is filled with dynamic effects that are much more cool than the average visitor
really likes.
The more you create a unique interface for your site the more you force the visitor
to forget about what she is used to. Do not underestimate the power of sticking to
the elements that the average visitor is accustomed to.
What's cool about creating an effect that makes 90% of all web designers clap their
hands while leaving 90% of non-web designers confused or disappointed?
In any case, judge for yourself if a certain effect is really needed - and if so: do not
hesitate to use it.
CURSORS
Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors
defined with CSS.
Although the cursors will not have the customized look in other browsers it usually
doesn't ruin anything. These browsers will simply show the normal arrow-cursor
which would be same case as if you refrained from customizing cursors at all.
So unless the page really doesn't work without the customized cursor there
shouldn't be technical reasons for choosing not to.
However there might be other reasons for thinking twice before adding custom
cursor to your pages. Many users are easily confused or irritated when a site
breaks the standard user interface.
CURSOR PROPERTIES
Look
Values
Look
NS IE Example
default
TEST
6+
4+ cursor:default
crosshair
TEST
6+
4+ cursor:crosshair
hand
TEST
pointer
TEST
Cross browser
TEST
move
TEST
6+
4+ cursor:move
text
TEST
6+
4+ cursor:text
wait
TEST
6+
4+ cursor:wait
4+ cursor:hand
6+
cursor:pointer
4+ cursor:pointer;cursor:hand
help
TEST
6+
4+ cursor:help
n-resize
TEST
6+
4+ cursor:nresize
ne-resize
TEST
6+
4+ cursor:neresize
e-resize
TEST
6+
4+ cursor:eresize
se-resize
TEST
6+
4+ cursor:seresize
s-resize
TEST
6+
4+ cursor:sresize
sw-resize
TEST
6+
4+ cursor:swresize
w-resize
TEST
6+
4+ cursor:wresize
nw-resize
TEST
4+
4+ cursor:nwresize
progress
TEST
6+ cursor:progress
not-allowed
TEST
6+ cursor:notallowed
no-drop
TEST
6+ cursor:nodrop
vertical-text
TEST
6+ cursor:verticaltext
all-scroll
TEST
6+ cursor:allscroll
col-resize
TEST
6+ cursor:colresize
row-resize
TEST
6+ cursor:rowresize
cursor:url(uri)
TEST
6+ cursor:url(uri)
4P:problems, 4M:Mac only, 4W:Windows only
ADDING A CUSTOMIZED CURSOR
The syntax for a customized cursor is this:
(Position the mouse over each link to see the effect)
Selector {cursor:value}
For example:
<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>
The links from the above example would look like this:
CROSS LINK
HELP LINK
REDEFINING THE CURSOR FOR ENTIRE PAGES
If you want to redefine the cursor so that it's not only showing up when moved over
a link, you simply specify the desired cursor using the body-selector.
For example:
<html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>
<body>
<b>
SOME TEXT
<br>
<a href="mypage.htm">ONE LINK</a>
<br>
<a href="mypage.htm">ANOTHER LINK</a>
</b>
</body>
</html>
Click here to open a window that shows the result of the above example.
REDEFINING THE CURSOR FOR AREAS ON A PAGE
If you want one look of the cursor in one area of the page and another look of the
cursor in another area you can do it with context dependant selectors.
This way, you create different styles for links, that are dependant on the context.
Now if the context is set with a dummy tag, such as <span> you don't have to
specify the desired style each and every time there is a link in the section.
For example:
<html>
<head>
<style type="text/css">
.xlink A{cursor:crosshair}
.hlink A{cursor:help}
</style>
</head>
<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>
The links from the above example would look like this:
CROSS LINK 1
CROSS LINK 2
CROSS LINK 3
HELP LINK 1
HELP LINK 2
HELP LINK 3
