xp reviepositioning objects with css • the different positioning styles in the original css1...

Tutorial 7 New Perspectives on HTML and XHTML,

Comprehensive

1

XP

Review

• What these styles mean?

<style>

h1, h2, h3 { text-align:center}

#head {font-weight:bold}

.red {color:red}

li a {line-height: 200%; text-decoration: none}

#head a {font-family: sans-serif}

</style>


Comprehensive

2

XPApplying a style to a class and element


Comprehensive

3

XPSizing Elements and Floating an Element

• You can define the width of columns in a columnar layout using: width: value

• You can use CSS to set an element’s height using: height: value

• You can float a paragraph using: float: position (position = none, left,

right or inherit)


Comprehensive

4

XP

Working with the div Element

• The div element is a generic block-level

element.

<div>

content

</div>


Comprehensive

5

XP

Working with the Box Model

• The box model is an element composed of

four sections:

– Margin (between the element and the other

content)

– Border (of the box)

– Padding (between the element’s content and the box’s border)

– Content (of the element)


Comprehensive

6

XP

The Box Model


Comprehensive

7

XP

If blocks are not aligning right

• Specify both margin and padding for the

block

• For example: IE sets indentation for list items

by setting the size of the left margin, whereas

Mozilla uses left padding. For this reason

you need to change both values in order to

have them show consistently in all browsers


Comprehensive

8

XP

Working with the Box Model

• Styles to set padding are similar to styles to set margins:– padding-top: value

– padding-right: value

– padding-bottom: value

– padding-left: value

• padding: top right bottom left

• padding: value (same value for top, right, bottom and left)


Comprehensive

9

XP

Setting the Display Style

Some Values of the display style


Comprehensive

10

XP

Border Styles


Comprehensive

11

XP

Border Style Types


Comprehensive

12

XP

Border Shortcuts

• border-top: width style color

• border-right: width style color

• border-bottom: width style color

• border-left: width style color

• border: width style color

• Ex: border-top: 3px dashed black

• Ex: border: 2px double blue


Comprehensive

13

XPUsing Pseudo-Classes and Pseudo-Elements

• A pseudo-class is a classification of an element based on its status, position, or current use in the

document.


Comprehensive

14

XPUsing Pseudo-Classes and Pseudo-Elements

• Rollover effects can be created using pseudo-classes.

• Pseudo-elements are elements based on information about an element’s content, use or position.

Ex: Ex: Ex: Ex: #firstp:first-letter {float: left; font-size:400%}


Comprehensive

15

XP

Positioning Objects with CSS

• The different positioning styles in the original

CSS1 specifications were known as CSS-

Positioning or CSS-P.

• To place an element at a specific position on a page use:position: type; top: value; right: value;

bottom: value; left: value;

(type=absolute, relative, static, fixed, or

inherit)

xp reviepositioning objects with css • the different positioning styles in the original css1...

Documents