Scribd
Upload
3 views

Introduction to Internet Programming (CN381) CSS Tutorial (1)

Uploaded by

Yousef Abdulsatar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Introduction to Internet Programming (CN381) CSS Tutorial (1)

Uploaded by

Yousef Abdulsatar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Introduction to internet programming (CN281): CSS Tutorial

Table of Contents
1. Introduction................................................................................................................ 2

2. Selectors ..................................................................................................................... 3

3. CSS Text .................................................................................................................... 4

4. CSS Colors................................................................................................................. 6

5. CSS Links ................................................................................................................ 11

6. CSS Lists ................................................................................................................. 15

7. CSS Cursors ............................................................................................................. 18

8. CSS Borders............................................................................................................. 22

9. Conclusion ............................................................................................................... 23

Faculty of IT, Benghazi University 1


Introduction to internet programming (CN281): CSS Tutorial

1. Introduction

CSS stands for Cascading Style Sheets. It is a way to divide the content from the layout
on web pages.

How it works:
A style is a definition of fonts, colors, etc.

Each style has a unique name: a selector.

The selectors and their styles are defined in one place.

In your HTML contents you simply refer to the selectors whenever you want to activate a
certain style.

For example:
Instead of defining fonts and colors each time you start a new table cell, you can define a
style and then, simply refer to that style in your table cells.

Compare the following examples of a simple table:


Classic HTML
<table>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial"


size="2" color="red"><b>this is line 1</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial"


size="2" color="red"><b>this is line 2</b></font></td></tr>

<tr><td bgcolor="#FFCC00" align="left"><font face="arial"


size="2" color="red"><b>this is line 3</b></font></td></tr>

</table>

With CSS (assuming that a selector called subtext is defined)


<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table>

While CSS lets you separate the layout from the content, it also lets you define the
layout much more powerfully than you could with classic HTML.

Faculty of IT, Benghazi University 2


Introduction to internet programming (CN281): CSS Tutorial

2. Selectors

Selectors are the names that you give to your different styles.
In the style definition you define how each selector should work (font, color etc.).
Then, in the body of your pages, you refer to these selectors to activate the styles.
For example:
<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red; font-size:22px; font-family:arial; text-
decoration:underline}
</style>

</HEAD>

<BODY>
<b>This is normal bold</b><br>
<b class="headline">This is headline style bold</b>
</BODY>

</HTML>

In this case B.headline is the selector.


The above example would result in this output:
This is normal bold
This is headline style bold

There are three types of selectors:

HTML selectors
Used to define styles associated to HTML tags. (A way to redefine the look of tags)

Class selectors
Used to define styles that can be used without redefining plain HTML tags.

ID selectors
Used to define styles relating to objects with a unique ID (most often layers)

Faculty of IT, Benghazi University 3


Introduction to internet programming (CN281): CSS Tutorial

Where to Place It

CSS can be added to your pages at 3 different levels.


It is possible to create CSS styles that only work for the single tag it is defined for.
Single tag CSS is used when the style is used in a single place on the entire site.
Usually a certain style appears more than once on your pages, and thus you should use
the second technique: adding styles that are defined once for the entire page.

If, however, that certain style is used on more than a single page, you should use the
third - and most powerful - technique described: adding styles that are defined once for
the entire site.

3. CSS Text
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
font-family font-family:arial
font name 4+ 4+ font-family:arial,
generic font 4+ 4+ helvetica
font-weight normal 4+ 4+ font-weight:normal
bold 4+ 4+ font-weight:bold
bolder 4W 4+ font-weight:bolder
lighter 4W 4+ font-weight:lighter
100-900 4+ 4+ font-weight:250

font-size normal 4+ 4+ font-size:normal


length 4+ 4+ font-size:14px
length 4+ 4+ font-size:14pt
absolute 4+ 4+ font-size:xx-small
absolute 4+ 4+ font-size:x-small
absolute 4+ 4+ font-size:small
absolute 4+ 4+ font-size:medium
absolute 4+ 4+ font-size:large
absolute 4+ 4+ font-size:x-large
absolute 4+ 4+ font-size:xx-large
relative 4+ 4+ font-size:smaller
font-size:larger
relative 4+ 4+
font-size:75%
percentage 4+ 4+

4P: problems, 4M: Mac only, 4W: Windows only


Assigning All Font Attributes At Once
An example of a typical font definition would be:

Faculty of IT, Benghazi University 4


Introduction to internet programming (CN281): CSS Tutorial

B {font-family:arial, helvetica; font-size: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


line-height normal 4W 4+ line-height:normal
number 4+ 4P line-height:1.5
length 4+ 4+ line-height:22px
percentage 4+ 4P line-height:150%
text-decoration none 4+ 4M text-decoration:none
underline 4+ 4+ text-decoration:underline
overline 4W text-decoration:overline
line-through 4+ 4+ text-decoration:line-through
text-decoration:blink
blink 4+
text-transform none 4+ 4W text-transform:none
capitalize 4+ 4W text-transform:capitalize
uppercase 4+ 4W text-transform:uppercase
lowercase 4+ 4W text-transform:lowercase

text-align left 4+ 4+ text-align:left


right 4+ 4+ text-align:right
center 4+ 4+ text-align:center

4P:problems, 4M:Mac only, 4W:Windows only

Note:

line-height :
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

Faculty of IT, Benghazi University 5


Introduction to internet programming (CN281): CSS Tutorial

between the lines.

text-transform :
Capitalize sets the first letter of each word in uppercase.
Uppercase forces all letters to uppercase.
Lowercase forces all letters to lowercase.

text-indent :
Use this to indent the first word of a paragraph.

white-space :
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

4. CSS Colors

Faculty of IT, Benghazi University 6


Introduction to internet programming (CN281): CSS Tutorial

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 Values NS IE
color <color> 4+ 4+

background-color transparent 4+ 4+
<color> 4+ 4+

background-image
none 4+ 4+
url(<URL>) 4+ 4+
repeat 4+ 4+
background-repeat repeat-x 4+ 4+
repeat-y 4+ 4+
no-repeat 4+ 4+

background-attachment scroll 4+
fixed 4+
<percentage> 4+
<length> 4+
top 4+
background-position center 4+
bottom 4+
left 4+
right 4+
<background-color> 4+ 4+
<background-image> 4+ 4+
background <background-repeat> 4+ 4+
<background-attachment> 4+
<background-position> 4+

4P:problems, 4M:Mac only, 4W:Windows only

Faculty of IT, Benghazi University 7


Introduction to internet programming (CN281): CSS Tutorial

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%);}

Faculty of IT, Benghazi University 8


Introduction to internet programming (CN281): CSS Tutorial

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 BODY selector:

BODY {background-color:#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 {background-image:url(myimage.gif);}

You can control the repetition of the image with the background-repeat property.
background-repeat:repeat
Tiles the image until the entire page is filled, just like an ordinary background image
in plain HTML.

background-repeat:repeat-x
Repeats the image horizontally - but not vertically.

background-repeat:repeat-y
Repeats the image vertically - but not horizontally.

background-repeat:no-repeat
Does not tile the image at all.

Faculty of IT, Benghazi University 9


Introduction to internet programming (CN281): CSS Tutorial

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 {background-image:url(myimage.gif); background-position:
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 {background-image:url(myimage.gif); background-attachment:


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) repeat-y fixed 75px
75px;}

Faculty of IT, Benghazi University 10


Introduction to internet programming (CN281): CSS Tutorial

5. CSS Links

Css has several options for redefining the style of links.

Link Properties
Property Values NS IE
A:link <style> 4+ 4+
A:visited <style> 4+ 4+
A:active <style> 4+ 4+
A:hover <style> 6+ 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).

Faculty of IT, Benghazi University 11


Introduction to internet programming (CN281): CSS Tutorial

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 {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: 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 and overlined.
Example: Underline/Overline
<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: 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 {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style>

Faculty of IT, Benghazi University 12


Introduction to internet programming (CN281): CSS Tutorial

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; text-decoration: none}
A:visited {background: #FFCC00; text-decoration: none}
A:active {background: #FFCC00; text-decoration: none}
A:hover {background: #FFCC00; font-weight: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 {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}

Faculty of IT, Benghazi University 13


Introduction to internet programming (CN281): CSS Tutorial

.class2 A:link {text-decoration: underline overline}


.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
.class2 A:hover {text-decoration: 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

Faculty of IT, Benghazi University 14


Introduction to internet programming (CN281): CSS Tutorial

6. CSS Lists

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 Values NS IE
disc 4+ 4W
circle 4+ 4W
square 4+ 4W
decimal 4+ 4W
list-style type lower-roman 4+ 4W
upper-roman 4+ 4W
lower-alpha 4+ 4W
upper-alpha 4+ 4W
none 4W

list-style image none 4W


url(<url>) 4W

list-style position outside 4W


inside 4W
<list-style type> 4W
list-style <list style position> 4W
<list-style image> 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, list-style is an overall selector that let you define all list related styles
at once.

Faculty of IT, Benghazi University 15


Introduction to internet programming (CN281): CSS Tutorial

The three basic selectors are:


list-style type
Defines the look of the bullets used in your list.

list-style image
Let's you use a custom graphic for bullets.

list-style 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 list-style property.

For example:
<html>
<head>
<style type="text/css">
LI.list1 {list-style: circle outside; color:green;}
LI.list2 {list-style: 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>

Faculty of IT, Benghazi University 16


Introduction to internet programming (CN281): CSS Tutorial

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.

Faculty of IT, Benghazi University 17


Introduction to internet programming (CN281): CSS Tutorial

7. CSS 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 NS IE Example

default 6+ 4+ cursor:default

crosshair 6+ 4+ cursor:crosshair

hand 4+ cursor:hand

pointer 6+ cursor:pointer

Cross browser 4+ cursor:pointer;cursor:hand

move 6+ 4+ cursor:move

text 6+ 4+ cursor:text

wait 6+ 4+ cursor:wait

help 6+ 4+ cursor:help

n-resize 6+ 4+ cursor:n-resize

ne-resize 6+ 4+ cursor:ne-resize

e-resize 6+ 4+ cursor:e-resize

se-resize 6+ 4+ cursor:se-resize

s-resize 6+ 4+ cursor:s-resize

sw-resize 6+ 4+ cursor:sw-resize

Faculty of IT, Benghazi University 18


Introduction to internet programming (CN281): CSS Tutorial

w-resize 6+ 4+ cursor:w-resize

nw-resize 4+ 4+ cursor:nw-resize

progress 6+ cursor:progress

not-allowed 6+ cursor:not-allowed

no-drop 6+ cursor:no-drop

vertical-text 6+ cursor:vertical-text

all-scroll 6+ cursor:all-scroll

col-resize 6+ cursor:col-resize

row-resize 6+ cursor:row-resize

cursor:url(uri) 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>

Faculty of IT, Benghazi University 19


Introduction to internet programming (CN281): CSS Tutorial

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>

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}

Faculty of IT, Benghazi University 20


Introduction to internet programming (CN281): CSS Tutorial

.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

Faculty of IT, Benghazi University 21


Introduction to internet programming (CN281): CSS Tutorial

8. CSS Borders

Borders can be applied to most HTML elements within the body. To make a border
around an element, all you need is border-style. The values can be solid, dotted, dashed,
double, groove, ridge, inset and outset. border-width sets the width of the border, which
is usually in pixels. There are also properties for border-top-width, border-right-width,
border-bottom-width and border-left-width. Finally, border-color sets the colour.

Add the following code to the CSS file:

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

This will make a red dashed border around all HTML secondary headers (the h2
element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and
right (these having over-ridden the 3 pixel wide width of the entire border).

Faculty of IT, Benghazi University 22


Introduction to internet programming (CN281): CSS Tutorial

9. Conclusion

CSS is an excellent addition to plain HTML.


With plain HTML you define the colors and sizes of text and tables throughout your
pages. If you want to change a certain element you will therefore have to work your way
through the document and change it.

With CSS you define the colors and sizes in "styles". Then as you write your documents
you refer to the styles. Therefore: if you change a certain style it will change the look of
your entire site.

Another big advantage is that CSS offers much more detailed attributes than plain
HTML for defining the look and feel of your site.

Finally, CSS can be written so the user will only need to download it once - in the
external style sheet document. When surfing the rest of your site the CSS will be cached
on the users computer, and therefore speed up the loading time.

The only reason not to use CSS in your design is not knowing how!

Faculty of IT, Benghazi University 23

You might also like