1. CSS Layouts
CH 13

2. Objective
CSS units
The display property
Box properties
Positioning

3. Sample Property Names and Values
CSS units
CSS properties have names and values
Sample Property Names and Values
Name
Value
display
none
font-style
Italic
margin-top
0.5in
font-size
12pt
border-style
solid
color
#CC0033
background-color
white
background-image
url(
list-style-image
url(/images/redbullet.png)
line-height
120%

4. CSS units The names are all CSS keywords Values are more diverse
Some are keywords, such as none in display or solid in border-style
Order values are numbers with units

5. CSS Units – length values
Length values - length is a scalar measure used for width, height, font size, word and letter spacing, text indentation, line height, margins, padding, border widths, and many other properties
Lengths are given as a number followed by the abbreviation for one of these units

6. CSS Units – length values
Abbrevation
Inches In
Centimeters Cm
Millimeters Mm
Points Pt
Picas Pc
Pixel Px
Ems Em
Exs ex
This rule says that the font used for the TITLE element should be
exactly 1 centimeter high
TITLE {font-size: 1cm}

7. CSS Units – length values
The units of length are divided into three classes
Absolute units—Inches, centimeters, millimeters, points, and picas
Relative units—Pixels, ems, and exs
Percentages

8. CSS Units – length values
Absolute units of length - lengths can be specified as a percentage of something
VERSE {font-size: 150%}

9. CSS Units – length values
Relative units of length – CSS support three relative units for lenghts
em - The width of the letter m in the current font
Ex - The height of the letter x in the current font
Px -The size of a pixel ( widely use in modern displays

10. CSS Units – length values
The example below set the left and right border of the PULLQUOTE
The normal purpose of ems and exs is to set a width that’s appropriate for a given font, without necessarily knowing how big the font is
PULLQUOTE { border-right-width: 2em;
border-left-width: 2em;
border-top-width: 1.5ex;
border-bottom-width: 1.5ex }

11. CSS Units – length values
Percentage units of length
VERSE {font-size: 150%}

12. CSS units - URL values
CSS properties can have URL values, including background-image, content, and list-style-image
URL can be encode in either single or double quotes
DOC {background-image: url( }
LETTER {background-image: url(/images/paper.gif) }
GAME {background-image: url(currentposition.gif)}
INSTRC {background-image: url(../images/screenshot.gif)}

13. CSS Units - Color values
One of the most widely adopted uses of CSS is applying foreground and background colors to elements on the page
Properties that take on color values include color, background-color, and border-color
CSS provides four ways to specify color: by name, by hexadecimal components, by integer components, and by percentages

14. CSS Units - Color values
CSS understands these 16 color names adopted from the Windows VGA palette
by Name
aqua
black
blue
fuchsia
gray
green
lime
maroon
olive
purple
red
silver
teal
white
yellow
navy

15. CSS Units - Color values
CSS uses a 24 bits color model and each primary color is store in 8 bits. Number can be in Decimal or hexadecimal.
Color
Decimal RGB
Hexadecimal
Percentage
Pure red
Rgb(255,0,0)
#FF0000
Rgb(100%,0%,0%)
Pure green
rgb(0,255,0) #
#00FF00
rgb(0%, 100%, 0%)
Pure blue
rgb(0,0,255)
#0000FF
rgb(0%, 0%, 100%)
White
rgb(255,255,255)
#FFFFFF
rgb(100%, 100%, 100%)
Black
rgb(0,0,0)
#000000
rgb(0%, 0%, 0%)
Light violet
rgb(255,204,255)
#FFCCFF
rgb(100%, 80%, 100%)

16. Values for the Display Property
The display property specifies which one of these an element is
Values for the Display Property
Block Level
Inline Elements
Table Parts
Invisible
block
inline
table-column
None
table
inline-table
table-cell
run-in
table-column-group
compact
table-row
table-header-group
table-row-group
table-caption

17. The Display Property cont…
Block elements are usually separated from other elements by line breaks before and after each one
Table elements are parts of a grid
Inline elements are placed one after the other in a row
Block elements are more fixed and, at most, move up and down but not left and right as content is added before and after them

18. The Display Property - Inline elements
Inline elements are laid out horizontally in a row, starting from the top of the containing
box of the surrounding page or block element and moving from left to right

19. The Display Property - Block elements
Block-level elements are laid out vertically, one on top of the other
The first block is laid out in the top left corner of the containing block; then the second block is placed below it

20. The Display Property - None
Setting display to none hides the element
An element whose display property is set to None is invisible and not rendered on the screen

21. The Display Property - Tables
Tables can be format using 10 values in CSS of the display property
✦ table
✦ inline-table
✦ table-row-group
✦ table-header-group
✦ table-footer-group
✦ table-row
✦ table-column-group
✦ table-column
✦ table-cell
✦ table-caption

22. The Display Property - Tables
SYNOPSIS {display: table}
TITLE {display: table-header}
SCENE { display: table-row}
ACT { display: table-row-group }
LOCATION, SCENE_NUMBER { display: table-cell }

23. The Display Property - List items
The list-style-type property
The list-style-type property determines the nature of the bullet character in front of each list item
Examples. See page 354 for more property
✦ disc: •
✦ circle: °
✦ square: o
✦ decimal: 1, 2, 3, 4, 5, and so on

24. The Display Property - List items
SYNOPSIS { display: block; margin-left: 0.5in }
TITLE { display: block }
ACT { display: list-item; list-style-type: none }
SCENE { display: list-item; list-style-type: square }

25. The Display Property - image
The list-style-image property
You can use a bitmapped image as the bullet
SCENE { display: list-item;
list-style-image: url(heart.jpg);
list-style-type: square }

26. Box properties

27. Box Properties cont…
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

28. Box properties – Margin
Margin properties
Margin properties control the amount of space added to the box outside its border
This can be set separately for the top, bottom, right and left margins using the
margin-top
margin-bottom
margin-right
margin-left properties

29. Box properties – Margin
Each margin can be specified as an absolute length or as a percentage of the size of the
parent element’s width

30. Box properties - Border properties
Border properties - let you specify the style, width and color of the border
Border style – by default, no border is drawn around boxes regardless of the width and color of the border
To make a border visible, you must change the border-style property of the box from its default value of none to one of these 10 values in the list

31. Box properties - Border properties
Most boxes don’t have border. They are invisible rectangle
Border Style
✦none—No line
✦ hidden—An invisible line that still takes up space
✦ dotted—A dotted line
✦ dashed—A dashed line
✦ solid—A solid line
✦ double—A double solid line
✦ grooved—A line that appears to be drawn into the page
✦ ridge—A line that appears to be coming out of the page
✦ inset—The entire element (not just the line around the edge) appears pushed into the do
Example of how to use border
cument

32. Box properties - Border properties
The border-style property can have between one and four values.
As with the margin property, a single value applies to all four borders
SYNOPSIS { border-style: solid }
SYNOPSIS { margin: 1cm 1cm 1cm 1cm }
SYNOPSIS, TITLE, ACT, SCENE { display: block }
ACT { margin-top: 3ex }

33. Box properties - Border properties
Border width
Four border-width properties specify the width of the borderlines along the top, bottom, right, and left edges of the box
✦ border-top-width
✦ border-right-width
✦ border-bottom-width
✦ border-left-width
SYNOPSIS { border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px }

34. Used to set border color ✦ border-top-color ✦ border-right-color
✦ border-bottom-color
✦ border-left-color
SYNOPSIS { border-style: solid;
border-width: 1px;
border-color: red }

35. Positioning The clear property
The clear property specifies whether an element can have floating elements on its sides
Link to positioning

36. references
i-style-an-xml-file-with-css.html
CSS
How do I style an XML file with CSS
CSS Trick