Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

Internet_Programming(IP)_Unit_04

Uploaded by

Vikas Pareek
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Internet_Programming(IP)_Unit_04

Uploaded by

Vikas Pareek
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

CSS (Cascading Style Sheets)

What is CSS

 CSS stands for Cascading Style Sheets


 Styles define how to display HTML elements
 CSS is a presentation definition language that is used to control the layout of HTML
documents by attaching styles.
 CSS was developed by W3C in 1997 and supported by all browsers.
 CSS comes in different versions including CSS1, CSS2, CS2.1, CSS3

CSS Rules

Eg: p {color: Red;}


h1 { font-style:italic; color: green;}
body
{
color: #FF00FF;
font-size: 16pt;
font-family: Arial;
}

Calling Method of CSS


The element Selector
Applied at every similar tag
<head>
<style type="text/css">
P {color:#F00; font-size:24px;}
p.right{text-align:right; color:#FF0; font-size:14px;}
p.left{text-align:left; color:#F0F; font-size:10px;}
p.Center{text-align:center; color:#F0F; font-size:10px;}
h1{color:#00F; font-style:italic; font-size:14px;}
hr{color:#FF0;}
h2{background-color:#0FF;}
</style>
</head>
<body>
<p>This is the first CSS Program</p>
<p class="right">This is the first CSS Program</p>
<p class="Center">This is the first CSS Program</p>
<p class="left">This is the first CSS Program</p>
<h1>Hi This is Dr. Sanjay Tejasvee</h1>
<hr />
<h2>Welcome BCA II Year to CSS</h2>
</body>

The class Selector


With the class selector we can define different styles for the same type of HTML element.
Eg. If we would like to have two types of paragraphs in our document: one right-aligned
paragraph, and one center-aligned paragraph.
p.right { text-align : right; }
p.center { text-align : center; }
We have to use the class attribute in our HTML document:
<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

The id Selector
We can also define styles for HTML elements with the id selector. The id selector is defined
as a #. The style rule below will match the element that has an id attribute with a value of
"yellow":
#yellow {color:yellow}
Note: Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments

Comments are used to explain our code, and may help us when we edit the source code at a
later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and
ends with "*/", like this:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial
}
CSS How To Use CSS
There are four ways of inserting a style sheet:

 Inline style
 Internal style sheet
 External style sheet
 Imported sytle Sheet

Inline Styles
 An inline style loses many of the advantages of style sheets by mixing content with
presentation. To use inline styles we use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change the color and the
left margin of a paragraph:
<p style="color:sienna; margin-left:20px">This is a CSS demo of Pragraph</p>
 Note: If the link to the external style sheet is placed after the internal style sheet in HTML
<head>, the external style sheet will override the internal style sheet!

Internal Style Sheet


An internal style sheet should be used when a single document has a unique style. We
define internal styles in the head section of an HTML page, by using the <style> tag, like
this:-

<head>
<style type="text/css">
{
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")
}
</style>
</head>

External Style Sheet


An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, we can change the look of an entire Web site by changing one file. Each page
must link to the style sheet using the <link> tag.
The <link> tag goes inside the head section.
<head>
<link type=”text/css” href=”try.css” rel=”stylesheet” >
</head>
An external style sheet can be written in any text editor. The file should not contain any
html tags. Our style sheet should be saved with a .css extension. An example of a style
sheet file is shown below:
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
Do not leave spaces between the property value and the units! "margin-left:20 px" (instead
of "margin-left:20px") will work in IE, but not in Firefox or Opera.

Imported Style Sheet


In addition to linking an external style sheet using <link> element,
we can also use @Import rule. The @ Import rule allow us to import style
rules from other style sheet. Such as:
<head>
<style type="text/css">
@import url(“cssfilenamewithpath.css”);
h1 (color:Red;}
….
</head>
</style>
CSS Background

CSS background properties are used to define the background effects of an element.
CSS properties used for background effects
• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background Color

The background-color property specifies the background color of an element. The background
color of a page is defined in the body selector:

body {background-color:#b0c4de}

The background color can be specified by:

 name - a color name, like "red"


 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

In the example below, the h1, p, and div elements have different background colors:

h1 {background-color:#6495ed}
p {background-color:#e0ffff}
div {background-color:#b0c4de}

Example:

<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>My CSS web page!</h1>
<p>Hello world! This is a W3Schools.com example.</p>
</body>
</html>

Background Image

The background-image property specifies an image to use as the background of an element. By


default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

body {background-image:url('bgdesert.jpg')}

<html>
<head>
<style type="text/css">
body {background-image:url('paper.gif')}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.

<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

If the image is repeated only horizontally (repeat-x), the background will look better:

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
<html>
<head>
<style type="text/css">
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Background Image - Set position and no-repeat

When using a background image, use an image that does not disturb the text.

Showing the image only once is specified by the background-repeat property:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

The position of the image is specified by the background-position property:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:top right;
}

<html>
<head>
<style type="text/css">
body
{
Background-image:url('img.png');
Background-repeat: no-repeat;
Background-position: top right;
Margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>set background no-repeat, set postion example.</p>
<p>Now the background image is only show once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will
never disturb the text.</p>
</body>
</html>

All CSS Background Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS


background Sets all the background background-color 1
properties in one declaration background-image
background-repeat
background-attachment
background-position
inherit
background-attachment Sets whether a background image scroll 1
is fixed or scrolls with the rest of fixed
the page inherit
background-color Sets the background color of an color-rgb 1
element color-hex
color-name
transparent
inherit
background-image Sets the background image for an url(URL) 1
element none
inherit
background-position Sets the starting position of a top left 1
background image top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit
background-repeat Sets if/how a background image repeat 1
will be repeated repeat-x
repeat-y
no-repeat
inherit

CSS Text
The CSS text properties define the appearance of text:

text example

Text Color

The color property is used to set the color of the text. The color can be specified by:

 name - a color name, like "red"


 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

The default color for a page is defined in the body selector.

body {color:blue}
h1 {color:#00ff00}
h2 {color:rgb(255,0,0)}

<html>
<head>
<style type="text/css">
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is
defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
Text Alignment

The text-align property is used to set the horizontal alignment of a text.Text can be centered, or
aligned to the left or right, or justified.

When text-align is set to "justify", each line is stretched so that every line has equal width, and the
left and right margins are straight (like in magazines and newspapers).

h1 {text-align:center}
p.date {text-align:right}
p.main {text-align:justify}

<html>
<head>
<style type="text/css">
h1 {text-align:center}
p.date {text-align:right}
p.main {text-align:justify}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my wenger and more vulnerable years my father gave me some advice that
I've been turning over in my mind ever since. 'Whenever we feel like criticizing anyone,' he told
me, just remember that all the people in this world haven't had the advantages that we've
had.'</p>
<p><b>Note:</b> Try to resize the browser window to see how justify works.</p>
</body>
</html>

Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

It can also be used to decorate text:

<html>
<head>
<style type="text/css">
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

p.uppercase {text-transform:uppercase}
p.lowercase {text-transform:lowercase}
p.capitalize {text-transform:capitalize}

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of
each word.

<html>
<head>
<style type="text/css">
p.uppercase {text-transform:uppercase}
p.lowercase {text-transform:lowercase}
p.capitalize {text-transform:capitalize}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

Text Indentation

The text-indentation property is used to specify the indentation of the first line of a text.

p {text-indent:50px}

<html>
<head>
<style type="text/css">
p {text-indent:100px}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been
turning over in my mind ever since. 'Whenever we feel like criticizing anyone,' he told me, just
remember that all the people in this world haven't had the advantages that we've had.'</p>
</body>
</html>

All CSS Text Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS


color Sets the color of a text color 1
direction Sets the text direction ltr 2
rtl
line-height Sets the distance between lines normal 1
number
length
%
letter-spacing Increase or decrease the space between characters normal 1
length
text-align Aligns the text in an element left 1
right
center
justify
text-decoration Adds decoration to text none 1
underline
overline
line-through
blink
text-indent Indents the first line of text in an element length 1
%
text-shadow none
color
length
text-transform Controls the letters in an element none 1
capitalize
uppercase
lowercase
unicode-bidi normal 2
embed
bidi-override
vertical-align Sets the vertical alignment of an element baseline 1
sub
super
top
text-top
middle
bottom
text-bottom
length
%
white-space Sets how white space inside an element is handled normal 1
pre
nowrap
word-spacing Increase or decrease the space between words normal 1
length

CSS Font

CSS font properties define the font family, boldness, size, and the style of a text.

CSS Font Families


p{font-family:"Times New Roman",Georgia,Serif}

<html>
<head>
<style type="text/css">
p.serif {font-family:"Times New Roman",Georgia,Serif;
font color=”red”;
font size=36px}
p.sansserif{font-family:Arial,Verdana,Sans-serif }
div.msc{ font-family:Arial,Verdana,Sans-serif}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>

</body>
</html>
Font Style

The font-style property is mostly used to specify italic text.This property has three values:

 normal - The text is shown normally


 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

<html>
<head> <style type="text/css">
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
</style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">This is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>
</html>

Font Size

The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, we should not use font
size adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

 Sets the text to a specified size


 Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
 Absolute size is useful when the physical size of the output is known

Relative size:

 Sets the size relative to surrounding elements


 Allows a user to change the text size in browsers

If we do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).

Setting Text Size Using Pixels

Setting the text size with pixels, gives we full control over the text size:

h1 {font-size:40px}f
h2 {font-size:30px}
p {font-size:14px}

<html>
<head>
<style>
h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

All CSS Font Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS


font Sets all the font properties in one font-style 1
declaration font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
inherit
font-family Specifies the font family for text family-name 1
generic-family
inherit
font-size Specifies the font size of text xx-small 1
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
inherit
font-style Specifies the font style for text normal 1
italic
oblique
inherit
font-variant Specifies whether or not a text should be normal 1
displayed in a small-caps font small-caps
inherit
font-weight Specifies the weight of a font Normal,bold,bolder 1
,lighter
100
200
300
400
500
600
700
800
900
inherit

CSS Box Model

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking
about design and lawet.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of:
margins, borders, padding, and the actual content.The box model allows us to place a border
around elements and space elements in relation to other elements.

The image below illustrates the box model:


Explanation of the different parts:

 Margin - Clears an area around the border. The margin does not have a background color,
and it is completely transparent
 Border - A border that lies around the padding and content. The border is affected by the
background color of the box
 Padding - Clears an area around the content. The padding is affected by the background
color of the box
 Content - The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, we need to know how
the box model works.

CSS Border

The CSS border properties define the borders around an element:

Border Style

The border-style property specifies what kind of border to display.

None of the other border properties will have any effect unless border-style is set.

border-style Values

none: Defines no border

dotted: Defines a dotted border

dashed: Defines a dashed border

solid: Defines a solid border


Border Width

The border-width property is used to set the width of the border.The width is set in pixels, or by
using one of the three pre-defined values: thin, medium, or thick.

Note: The "border-width" property does not work if it is used alone. Use the "border-style"
property to set the borders first.

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p><b>Note:</b> The "border-width" property does not work if it is used alone. Use the "border-
style" property to set the borders first.</p>
</body>
</html>
Border Color
The border-color property is used to set the color of the border. The color can be set by:

 name - specify a color name, like "red"


 RGB - specify a RGB value, like "rgb(255,0,0)"
 Hex - specify a hex value, like "#ff0000"

We can also set the border color to "transparent".


Note: The "border-color" property does not work if it is used alone. Use the "border-style" property
to set the borders first.

<html>
<head>
<style type="text/css">
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-
style" property to set the borders first.</p>
</body>
</html>
Border - Individual sides

In CSS it is possible to specify different borders for different sides:

<html>
<head>
<style type="text/css">
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>

The border-style property can have from one to four values.

 border-style:dotted solid double dashed;


o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

border-style:dotted solid double;


o top border is dotted
o right and left borders are solid
o bottom border is double

border-style:dotted solid;
o top and bottom borders are dotted
o right and left borders are solid

border-style:dotted;
o all four borders are dotted

All CSS Border Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS


border Sets all the border properties in one border-width 1
declaration border-style
border-color
border-bottom Sets all the bottom border properties in one border-bottom-width 1
declaration border-bottom-style
border-bottom-color
border-bottom-color Sets the color of the bottom border border-color 2
border-bottom-style Sets the style of the bottom border border-style 2
border-bottom-width Sets the width of the bottom border border-width 1
border-color Sets the color of the four borders color_name 1
hex_number
rgb_number
transparent
inherit
border-left Sets all the left border properties in one border-left-width 1
declaration border-left-style
border-left-color
border-left-color Sets the color of the left border border-color 2
border-left-style Sets the style of the left border border-style 2
border-left-width Sets the width of the left border border-width 1
border-right Sets all the right border properties in one border-right-width 1
declaration border-right-style
border-right-color
border-right-color Sets the color of the right border border-color 2
border-right-style Sets the style of the right border border-style 2
border-right-width Sets the width of the right border border-width 1
border-style Sets the style of the four borders none 1
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
border-top Sets all the top border properties in one border-top-width 1
declaration border-top-style
border-top-color
border-top-color Sets the color of the top border border-color 2
border-top-style Sets the style of the top border border-style 2
border-top-width Sets the width of the top border border-width 1
border-width Sets the width of the four borders thin 1
medium
thick
length
inherit

CSS Margin

The CSS margin properties define the space around elements.

Margin

The margin clears an area around an element (outside the border). The margin does not have a
background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A
shorthand margin property can also be used, to change all margins at once.

Margin - Individual sides

In CSS, it is possible to specify different margins for different sides:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>

Example :

<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>
</html>

The margin property can have from one to four values.

margin:25px 50px 75px 100px;

o top margin is 25px


o right margin is 50px
o bottom margin is 75px
left margin is 100px

margin:25px 50px 75px;


o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

margin:25px 50px;
o top and bottom margins are 25px
o right and left margins are 50px

margin:25px;
o all four margins are 25px

All CSS Margin Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS


margin A shorthand property for setting the margin margin-top 1
properties in one declaration margin-right
margin-bottom
margin-left
margin-bottom Sets the bottom margin of an element auto 1
length
%
margin-left Sets the left margin of an element auto 1
length
%
margin-right Sets the right margin of an element auto 1
length
%
margin-top Sets the top margin of an element auto 1
length
%
CSS Padding

The CSS padding properties define the space between the element border and the element
content.

Padding

The padding clears an area around the content (inside the border) of an element. The padding is
affected by the background color of the element.The top, right, bottom, and left padding can be
changed independently using separate properties. A shorthand padding property can also be used,
to change all paddings at once.

Padding - Individual sides

In CSS, it is possible to specify different padding for different sides:

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.padding
{
padding-top:15px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>

Example:

<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.padding
{
padding:50px 25px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="padding">This is a paragraph with specified paddings.</p>
</body>
</html>

The padding property can have from one to four values.

 padding:25px 50px 75px 100px;


o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px

padding:25px 50px 75px;


o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px

padding:25px 50px;
o top and bottom paddings are 25px
o right and left paddings are 50px

padding:25px;
o all four paddings are 25px

All CSS Padding Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS


padding A shorthand property for setting all the padding padding-top 1
properties in one declaration padding-right
padding-bottom
padding-left
padding-bottom Sets the bottom padding of an element length 1
%
padding-left Sets the left padding of an element length 1
%
padding-right Sets the right padding of an element length 1
%
padding-top Sets the top padding of an element length 1
%

CSS List
The CSS list properties allow us to place the list item marker, change between different list item
markers, or set an image as the list item marker.

List

In HTML, there are two types of lists:

 unordered list - the list items are marked with bullets (typically circles or squares)
 ordered list - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as list item markers.

Different List Item Markers

It is possible to specify the type of list item marker with the list-style-type property:

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}

ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}

<html>
<head>
<style type="text/css">
ul.circle {list-style-type:circle}
ul.square {list-style-type:square}
ol.upper-roman {list-style-type:upper-roman}
ol.lower-alpha {list-style-type:lower-alpha}
</style>
</head>
<body>
<p>Type circle:</p>
<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type square:</p>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Type upper-roman:</p>
<ol class="upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<p>Type lower-alpha:</p>
<ol class="lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

Some of the values are for unordered lists, and some for ordered lists.

Unordered List - Possible Values

Value Description
None No marker
Disc Default. The marker is a filled circle
Circle The marker is a circle
Square The marker is a square

Ordered List - Possible Values

Value Description
None No marker
Circle The marker is a circle
Disc The marker is a filled circle. This is default
Square The marker is a square
decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)

lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)


lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)
lower-latin The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)
upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
upper-latin The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)

Internet Explorer does not support all property values for ordered lists.

Using an Image as List Item Marker

It is also possible to use an image as a list item marker: ul


{
list-style-image:url('arrow.gif');
}

<html>
<head>
<style type="text/css">
ul
{
list-style-image:url('arrow.gif');
list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
li
{
background-image:url(arrow.gif);
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}

Example explained:

 For ul:
o Set the list-style-type to none to remove the list item marker
o Both padding and margin must be set to 0px for cross-browser compatibility
 For li:
o Set the URL of the image, and show it only once (no-repeat)
o Use the background-position property to place the image where we want it (left 0px
and down 5px)
o Use the padding-left property to position the text in the list

All CSS List Properties

The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or
CSS2).

Property Description Values CSS


list-style Sets all the properties for a list in one list-style-type 1
declaration list-style-position
list-style-image
inherit
list-style-image Specifies an image as the list-item marker URL 1
none
inherit
list-style-position Specifies where to place the list-item marker inside 1
outside
inherit
list-style-type Specifies the type of list-item marker none 1
disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
inherit

You might also like