Scribd
Upload
2 views

3RD LESSON 4 CSS Posiition and Float

The document provides an overview of CSS positioning properties, including static, relative, absolute, and fixed, along with their descriptions and examples. It also covers the offset property for setting distances between elements, the float property for controlling element placement, and table properties such as border-collapse and hover effects. Additionally, it explains how to create zebra-striped tables using the nth-child selector.

Uploaded by

altyj15
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
2 views

3RD LESSON 4 CSS Posiition and Float

The document provides an overview of CSS positioning properties, including static, relative, absolute, and fixed, along with their descriptions and examples. It also covers the offset property for setting distances between elements, the float property for controlling element placement, and table properties such as border-collapse and hover effects. Additionally, it explains how to create zebra-striped tables using the nth-child selector.

Uploaded by

altyj15
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS:

Positionin
1
g
2
POSITION PROPERTY
- allows placing an
object or element
precisely on a page.
There are 4 position
schemes that you can
use static, relative,
absolute and fixed.
3

CSS POSITION
PROPERTY
PROPER
TY
VALUE DESCRIPTION

position: static Default or normal position


position: relative Position relative to where
the default or normal
position of an object.
position: absolute Position would be from the
specified reference point
position: fixed The same as the absolute
position, the only
difference is that the object
is “fixed” and will not
move with the scroll action
4 Examples:
h1 { position:
absolute;
bottom: 4em;
right: 0; }
table { position:
relative;
top: 0; }
div { position:
fixed;
right: 20px;
top: 50px; }
5
OFFSET PROPERTY
- allows you to set up the
distance of the specified
element from another
element. The offset
property works together
with the position
property.
6 CSS OFFSET
PROPERTY
PROPER VALU DESCRIPTION
TY E
____px Set how far the box top
top: content is offset from another
element which may be the
edge of the page
____px Set how far the box right
right: content is offset from another
element
____px Set how far the box bottom
bottom: content is offset from another
element
____px Set how far the box left
left: content is offset from another
7
FLOAT PROPERTY
- allows you to control
where a specified block
element will be located
or placed on the page
and where the other
elements will be
positioned in relation to
the said block.
CSS FLOAT
8

PROPERTY
PROPER VALU DESCRIPTION
TY E
float: left Floats to the left and all
other elements near it
will float away from the
block
float: right Floats to the right and all
other elements near it
will float away from the
block
float: none Elements will take the
space it requires, and
9
CSS TABLE
PROPER VALU DESCRIPTION
TY E
border- collaps sets whether the table
collapse e borders should be
collapsed into a single
border
Sample:
table { border-collapse: collapse; }
border shortc Width, style and color
ut

Sample:
table { border: 1px solid blue; }
10
CSS tr:hover
PROPER VALU DESCRIPTION
TY E
Background Any highlight table rows on
-color color mouse over
Sample:
tr:hover { background-color: orange; }
11
CSS tr:nth-child()
PROPER VALU DESCRIPTION
TY E
background Any For zebra-striped tables,
-color color use the nth-
child() selector and add
a background-color to all
even (or odd) table rows:
Sample:
tr:nth-child(odd) { background-color: pink; }

You might also like