Cascading Style Sheets

1
Cascading Style Sheets
More about selectors
2
Cascading Style Sheets
Other pseudoclasses
3
Cascading Style Sheets and Positioning
You can take control of positioning elements
using style properties. Normal document flow is
the default way the browser lays out elements. In
other words if you have a lth1gt element followed
by a ltpgt, the lth1gt is placed on the document
first, then the ltpgt element is placed after it
starting on a new line with appropriate white
space introduced. Using the style property
position absolute The element is removed from
normal document flow and is placed at an absolute
position some units away from the top of the
document and the left/right of the
document. Using the style property position
relative The element is positioned by
calculating its position relative to where it
would normally be positioned using Normal
document flow.
4
Cascading Style Sheets and Positioning
ltstyle type "text/css"gt p font-size 30pt
color black font-weight bold font-family
'Bradley Hand ITC',cursive .absolute1
position absolute top 20px left
20px z-index 1 .absolute2 position
absolute top 120px left 40px
z-index 2 lt/stylegt
The position property allows for positioning of
an element. The value absolute means the position
is defined as the distance from the upper left
corner of the window.
The z-index property allows layering of multiple
images.The images are layered such that images
with lower z-index values are placed under images
with higher z-index values. So, z-index 2 will
be in front of z-index 1.
5
Cascading Style Sheets and Positioning
ltbodygt ltp class "absolute1" gt ltimg
src "bgpic.jpg" alt "First positioned
image" /gt lt/pgt ltp class "absolute2 gt
Positioned Text lt/pgt lt/bodygt
This example shows how these style rules are
applied.
6
Cascading Style Sheets and Positioning
.absolute1 position absolute top 20px
left 20px z-index 1 .absolute2
position absolute top 120px left 40px
z-index 2
ltp class absolute1gt ltimg src
"bgpic.jpg" alt "First positioned image"
/gt lt/pgt ltp class "absolute2"gt Positioned
Text lt/pgt
7
Cascading Style Sheets and Positioning
.relative1 position relative top 20px
left 20px z-index 1 .relative2
position relative top 120px left 40px
z-index 2
ltp class"relative1" gt ltimg src "bgpic.jpg"
alt "First positioned image" /gt lt/pgt ltp
class"relative2" gt Positioned Text lt/pgt
8
Cascading Style Sheets and Positioning
.relative1 position relative top 20px
left 20px z-index 1 .relative2
position relative top -300px left
40px z-index 2
ltp class"relative1" gt ltimg src "bgpic.jpg"
alt "First positioned image" /gt lt/pgt ltp
class"relative2" gt Positioned Text lt/pgt
9
Cascading Style Sheets and Span
ltheadgt lttitlegtEmbedded Styles spanlt/titlegt
ltstyle type "text/css"gt p font-size 18pt
margin 10px color black font-weight
bold font-family Times New Roman,
serif .hilite font-family 'Curlz MT,
fantasy color blue background-color
FFCCCC lt/stylegt lt/headgt ltbodygt ltpgtIt
was a dark and rainy night,ltbr /gt ltspan
classhilitegt when cloudy was the
weather,lt/spangtltbr /gt I chanced upon an old
man,ltbr /gt dressed all in leather. lt/pgt lt/bodygt
The span element allows you to delimit a portion
of content. Use the style rules to define how
this content is to be rendered.
10
Cascading Style Sheets and Span
.hilite font-family 'Curlz MT, fantasy
color blue background-color FFCCCC
ltpgtIt was a dark and rainy night,ltbr /gt ltspan
classhilitegt when cloudy was the
weather,lt/spangtltbr /gt I chanced upon an old
man,ltbr /gt dressed all in leather. lt/pgt
11
Cascading Style Sheets and Backgrounds
12
Cascading Style Sheets and Backgrounds
ltstyle type "text/css"gt / set background
image upper left corner / body
background-image url(thanksgiving.gif)
background-position 10 10
background-repeat no-repeat
background-attachment fixed / set
paragraph text font,size,color / p
font-size 1.5em color 330066
font-family Verdana, Arial, sans-serif
lt/stylegt
ltbodygt ltpgtAn image can be placed as the
background of ltbr /gt the web page. Any
elements placed in the ltbr /gt body will use
normal document flow and ltbr /gt lay on top of
the background image. lt/pgt lt/bodygt
13
Cascading Style Sheets and Backgrounds
ltstyle type "text/css"gt / set background
image upper left corner / body
background-image url(thanksgiving.gif)
background-position 10 10
background-repeat no-repeat
background-attachment fixed / set
paragraph text font,size,color / p
font-size 1.5em color 330066
font-family Verdana, Arial,
sans-serif lt/stylegt
/ in the same directory / background-image
url(thanksgiving.gif) / some where else on
web / background-image url(http//www.usd.edu
/images/pictures/students/mainDistanceEd3.jpg)
14
Cascading Style Sheets and Backgrounds
ltstyle type "text/css"gt / set background
image upper left corner / body
background-image url(thanksgiving.gif)
background-position 10 10
background-repeat no-repeat
background-attachment fixed / set
paragraph text font,size,color / p
font-size 1.5em color 330066
font-family Verdana, Arial,
sans-serif lt/stylegt
/ Initial value is 0 0 which is LEFT,
TOP/ background-position 10 10 / keywords
are top, center, bottom, left, center, right
/ background-position center / keywords in
combination left top and top left are same
/ background-position top left
15
Cascading Style Sheets and Backgrounds
ltstyle type "text/css"gt / set background
image upper left corner / body
background-image url(thanksgiving.gif)
background-position 10 10
background-repeat no-repeat
background-attachment fixed / set
paragraph text font,size,color / p
font-size 1.5em color 330066
font-family Verdana, Arial,
sans-serif lt/stylegt
/ Image appears only once on the
page/ background-repeat no-repeat / Image is
repeated along the y axis / background-repeat
repeat-y / Image is repeated along the x axis
/ background-repeat repeat-x
16
Cascading Style Sheets and Backgrounds
ltstyle type "text/css"gt / set background
image upper left corner / body
background-image url(thanksgiving_small.gif)
background-position top left
background-repeat repeat-y
background-attachment fixed / set
paragraph text font,size,color / p
font-size 1.5em margin-left 10
color 330066 font-family Verdana,
Arial, sans-serif lt/stylegt
17
Cascading Style Sheets and Backgrounds
ltstyle type "text/css"gt / set background
image upper left corner / body
background-image url(thanksgiving_small.gif)
background-position top left
background-repeat repeat-x
background-attachment fixed / set
paragraph text font,size,color / p
font-size 1.5em margin-top 10
color 330066 font-family Verdana,
Arial, sans-serif lt/stylegt
18
Cascading Style Sheets and Backgrounds
Note that it is hard to read the text.
/ Image repeats on both x and y axis
/ background-repeat repeat
19
Cascading Style Sheets and Backgrounds
ltstyle type "text/css"gt / set background
image upper left corner / body
background-image url(thanksgiving_small.gif)
background-position top left
background-repeat repeat-x
background-attachment fixed
/ Determines scrolling behavior of image. If
fixed the image stays in place and when
scrolling, text scrolls over the image
/ background-attachment fixed / When
scrolling, the image scrolls with the text
/ background-attachment scroll