Web Design Course: CSS lecture 6

Web Programming and
Design
CSS (Cascading Style Sheet)
By: Gheyath M. Othman

CSS Lists
2
ul {
list-style: square inside url("sqpurple.gif");
}
List-style
ul {
list-style-image: url('sqpurple.gif');
}
List-style-image
ul.b {
list-style-type: square;
}
List-style-type
ul {
list-style-position: inside;
}
List-style-position
The CSS list properties allow you to:
• Set different list item markers for ordered and unordered lists.
• Set an image as the list item marker.

CSS Lists
3
Property values Description
list-style Put all properties together Sets all the properties for a list in
one declaration
list-style-image url, none Specifies an image as the list-item
marker
list-style-position Inside, outside Specifies if the list-item markers
should appear inside or outside
the content flow
list-style-type None, disc, circle, square, decimal,
decimal-leading-zero, lower-roman,
upper-roman, lower-alpha, upper-alpha,
lower-greek, lower-latin, upper-latin,
Hebrew, Armenian, Georgian, cjk-
ideographic
Specifies the type of list-item
marker
CSS List Properties

CSS Lists
4
Create Simple Menu Example
<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” href=‘style.css’>
</head>
<body>
<h1>Unordered Lists</h1>
<ul>
<li><a href="">Coffee</a></li>
<li><a href="">Tea</a></li>
<li><a href=""> Coca Cola</a></li>
</ul>
</body>
</html>
ul{
list-style-type: none;
}
ul li{display: inline;margin: 0px;}
ul li a:link{
text-decoration: none;
padding:15px;
width:90px;
height:30px;
background-color: yellow;
border-radius: 5px;
text-align: center;
font-size: 20px;
}
ul li a:hover{
background-color: green;
color: #FFF;
}
On mouse over
HTML CSS

CSS Tables
5
HTML table can be greatly improved with CSS. The CSS table properties allow you
to set the layout of a table.
Property Description Value
border Used to specify table borders in CSS, width, style, color
border-collapse sets whether the table borders are collapsed into
a single border or detached as in standard
HTML. Default value is separate.
collapse, separate
border-spacing Specifies the distance between the borders of
adjacent cells, default is zero.
Length
caption-side Specifies the placement of a table caption,
default is top
top, bottom
empty-cells Specifies whether or not to display borders and
background on empty cells in a table, default is
show
hide, show
table-layout Sets the layout algorithm to be used for a table auto, fixed

Web Design Course: CSS lecture 6

Recommended

Recommended

More Related Content

More from Gheyath M. Othman

More from Gheyath M. Othman (9)

Recently uploaded

Recently uploaded (20)

Web Design Course: CSS lecture 6