Scribd
Upload
15 views

CSS Lists Links and Navigation Bars

Lists in HTML can be styled with CSS using properties like list-style-type. list-style-type can be used to change list item markers to symbols like numbers, letters, and images. Other list styling properties include list-style-position to control placement of the marker, and list-style to combine type and position settings. CSS also allows styling of different link states with pseudo-classes like a:link, a:visited, a:hover, and a:active.

Uploaded by

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

CSS Lists Links and Navigation Bars

Lists in HTML can be styled with CSS using properties like list-style-type. list-style-type can be used to change list item markers to symbols like numbers, letters, and images. Other list styling properties include list-style-position to control placement of the marker, and list-style to combine type and position settings. CSS also allows styling of different link states with pseudo-classes like a:link, a:visited, a:hover, and a:active.

Uploaded by

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

Lists :

lists are made in html. we can style them in css with : list-style-type
Example: .anyClass { list-style-type : lower-roman ; }

This styles lists item markers (bullets, numbers, letters on the left of
every list item.)

Other used markers are:


lower-alpha, lower-greek, upper-alpha, upper-roman
-----------------------

For unordered list we can specify the shape we want to use as bullets.
default is disc thers are square or circle.

In addtition we can set its value to none. This we do when making


navigation bars.
{ list-style-type : none ; }
---------------------

To choose your own list style (like custom image)


{list-style-imag : url(folderName/myImage.gif)}

list-style-position property determine whether the list mark will be


closer to list item (inside) or farther (outside)

{list-style-position : inside ;}
-------------------

Comined (property and values) :

{list-style : shape position }


==========================================

Styling CSS links :

1. link (unvisited)
2. visited
3. hover (when a user put the mouse over it)
4. active (when clicked)

a { text-decoration : none ; } //This will select every link

a:link {color : blue ; }

a:visited {color : Orange ; }

a:hover {color : grey ; }

a:active {color : pink ; }

=========================================

Navigational Bars :

<ul>
<li><a>index.html</a>Home</li>
<li><a>...</a>...</li>
<li><a>...</a>...</li>
<li><a>...</a>...</li>
</ul>

You might also like