3. Cascading Style Sheets (CSS)
An extension (addition) to HTML which allows us to
style our web pages
Provides more detailed attributes to elements than the
ones defined in standard HTML
Styles are defined once and used any number of times
and in several contexts
Clearly separate content from its presentation
Saves a lot of work
Especially in website maintenance and upgrading
3 Web Programming
4. Cascading Style Sheets (CSS):
is a simple mechanism for adding style (e.g. fonts, colors,
layouts) to Web documents.
Styles provide powerful control over the presentation of
web pages.
Web Programming4
5. CSS (cont’d)
CSS styles can be specified:
Inside a single HTML element (inline)
Inside the <head> element of an HTML document (internal)
In an external CSS file (external)
Rules of precedence application:
Inline styles
Internal styles (Embedded)
External styles
Browser default
From highest to lowest
5 Web Programming
6. A style sheet consists of a set of rules.
Each rule consists of one or more selectors and a
declaration block.
A declaration block consists of a list of declarations in
curly braces ({}).
Each declaration consists of a property, a colon (:), a
value, then a semi-colon (;).
Web Programming6
7. CSS Syntax
selector {property: value;}
Web Programming7
8. Guy-Vincent Jourdan :: CSI 3140 :: based on
Jeffrey C. Jackson’s slides
CSS Syntax
Parts of a style rule (or statement)
9. The selector is normally the HTML element you want to style.
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration
on each line, like this:
p
{
color:red;
text-align:center;
}
Selectors can be grouped (separated by comma)
Ex. p, div, table { align: center }
Web Programming9
10. CSS (cont’d)
Types of selectors
HTML tag names
Class selectors
Id selectors
HTML tag names as selectors
used to override the default attributes of HTML tags
Format: tag_name {property : value}
Ex. a { color: red;
text-decoration: overline
}
10 Web Programming
11. CSS (cont’d)
The class selector
define generic styles that can be applied to different HTML elements
applied to the class attribute of HTML elements
The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is
most often used on several elements.
This allows you to set a particular style for many HTML
elements with the same class.
The class selector uses the HTML class attribute, and is
defined with a "."
11 Web Programming
12. Format:
1. Styles for a particular element
tag_name.style_name { property: value }
Ex. p.color { color: green }
<p class=“color”>some text</p>
2. Styles for all elements
.style_name { property: value }
Ex. .color { color: blue }
<div class=“color”>some text</div>
<table class=“color”>…</table>
Web Programming12
13. In the example below, all HTML elements with
class="center" will be center-aligned:
.center {text-align:center;}
You can also specify that only specific HTML elements
should be affected by a class.
In the example below, all p elements with class="center"
will be center-aligned:
p.center {text-align:center;}
Web Programming13
14. CSS (cont’d)
The Id selector
unlike the class selector, the Id selector always applies to only
one element
The id selector is used to specify a style for a single,
unique element.
The id selector uses the id attribute of the HTML
element, and is defined with a "#".
14 Web Programming
15. Format:
1. Styles for a particular element
tag_name#style_name { property: value }
Ex. p#color { color: green }
<p id=“color”>some text</p>
2. Styles for all elements
#style_name { property: value }
Ex. #color { color: blue }
<div id=“color”>some text</div>
<table id=“color”>…</table> possible ???
Web Programming15
16. CSS (cont’d)
CSS comments
Format:
/* comment text */
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
16 Web Programming
17. Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
Web Programming17
18. Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with
presentation.
style information is directly attached to the HTML elements they affect
higher cascade precedence than the other specification methods
declaring an individual element’s format:
Attribute style
CSS (style) property
Followed by a colon and a value
Web Programming18
<tag_name style=“property:value; property: value;”> … </tag_name>
Ex. <table style=“background-color: yellow”>… </table>
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
19. inline.html
(1 of 2)
1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 6.1: inline.html -->
6 <!-- Using inline styles -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Inline Styles</title>
11 </head>
12
13 <body>
14
15 <p>This text does not have any style applied to it.</p>
16
17 <!-- The style attribute allows you to declare -->
18 <!-- inline styles. Separate multiple styles -->
19 <!-- with a semicolon. -->
20 <p style = "font-size: 20pt">This text has the
21 <em>font-size</em> style applied to it, making it 20pt.
22 </p>
23
20. 24 <p style = "font-size: 20pt; color: #0000ff">
25 This text has the <em>font-size</em> and
26 <em>color</em> styles applied to it, making it
27 20pt. and blue.</p>
28
29 </body>
30 </html>
21. Internal or Embedded Style Sheets
this method can only specify style information for the current
document:
1:1 relationship
However, the same document may have other style definitions applied to
it
1:M relationship
embedded style sheet rule will have higher precedence than
external style sheet rule, if there is a conflict between styles
embedded style sheet rule will have lower precedence than an
inline style sheet rule
22. Internal / Embedded Style Sheets
Embed an entire CSS document in an XHTML document’s head
section inside a style element
Attribute type
Multipurpose Internet Mail Extensions (MIME) type
describes the type of the document’s content
text/css is the type for CSS document
Style properties are defined for:
Existing defined elements, such as p (paragraph), h3 (header), li (Iist)
or any other
Style class that can be applied to either:
Any existing type of element in the body of the document or
One specific element in the document
23. Internal or Embedded Style Sheets
An internal style sheet should be used when a single document has a unique style. You define
internal styles in the head section of an HTML page, by using the <style> tag, like this:
defined in the <head> element
<style type=“text/css”>
{property:value; ...}
</style>
Eg:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Web Programming23
25. External Style Sheet
An external style sheet is ideal when the style is applied
to many pages. With an external style sheet, you 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:
defined in a separate CSS file
linked to an HTML document using the <link> tag
<link rel=“stylesheet” type=“text/css” href=“url”>
changes to the styles in the external CSS file will be
automatically reflected in all the HTML document in which the
style is attached
Web Programming25
26. CSS (cont’d)
An external style sheet can be written in any text editor.
The file should not contain any html tags. Your 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 add a space between the property value and the
unit (such as margin-left:20 px). The correct way is:
margin-left:20px
26 Web Programming
27. styles.css
(1 of 1)
1 /* Fig. 6.4: styles.css */
2 /* An external stylesheet */
3
4 a { text-decoration: none }
5
6 a:hover { text-decoration: underline;
7 color: red;
8 background-color: #ccffcc }
9
10 li em { color: red;
11 font-weight: bold;
12 background-color: #ffffff }
13
14 ul { margin-left: 2cm }
15
16 ul ul { text-decoration: underline;
17 margin-left: .5cm }
30. Some common CSS properties
Background
CSS background properties are used to define the background
effects of an element
CSS properties used for background effects:
background-color: color
background-image: url(url)
Sets the background image for an element
background-repeat: repeat_type {repeat, repeat-x, repeat-y, no-
repeat}
background-attachment: attachment_type {scroll, fixed}
Sets whether a background image is fixed or scrolls with the rest
of the page (default: scroll)
30 Web Programming
31. 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;}
With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Web Programming31
32. 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('paper.gif');}
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image
both horizontally and vertically.
Web Programming32
34. Background - Shorthand property
To shorten the code, it is also possible to specify all the properties in
one single property. This is called a shorthand property.
The shorthand property for background is simply "background":
Background Image - Set position and 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:right top;
} Web Programming34
35. The background-position property sets the starting
position of a background image.
Values of background-position
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Web Programming35
36. body {
background:#ffffff url('img_tree.png') no-repeat right top;
}
When using the shorthand property the order of the
property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is
missing, as long as the ones that are present are in this
order.
Web Programming36
37. Text
color: 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);}
Web Programming37
38. The text-decoration property
Specifies the decoration added to text.
Note: The color of the decoration should be set by the "color"
property.
Set the text decoration for h1, h2, h3, and h4 elements:
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
Web Programming38
39. direction: direction {ltr, rtl} borwser issue??
letter-spacing: value
text-align: alignment {left, right, center, justify}
text-decoration: decoration {none, underline, overline, line-
through, blink}
white-space: Sets how white space inside an element is
handled
normal
pre
nowrap
Web Programming39
40. Example:
<!DOCTYPE html>
<html>
<head>
<style>
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 younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like criticizing
anyone,' he told me, 'just remember that all the people in this world haven't had the
advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
</body>
</html>
Web Programming40
41. CSS (cont’d)
text-indent: value
The text-indent property specifies the indentation of the
first line in a text-block.
Note: Negative values are allowed. The first line will be
indented to the left if the value is negative.
Value: Defines a fixed indentation in px, pt, cm, em, etc.
(16px=1em).
41 Web Programming
42. text-transform: transform {none, capitalize, uppercase,
lowercase}
The text-transform property controls the capitalization
of text.
Capitalize: Transforms the first character of each word
to uppercase
Uppercase: Transforms all characters to uppercase
lowercase :Transforms all characters to lowercase
Example:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
Web Programming42
43. word-spacing: value
The word-spacing property increases or decreases the
white space between words.
Note: Negative values are allowed.
Example
Specify that the space between words in paragraphs
should be 30 pixels:
p
{
word-spacing:30px;
}
Web Programming43
44. CSS Font
CSS font properties define the font family, boldness,
size, and the style of a text.
Font Family
The font family of a text is set with the font-family
property.
Note: If the name of a font family is more than one
word, it must be in quotation marks, like font-family:
"Times New Roman".
More than one font family is specified in a comma-
separated list:
Web Programming44
45. • Times New Roman
Georgia
• Arial
Verdana
• Courier New
Lucida Console
• Monospace
• Sans-serif
Eg:
p{font-family:"Times New Roman", Times, serif;}
Web Programming45
46. 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;}
Web Programming46
47. Font Size
The font-size property sets the size of the text.
Setting the text size with pixels, gives you full control
over the text size:
Eg:
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
(16px=1em)
Web Programming47
48. d
An em is equal to the current font-size, for instance, if
the font-size of the document is 12pt, 1em is equal to
12pt.
Ems are scalable in nature, so 2em would equal 24pt, .
5em would equal 6pt Web Programming48
49. Pixels (px): Pixels are fixed-size units that are used in
screen media (i.e. to be read on the computer screen).
One pixel is equal to one dot on the computer screen
(the smallest division of your screen’s resolution). Many
web designers use pixel units in web documents in order
to produce a pixel-perfect representation of their site as
it is rendered in the browser. One problem with the
pixel unit is that it does not scale upward for visually-
impaired readers or downward to fit mobile devices.
Web Programming49
50. Points (pt): Points are traditionally used in print media
(anything that is to be printed on paper, etc.). One point
is equal to 1/72 of an inch. Points are much like pixels, in
that they are fixed-size units and cannot scale in size
Web Programming50
51. So, What’s the Difference?
It’s easy to understand the difference between font-size
units when you see them in action. Generally,1em =
12pt = 16px = 100%. When using these font-sizes, let’s
see what happens when you increase the base font size
(using the body CSS selector) from 100% to 120%.
Web Programming51
52. As you can see, both the em and percent units get larger
as the base font-size increases, but pixels and points do
not. It can be easy to set an absolute size for your text,
but it’s much easier on your visitors to use scalable text
that can display on any device or any machine. For this
reason, the em and percent units are preferred for web
document text.
Web Programming52
53. font-style: style {normal, italic, oblique}
font-weight: weight {normal, bold, bolder, lighter, 100, 200,
…}
font-size: size
font-family: font_list (in order of precedence, separated by
comma)
Borders
Margins
Padding
List properties
Web Programming53
54. Borders
Box model
describes the rectangular boxes that are generated for
elements
Web Programming54
55. Margin - Clears an area around the border. The margin
does not have a background color, it is completely
transparent
Border - A border that goes 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
Web Programming55
56. Width and Height of an Element
Important: When you set the width and height
properties of an element with CSS, you just set the width
and height of the content area. To calculate the full size
of an element, you must also add the padding, borders
and margins.
Web Programming56
57. The total width of the element in the example below is
300px
width:250px;
padding:10px;
border:5px solid gray;
margin:10px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border +
right border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top
border + bottom border + top margin + bottom margin
Web Programming57
58. Margin properties:
margin-top
margin-right
margin-bottom
margin-left
margin
These properties set the top, right, bottom, and left
margin of a box.
Eg: H1 { margin-top: 2em }
Web Programming58
59. The margin property is a shorthand property for setting
margin-top, margin-right, margin-bottom and
margin-left at the same place in the style sheet.
(top->right->bottom->left)
If there is only one value, it applies to all sides.
If there are two values, the top and bottom margins are
set to the first value and the right and left margins are set
to the second.
If there are three values, the top is set to the first value,
the left and right are set to the second, and the bottom is
set to the third.
Web Programming59
60. If there are four values, they apply to the top, right,
bottom, and left, respectively.
Eg:
1) BODY { margin: 2em } /* all margins set to 2em
*/
2) BODY { margin: 1em 2em } /* top & bottom = 1em,
right & left = 2em */
3) BODY { margin: 1em 2em 3em } /* top=1em,
right=2em, bottom=3em, left=2em */
Web Programming60
61. The last rule of the example above is equivalent to the
example below:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em; /* copied from opposite side (right) */
}
Web Programming61
62. Border properties
border-top-width ={thin,thick,medium,length}
border-right-width
border-bottom-width
border-left-width
border-width
Border width
These properties set the width of the top, right, bottom,
and left border of a box
Web Programming62
63. The border's thickness has an explicit value. Explicit border widths
cannot be negative
Eg:
H1 { border-width: thin } /* thin thin thin thin
*/
H1 { border-width: thin thick } /* thin thick thin
thick */
H1 { border-width: thin thick medium }
Web Programming63
65. border-style
The border-style property specifies what kind of border to
display
None of the border properties will have ANY effect unless the
border-style property is set!
border-style values:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders
are the same as the border-width value
Web Programming65
66. groove: Defines a 3D grooved border. The effect
depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on
the border-color value
inset: Defines a 3D inset border. The effect depends on
the border-color value
outset: Defines a 3D outset border. The effect depends
on the border-color value
Web Programming66
67. Border - Individual sides
In CSS it is possible to specify different borders for
different sides:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Web Programming67
68. The example above can also be set with a single
property:
Example
border-style:dotted solid;
Web Programming68
69. The border-style property can have from one to four values.
border-style:dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
border-style:dotted solid double;
top border is dotted
right and left borders are solid
bottom border is double
border-style:dotted solid;
top and bottom borders are dotted
right and left borders are solid
border-style:dotted;
all four borders are dotted
The border-style property is used in the example above. However, it also works with border-
width and border-color.
Web Programming69
70. Border - Shorthand property
To shorten the code, it is also possible to specify all the
individual border properties in one property. This is
called a shorthand property.
The border property is a shorthand for the following
individual border properties:
border:<border-width>|<border-style>|<color>
The 'border' property is a shorthand property for setting the same width, color, and style for all four
borders of a box.
border-width
border-style (required)
border-color
Example
border:5px solid red;
Web Programming70
73. Unlike the shorthand 'margin' and 'padding' properties,
the 'border' property cannot set different values on the
four borders. To do so, one or more of the other border
properties must be used.
For example, the first rule below is equivalent to the set
of four rules shown after it:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
Web Programming73
74. CSS Pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors.
Syntax
The syntax of pseudo-classes:
selector:pseudo-class {property:value;}
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:
Example
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Web Programming74
75. :first-letter
The :first-letter selector is used to add a style to the first
letter of the specified selector.
Example
Select and style the first letter of every <p> element:
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
Web Programming75
76. Note: The following properties can be used with :first-
letter:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if float is 'none')
text-transform
line-height
float
clear
Web Programming76
77. :first-line Selector
:first-line selector is used to add a style to the first line of the specified selector.
Note: The following properties can be used with :first-line:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
Web Programming77
78. Example
Select and style the first line of every <p> element:
p:first-line
{
background-color:yellow;
color:#ff0000;
font-variant:small-caps
}
Web Programming78
79. Note: The "first-line" pseudo-element can only be used with block-level
elements.
Note: The following properties apply to the "first-line" pseudo-element:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
Web Programming79
80. CSS - The :before Pseudo-element
The ":before" pseudo-element can be used to insert
some content before the content of an element.
The following example inserts an image before each <h1>
element:
Example
h1:before
{
content:url(smiley.gif);
}
Web Programming80
82. CSS - The :after Pseudo-element
The ":after" pseudo-element can be used to insert some
content after the content of an element.
The following example inserts an image after each <h1>
element:
Example
h1:after
{
content:url(smiley.gif);
}
Web Programming82
83. display property
The display property defines how a certain HTML
element should be displayed.
Web Programming83
none
The element will not be displayed
at all
box (or flex-box)
The element is displayed as a block-
level flex container box
block
The element is displayed as a block-
level element (like paragraphs and
headers)
flex
The element is displayed as a block-
level flex container box
inline
This is default. The element is
displayed as an inline-level element
(like span)
84. list-item
The element is displayed as
a list-item, which means
that it has a bullet in front
of it
table
The element is displayed as
a table
Web Programming84
86. Positioning
The CSS positioning properties allow you to position an
element
There are four different positioning methods.
position:static
Postion:relative
Postion:absolut
Postion:fixed
Web Programming86
87. position:static
The default positioning for all elements is position:static,
which means the element is not positioned and occurs
where it normally would in the document.
Normally you wouldn't specify this unless you needed to
override a positioning that had been previously set.
Eg:
.static { position: static; }
<div class="static">static is the default value. An element
with position: static; is not positioned in any special way. A
static element is said to be not positioned and an element
with its position set to anything else is said to be positioned.
</div>
Web Programming87
88. position:relative
If you specify position:relative, then you can use top or
bottom, and left or right to move the element relative to
where it would normally occur in the document.
Let's move div down 20 pixels, and to the left 40 pixels:
Eg:
Web Programming88
#div { position:relative; top:20px; left:-40px; }
.relative1 {
position: relative;
}
.relative2 { position: relative; top: -20px; left: 20px; background-color: white;
width: 500px;
}
89. <div class="relative1">relative behaves the same as static unless you add some extra
properties.
</div>
<div class="relative2">Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal position. Other
content will not be adjusted to fit into any gap left by the element.
</div>
Web Programming89
90. position:absolute
When you specify position:absolute, the element is
removed from the document and placed exactly where
you tell it to go.
Eg: Let's move div a to the top right of the page:
Web Programming90
#div { position:absolute; top:0; right:0; width:200px; }
92. Web Programming92
<div class="relative">
This element is relatively-positioned. If this element was position:
static; its absolutely-positioned child would escape and would be
positioned relative to the document body.
<div class="absolute">
This element is absolutely-positioned. It's positioned relative to its
parent.
</div>
</div>
93. Fixed Positioning
An element with fixed position is positioned relative to
the browser window.
It will not move even if the window is scrolled:
Example
Web Programming93
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
94. Overlapping Elements
When elements are positioned outside the normal flow, they can overlap
with other elements.
The z-index property specifies the stack order of an element (which
element should be placed in front of, or behind, the others)
An element can have a positive or negative stack order:
Example
Web Programming94
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
96. CSS Lists
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
List
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the
list item marker.
Web Programming96
97. Different List Item Markers
The type of list item marker is specified with the list-style-type
property:
Example
Web Programming97
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
98. An Image as The List Item Marker
To specify an image as the list item marker, use the list-
style-image property:
Example
Web Programming98
ul
{
list-style-image: url('sqpurple.gif');
}
99. CSS list-style-position Property
The list-style-position property specifies if the list-item
markers should appear inside or outside the content
flow.
The list-style-position property specifies if the list-item
markers should appear inside or outside the content
flow.
Web Programming99
ul1{
list-style-type:circle;
list-style-position:inside;
}
Ul2{
list-style-type:circle;
list-style-position:outside;
}
100. side
Indents the marker and the
text. The bullets appear
inside the content flow
outside
Keeps the marker to the
left of the text. The bullets
appears outside the
content flow. This is
default
Web Programming100
102. <body>
<div id="Header">
<h1>Header.com </h1>
</div>
<div id="Content">
<h1>1. Background</h1>
<p>The Computer Science program was started as one of the streams within the Department of
Mathematics, Faculty of Science, in the early 1980’s. As computers were introduced into
governmental and nongovernmental institutions, the need for trained manpower in Computer
Science was very vital. Realizing the growing need, a diploma program in Computer Science was
launched in the evening program in 1983. In addition, the Department also started to offer
Computer Science as a minor program for Physics, Statistics, and Library Science students. In 1993,
a Degree program in Computer Science was launched.
</p>
<div id="Menu">
<p><a hre="">Link 1</a></p>
<p><a hre="">Link 2</a></p>
<p><a hre="">Link 3</a></p>
<p><a hre="">Link 4</a></p>
<p><a hre="">Link 5</a></p>
<p><a hre="">Link 6</a></p>
</div>
</body>
Web Programming102
105. .content {
position:relative;
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}
#navAlpha {
position:absolute;
width:128px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
float:left;
z-index:2;
}
#navBeta {
position:absolute;
width:168px;
top:20px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:0px;
z-index:1;
}
Web Programming105
106. <div id="navAlpha">
<p><a hre="">Link 1</a></p>
<p><a hre="">Link 2</a></p>
<p><a hre="">Link 3</a></p>
<p><a hre="">Link 4</a></p>
<p><a hre="">Link 5</a></p>
<p><a hre="">Link 6</a></p>
</div>
<div class="content">
<h1>1. Background</h1>
<p>The Computer Science program was started as one of the streams within the
Department of Mathematics, Faculty of Science, in the early 1980’s. As computers were
introduced into governmental and nongovernmental institutions, the need for trained
manpower in Computer Science was very vital. Realizing the growing need, a diploma
program in Computer Science was launched in the evening program in 1983. In
addition, the Department also started to offer Computer Science as a minor program
for Physics, Statistics, and Library Science students. In 1993, a Degree program in
Computer Science was launched.
</p>
</div>
Web Programming106
107. <div class="content">
<p>The Computer Science program was started as one of the streams within the
Department of Mathematics, Faculty of Science, in the early 1980’s. As computers were
introduced into governmental and nongovernmental institutions, the need for trained
manpower in Computer Science was very vital. Realizing the growing need, a diploma
program in Computer Science was launched in the evening program in 1983.
</p>
</div>
<div class="content">
<p><a hre="">Some other links can go here..</a></p>
</div>
<div id="navBeta">
<p><a hre="">Link 1</a></p>
<p><a hre="">Link 2</a></p>
<p><a hre="">Link 3</a></p>
<p><a hre="">Link 4</a></p>
<p><a hre="">Link 5</a></p>
<p><a hre="">Link 6</a></p>
</div>
Web Programming107