Contents
Adding style to HTML
Types of CSS styles (Inline, Embedded, and External Style Sheets)
Cascading style sheets
1
Introduction to CSS
A CSS file allows you to separate your web sites HTML content from
its style.
CSS is a web page layout method that has been added to HTML to
give web developers more control over their design and content
layout.
Using CSS allows a designer to create a standard set of commands
(either embedded inside the web page or from an external page) that
controls the style of all subsequent pages.
With CSS you can add style (fonts, colors, spacing, and size) to web
documents.
2
Cont.….
Styles sheets define HOW HTML elements are to be displayed, just
like the font tag and the color attribute in HTML.
Styles are normally saved in external .css files.
External style sheets enable you to change the appearance and layout
of all the pages in your Web, just by editing one single CSS
document!
CSS is a breakthrough in web design because it allows developers to
control the style and layout of multiple web pages all at once.
As a web developer you can define a style for each HTML element
and apply it to as many web pages as you want. 3
Benefits of CSS
Better type and layout controls - Presentational HTML never gets close to
offering the kind of control over type, backgrounds, and layout that is possible
with CSS.
Less work - You can change the appearance of an entire site by editing one
style sheet.
Potentially smaller documents and faster downloads - you can apply a
single style sheet document to all the pages in a site for further byte savings.
More accessible sites - When all matters of presentation are handled by CSS,
you can mark up your content meaningfully, making it more accessible for
non-visual or mobile devices.
Reliable browser support - Nearly every browser in current use supports all
of CSS.
4
CSS Syntax
A CSS rule has two main parts:
a selector, and
one or more declarations.
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change.
Each property has a value.
5
Cont.….
CSS declarations always ends with a semicolon, and declaration
block/groups are surrounded by curly brackets:
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;
}
6
CSS Comments
Comments are used to explain your code, and may help you when you
edit the source code at a later date.
CSS comments, like JavaScript comments, are 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*/
font-family:arial;
} 7
Linking CSS to HTML
It is possible to link CSS with your html pages in two different ways:
internal style, and
external style.
Internal CSS can be either
inline or
embedded.
Creating an Inline Style
You can apply styles to a single element using the style attribute in the
element itself. Inline styles have the structure:
<tag style=”property: value”>
Example: <h1 style="color: red">Introduction</h1>
8
Creating Embedded Styles
The CSS is put inside the <style> tag inside head section.
The format for this is shown in the example below:
<head><title></title>
<style type="text/css">
CSS Content Goes Here
</style>
</head><body>
In internal method each HTML file contains the CSS code needed to style the page.
This means any changes you want to make to one page, will have to be made to all.
This method can be good if you need to style only one page, or if you want
different pages to have varying styles.
9
Creating an External Style Sheet
An external style sheet is a separate, text-only document that contains
a number of style rules.
An external CSS file contains no HTML, only CSS.
You have to save the CSS file with the .css file extension.
You can link the external file by placing one of the following links in
the head section of every HTML file you want to style with the CSS
file.
<link rel=”stylesheet” type=”text/css” href=”filename.css”/>
10
Inheritance
An element that is directly contained within another element (with no
intervening hierarchical levels), is said to be the child of that element.
Conversely, the containing element is the parent.
For example, the em element is the child of the p element, and the p
element is its parent.
All of the elements higher than a particular element in the hierarchy
are its ancestors.
Two elements with the same parent are siblings.
11
Cont.….
Any property applied to a specific element will override the inherited values for that
property.
Example: All texts in the following page is displayed as red because of inheritance
<html><head><title> CSS </title>
<style type=”text/css”>
body { color: red;}
</style></head><body>
<h2> Well Known Novels </h2>
<p> Romeo and Juliet </p>
<p> Things Fall Apart</p>
<p>Kingdom of God is Among You</p>
</body></html>
12
Conflicting styles: the cascade
As we have learned, there are three ways to attach style information to the
source document, and they have a cascading order as well.
Generally speaking, the closer the style sheet is to the content, the more
weight it is given.
Embedded style sheets that appear right in the document in the style element
have more weight than external style sheets.
Inline styles have more weight than embedded style sheets because you can’t
get any closer to the content than a style right in the element’s opening tag.
To prevent a specific rule from being overridden, you can assign it
“importance” with the !important indicator.
13
Cont.….
If you want a rule not to be overridden by a subsequent conflicting rule,
include the !important indicator just after the property value and before the
semicolon for that rule.
For example, to make paragraph text blue always, use the following rule:
p {color: blue !important;}
Even if the browser encounters an inline style later in the document (which
should override a document-wide style sheet), like this one:
<p style="color: red">
that paragraph will still be blue, because the rule with the !important
indicator cannot be overridden by other styles in the author’s style sheet.
14
Grouped Selectors
If you ever need to apply the same style property to a number of
elements, you can group the selectors into one rule by separating them
with commas.
This one rule has the same effect as the five rules listed separately.
h1, h2, p, div, img { border: 1px solid blue; }
Grouping them makes future edits more efficient and results in a
smaller file size.
15
Rule order
If there are conflicts within style rules of identical weight, whichever
one comes last in the list wins. Take these three rules, for example:
<style type="text/css">
p { color: red; }
p { color: blue; }
p { color: green; }
</style>
In this scenario, paragraph text will be green because the last rule in
the style sheet overrides the earlier ones.
16
CSS Styling
Styling Backgrounds
Styling Text
Styling Fonts
Styling Links
Styling Lists
Styling Tables
CSS Class and ID
17
Styling Backgrounds
You can style the background of an element in one declaration with
the background property.
background: #ffffff url(path_to_image) top left no-repeat fixed;
Values:
color
image
position
repeat
attachment
Or you can set each property individually
Example: h1 { background: url(“banana.gif”) top left repeat fixed; } 18
Styling Backgrounds
Background Color
You can specifically declare a color for the background of an element.
background-color property.
Values:
color name – e.g. red, green, blue…
hexadecimal number - e.g. #ff0000, #00ff00, #0000ff…
RGB color code – e.g. rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) …
transparent
Example: <style type=”text/css”>
h1 { background-color: rgb(255, 255, 0); }
p { background-color: #0000FF; }
h2 { background-color: ”red”;}
19
</style>
Styling Backgrounds
Background Image
You can set an image for the background of an HTML element (<p>,
<h1>, <body>, <table>, etc).
background-image property.
background-image: url(path_to_image) | none;
Example: this sets background image of paragraphs
p { background-image: url(“coffee.png"); }
20
Styling Backgrounds
Background Position
You can position an image used for the background of an element using the
background-position property.
background-position: value;
Values:
top left
top center Example
top right p { background-image: url("tulips.jpg");
center left background-position: top right;
center center
}
center right
bottom left
bottom center
bottom right
21
Cont.…..
Background Attachment
Are you using an image as a background?
You can set whether the background scrolls with the page or is fixed
when the user scrolls down the page
This is done with the background-attachment property
background-attachment: value;
Values:
fixed
Scroll
22
Styling Backgrounds
Background Repeat
You can set if an image set as a background of an element is to repeat
(across=x and/or down=y) the screen.
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
Example
body { background-image: url(“coffee.png");
background-position: top right;
background-repeat: repeat;
}
23
Styling Text
Color
You can set the color of text with the following:
color: value;
Possible values are:
color name – example: red, black…
hexadecimal number – example: #ff0000, #000000
RGB color code – example: rgb(255, 0, 0), rgb(0, 0, 0)
Example:
p {color: blue;} 24
Styling Text
Letter Spacing
You can adjust the space between letters in the following manner.
Setting the value to 0 prevents the text from justifying.
You can use negative values.
Negative values make the text overlap each other.
letter-spacing: value;
Possible values are
normal
Length 0 -2 6
e.g. h2 { letter-spacing: 6; } 25
Styling Text
Word Spacing
You can adjust the space between words in the following manner. You
can use negative values.
word-spacing: value;
Possible values are : normal, length
Line height
You can set the distance between lines in the following way:
line-height: value;
Possible values are normal, number, length, percentage(%)
26
Styling Text
Text Align
You can align text with the following:
text-align: value;
Possible values are
left
right
center
Justify
Examples:
This text is aligned left.
This text is aligned center.
This text is aligned right.
27
Styling Text
Text Decoration
You can decorate text with the following:
text-decoration: value;
Possible values are
none
underline
overline
line-through
Examples:
28
Styling Text
Text Transform
You can control the case of letters in an HTML element with the
following:
text-transform: value;
Possible values are
none
capitalize
lowercase
Uppercase
e.g.
h3 { text-transform: uppercase; }
29
Styling Text
Text Indent
You can indent the first line of text in an HTML element with the following:
text-indent: value;
Possible values are
length
percentage(%)
Text Direction
You can sets the text direction
direction: value;
Possible values are
ltr (left to right)
rtl (right to left) 30
Styling Text
unicode-bidi
Possible value:
normal
embed
bidi-override
The meanings of the values are:
normal: the element does not open an additional level of embedding
with respect to the bidirectional algorithm. For inline elements, implicit
reordering works across element boundaries.
embed: if the element is inline, this value opens an additional level of
embedding with respect to the bidirectional algorithm. Inside the
element, reordering is done implicitly.
31
Styling Text
bidi-override: for inline elements this creates an override. For block container
elements, this creates an override for inline-level descendants not within another
block container element. This means that inside the element, reordering is strictly in
sequence according to the ’direction’ property; the implicit part of the bidirectional
algorithm is ignored.
For the direction property to affect reordering in inline elements, the unicode-bidi
property’s value must be embed or override.
Example:
div { direction: rtl;
unicode-bidi: bidi-override; }…
<div> Hebrew and Arabic are written from right to left. </div>
This is displayed as: 32
Styling Text
White Space
You can control the whitespace in an HTML element.
white-space: value;
Possible values are
normal
pre
nowrap
pre-wrap
pre-line
This property declares how white space(tab, space, etc) and line
break(carriage return, line feed, etc.) inside the element is handled. 33
Styling Fonts
Font
The font property can set the style, weight, variant, size, line height
and font-type:
font: [ font-style || font-variant || font-weight] || font-size [ /line-height] ||
font-family ];
Example:
font: italic bold normal small/1.4em Verdana, sans-serif;
The above would set the text of an element to an italic style a bold
weight a normal variant a relative size a line height of 1.4em and the
font to Verdana or another sans-serif typeface. 34
Styling Fonts
Font -Family
You can set what font will be displayed in an element with the font-family
property.
There are 2 choices for values:
family-name: The name of a font-family
generic family: The name of a generic-family
If you set a family name it is best to also add the generic family at the end as
this is a prioritized list.
So if the user does not have the specified font name, it will use the same
generic family.
font-family: Verdana, sans-serif;
35
Styling Fonts
Font Size
You can set the size of the text used in an element by using the font-size property.
font-size: value;
The value can be:
absolute size
relative size
length
percentage(%)
Absolute sizes are:
xx-small
x-small
small
medium
large
x-large
xx-large
36
Styling Fonts
The following table provides user agent guidelines for the absolute-
size mapping to HTML heading and absolute font-sizes
Relative sizes are:
larger
smaller
37
Styling Fonts
A relative-size is interpreted relative to the table of font sizes and the
font size of the parent element.
For example, if the parent element has a font size of medium, a value
of larger will make the font size of the current element be large.
Smaller: Sets the font-size to a smaller size than the parent element
Larger: Sets the font-size to a larger size than the parent element
38
Styling Fonts…
Length Units in CSS
It consist of the physical units (in, cm, mm, pt, pc) and the px unit:
in: inches — 1in is equal to 2.54cm.
cm: centimeters
mm: millimeters
pt: points — the points used by CSS are equal to 1/72nd of 1in.
pc: picas — 1pc is equal to 12pt.
px: pixel units — 1px is equal to 0.75pt.
39
Styling Fonts…
Example: all the following are possible
h1 { margin: 0.5in } /* inches */
h2 { line-height: 3cm } /* centimeters */
h3 { word-spacing: 4mm } /* millimeters */
h4 { font-size: 12pt } /* points */
h4 { font-size: 1pc } /* picas */
p { font-size: 12px } /* px */
40
Styling Fonts…
Font Style
You can set the style of text in a element with the font-style property:
font-style: value;
Possible values are
normal
itailc
Oblique
Font Variant
You can set the variant of text within an element with the font-variant property:
font-variant: value;
Possible values are
normal
small-caps
41
Styling Fonts…
Font Weight
You can control the weight of text in an element with the font-weight property:
font-weight: value;
Absolute values are
normal
100
200
300
400
500
600
700
800
900
Bold
Relative Values are:
lighter
bolder 42
Styling Fonts…
The font-weight property selects the weight of the font.
The values 100 to 900 form an ordered sequence, where each
number indicates a weight that is at least as dark as its predecessor.
The keyword normal is synonymous with 400, and bold is
synonymous with 700.
Keywords other than normal and bold have been shown to be often
confused with font names and a numerical scale was therefore
chosen for the 9-value list.
43
Styling Links
User agents commonly display unvisited links differently from
previously visited ones.
CSS provides the pseudo-classes ’a:link’ and ’a:visited’ to
distinguish them:
The a:link pseudo-class applies for links that have not yet been
visited.
The a:visited pseudo-class applies once the link has been
visited by the user.
The a:hover pseudo-class applies while the user designates an
element with some pointing device, but does not activate it.
The a:active pseudo-class applies while an element is being
activated by the user.
44
Styling Links…
Below are the various ways you can use CSS to style links.
a:link {
color:red;
text-decoration: overline;
}
a:visited {color: blue;}
a:hover {color: green;}
a:active {color: tan;}
Remark: You must declare the a:link and a:visited before you
declare a:hover.
Furthermore, you must declare a:hover before you can declare
a:active.
45
Styling Lists
List Style
You can control the appearance of ordered and unordered lists in one
declaration with the list-style property
list-style: value value value;
Values:
image: Specifies the type of list-item marker. Default value is "none"
position: Specifies where to place the list-item marker. Default value
is "outside"
type: Specifies the type of list-item marker. Default value is "disc"
Or you can control them individually
46
Styling Lists…
List Style Image
You can use an image for the bullet of unordered lists with the list-
style property
list-style-image: url(“path to image file”);
If you use an image, it is a good idea to declare the list-style-type
also in case the user has images turned off.
List Style Position
You can control the position of ordered and unordered lists with
the list-style-position property
list-style-position: value;
Values
inside
outside
47
Styling Lists…
List Style Type
You can control the type of bullet ordered and unordered lists use with the list-
style-type property
list-style-type: value;
Values
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
armenian
Georgian
48
Styling Tables
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td
elements:
table, th, td{
border: 1px solid blue;
Notice that the table in the example above has double borders.
This is because both the table, th, and td elements have separate
borders.
49
Styling Tables…
Collapse Borders
The border-collapse property sets whether the table borders are
collapsed into a single border or separated:
table{
border-collapse: collapse;
table, th, td{
border: 1px solid black;
}
50
Styling Tables…
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align
properties.
The text-align property sets the horizontal alignment, like left,
right, or center:
td{
text-align: right;
}
The vertical-align property sets the vertical alignment, like top,
bottom, or middle:
td {
height: 50px;
vertical-align: bottom; } 51
Styling Tables…
Table Width and Height
Width and height of a table is defined by the width and height
properties.
The example below sets the width of the table to 100%, and the height
of the th elements to 50px:
table{
width:100px;
}
th{
height:50px;
} 52
Styling Tables…
Table Padding
To control the space between the border and content in a table, use the
padding property on td and th elements:
td{
padding:15px;
}
Table Color
The color of the borders, and the text and background color of th
elements can be specified:
table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
53
CSS Class
It's excellent to be able to change every paragraph, table cell or image with one line
of CSS code.
But sometimes you'll want to change only few paragraphs or images, not all of them.
For example, paragraph can be defined in CSS file as follows:
p{
font-size: small;
color: #333333;
However, let’s say you want to change the word "sentence" in the paragraph
formatted by the above CSS to green bold text, while leaving the rest of the sentence
untouched.
This can be done by using class.
54
CSS Class…
There are two types of classes:
generic classes that can be applied to any element, and
Specific classes that can be applied only to a certain type of HTML element.
I. Generic Classes
Their selector starts with a dot (.), which states that it is a class.
You can name it anything you like:
.important { background-color: #FFFFDE; }
.emphasis { font-family: Verdana; }
.boooring { color: Gray; }
To apply a class to a certain HTML element, use its class attribute where you
state the class name without the dot.
55
CSS Class…
<div class="emphasis">The big match today …</div>
<i class="boooring">This sentence looks boring</i>
II. Specific Classes
You can also use classes which can be applied only to certain HTML elements.
Selectors of these classes start with the HTML element name, followed with the
dot and the class name:
div.big { font-weight: bold; font-size: 16pt; }
These classes can be applied only to a specified HTML element, in this case a
DIV element.
<div class="big">Big bold text.</div>
<span class="big">Normal text - class not applied.</span>
56
CSS Class…
Example: in your paragraph, you put this:
<span class="greenboldtext">sentence</span>
Then in the CSS file, add this style selector:
.greenboldtext {
font-size: small;
color: #008080;
font-weight: bold;
57
CSS ID
IDs are similar to classes, except once a specific ID has been declared it cannot be
used again within the same HTML file.
The syntax of ID selectors is very similar to classes, but instead of a dot you must
use a hash sign (#).
The HTML content is:
<div id="container"> I was asleep, but my heart was awake. </div>
The CSS that formats the HTML content:
#container{
width: 80%;
padding: 20px;
margin: auto;
border: 1px solid blue;
background: red; }
58
CSS Box Model
In CSS, the term box model is used when talking about design and
layout.
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.
59
CSS 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.
60
CSS Box Model…
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, you need to know how the box model works.
61
CSS Box Model…
Border
You can set the color, style and width of the borders around an
element in one declaration by using the shorthand border
property.
border: 1px solid #333333;
Values:
width
style
color
Or you can set each property individually 62
CSS Box Model…
Border Color
You can set the color of a border independently with the border-color
property.
border-color: value;
Values:
color name
hexadecimal number
RGB color code
transparent
63
CSS Box Model…
Border Style
You can set the style of a border independently with the border-
style property.
border-style: value;
Values:
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid 64
7. CSS Box Model…
65
CSS Box Model…
Border Width
You can set the width of a border independently with the border-width
property.
border-width: value;
Values:
Length
Thin
Medium
Thick
Or you can set the elements for each borders side individually
66
CSS Box Model…
Border Bottom
You can set the color, style and width of the bottom border around an element in one
declaration with the border-bottom property.
border-bottom: 1px solid #333333;
Values:
Width
style
color
Or you can set each value individually
Border Bottom Color
You can set the color of the bottom border around an element with the border-bottom-
color property.
border-bottom-color: value;
You can set the style of the bottom border around an element with the border-bottom-
style property:
border-bottom-style: value;
67
CSS Box Model…
Border Bottom Width
You can set the width of the bottom border around an element with
the border-bottom-width property.
border-bottom-width: value;
Border Left
You can set the color, style and width of the left border around an
element with the border-left property.
border-left: 1px solid #333333;
Values:
style
Width
color
Or you can set each value individually 68
CSS Box Model…
Border Left Color
border-left-color: value;
Border Left Style
border-left-style: value;
Border Left Width
border-left-width: value;
Border Right
border-right: 1px solid #333333;
Values:
color
style
width
Or you can set each value individually 69
CSS Box Model: CSS Margin
The margin clears an area around an element outside the border.
The margin does not have a background color, and is completely
transparent.
Property Description Values
Margin A shorthand property for setting the margin-top
margin properties in one declaration margin-right
margin-bottom
margin-left
margin-bottom Sets the bottom margin of an element auto| length | %
margin-left Sets the left margin of an element auto| length | %
margin-right Sets the right margin of an element auto| length | %
margin-top Sets the top margin of an element auto| length | %
70
• Example:
#A {
margin: 4em;
border: 1px solid red;
background: #FCF2BE;
}
#B {
margin-top: 2em;
margin-right: 250px;
margin-bottom: 1em;
margin-left: 4em;
border: 1px solid red;
background: #FCF2BE;
}
body {
margin: 0 10%;
border: 1px solid red;
background-color: #BBE09F;
}
71
CSS Box Model: CSS 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 padding at once.
Syntax:
padding: length | percentage | auto
Examples:
padding: 10px; /* Applied to all sides. */
padding: 10px 6px; /* First is top & bottom, second is left & right. */
72
CSS Box Model: CSS Padding…
Property Description Values
Padding A shorthand property for setting padding-top
all the padding properties in one padding-right
declaration padding-bottom
padding-left
padding-bottom Sets the bottom padding of an length
element %
padding-left Sets the left padding of an element length
%
padding-right Sets the right padding of an length
element %
padding-top Sets the top padding of an element length
%
73
CSS Box Model: CSS Padding…
Example:
blockquote {
padding-top: 1em;
padding-right: 3em;
padding-bottom: 1em;
padding-left: 3em;
background-color: #D098D4;
}
<body>
<blockquote>
Applying masks to the glasses is the most labor intensive
part of the process. ….
</blockquote>
74
CSS Box Model: CSS Padding…
75
CSS Display and Visibility
The display property specifies if/how an element is displayed. The
syntax is as follows:
display: none | block | inline;
A value none hides an element, and it will not take up any space.
The element will be hidden, and the page will be displayed as if the
element is not there.
A block element is an element that takes up the full width available,
and has a line break before and after it.
Examples of block elements:
<h1>
<p>
<div> 76
CSS Display and Visibility…
An inline element only takes up as much width as necessary, and
does not force line breaks.
Examples of inline elements:
<span>
<a>
Changing an inline element to a block element, or vice versa, can
be useful for making the page look a specific way, and still follow
web standards.
Example:
li { display: inline; }
77
<html>
<head>
<title>Display and Visibility</title>
<style type="text/css">
li { display: inline;}
a { display: block; }
</style>
</head>
<body>
There are different types of micro computers:
<ol>
<li>Desktop</li>
<li>Laptop</li>
<li>Palmtop</li>
</ol>
<a href="here.html"> first link </a>
<a href="there.html"> second link </a>
</body>
</html>
78
CSS Display and Visibility…
79
CSS Display and Visibility…
The visibility property specifies if an element should be visible
or hidden.
visibility: hidden | visible;
hidden hides an element, but it will still take up the same space
as before.
The element will be hidden, but still affect the layout.
80
CSS Display and Visibility…
Float
With float property, an element can be pushed to the left or right, allowing
other elements to wrap around it.
Float is very often used for images, but it is also useful when working with
layouts.
The syntax is: float: left | right | none;
The values are:
left: The element generates a block box that is floated to the left. Content flows
on the right side of the box, starting at the top (subject to the ’clear’ property).
right: Similar to ’left’, except the box is floated to the right, and content flows
on the left side of the box, starting at the top.
none: The box is not floated.
81
CSS Display and Visibility…
<html>
<head>
<title>Display and Visibility</title>
<style type="text/css">
p{
font-size: 24;
color: rgb(0,0,0);
}
.dide { float: left; }
</style>
</head>
<body>
<img class="dide" src="didessa.png">
<p> Deddessa is one of the tributaries of Blue Nile that starts from around
Wolega and flows west to join Abay. It starts from highlands of Wolega and it
is joined by many streams to form a big river before finally emptying into
Blue Nile. </p>
</body>
</html> 82
83
CSS Display and Visibility…
Positioning Basics
CSS provides several methods for positioning elements on the page.
Syntax: position: static | relative | absolute | fixed;
The values are:
static: This is the normal positioning scheme in which elements are
positioned as they occur in the normal document flow.
Static positioned elements are not affected by the top, bottom, left, and
right properties.
relative: Relative positioning moves the box relative to its original
position in the flow.
84
CSS Display and Visibility…
absolute: Absolutely positioned elements are removed from the
document flow entirely and positioned relative to a containing
element.
fixed: The distinguishing characteristic of fixed positioning is
that the element stays in one position in the window even when
the document scrolls.
Fixed elements are removed from the document flow and
positioned relative to the browser window rather than another
element in the document.
Fixed positioned elements are removed from the normal flow.
85
CSS Display and Visibility…
The actual position of an element is specified with four offset properties:
top/right/bottom/left: length | percentage | auto;
Example:
<html>
<head>
<style type=”text/css”>
span {
position: relative;
top: 30px; left: 60px;
background-color: fuchsia;
}
</style>
</head>
<body>
<p> Along the road he came upon a man who had <span>never worn any trouser
</span>, and who was trying to put on a pair. So he had fastened them to tree …
</p>
</body>
86
</html>
CSS Display and Visibility…
87
88
CSS Display and Visibility…
Z-index
When elements are positioned outside the normal flow, they can
overlap other elements.
The z-index property specifies the stack order of an element i.e.
which element should be placed in front of, or behind, the others.
Syntax: z-index: value| auto;
An element can have a positive or negative stack order.
An element with greater stack order is always in front of an element
with a lower stack order.
89
Example:
#A {
z-index: 10;
position: absolute;
top: 200px; left: 200px;
}
#B {
z-index: 5;
position: absolute;
top: 225px; left: 175px;
}
#C {
z-index: 1;
position: absolute;
top: 250px; left: 225px;
}
<body>
<p id="A"><img src="A.gif" alt="A" /></p>
<p id="B"><img src="B.gif" alt="B" /></p>
<p id="C"><img src="C.gif" alt="C" /></p>
</body> 90
CSS Display and Visibility…
91
CSS Display and Visibility…
Cursor
It is possible to set the type of cursor to be displayed on HTML
elements.
This property specifies the type of cursor to be displayed for the
pointing device.
Syntax:
cursor: url | auto | crosshair | default | pointer | move | e-resize |
ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize |
w-resize | text | wait | help; 92
93
