Percentage: with respect to current size
Absolutely-named sized: xx-small, x-small… xx-large
Relatively-named sized: smaller, larger
font-style: normal, italic
font-weight: normal, bold
text-align: left, center, right, justify
text-decoration: underline, overline, line-through, blink, none
line-height: sets height of each line, unit values (pt, px, em), or %
Lists and tables
Lists
list-style-type: specifies bullets/numbering used
none, circle, square, lower-roman, upper-roman
Tables
caption-side: specifies placement of the caption
CSS
02:55
top, bottom
Can also apply styles to td, th
Containing elements
Blocks within blocks
Inline within blocks
Inline within inline
All elements have containing elements
<body> or parent block element
Span
<span class=”…”>content</span>
Inline element
A tag for when there is no tag
Used for inline content without tags
<p>
There was one <span class=”error”>error</span>.
</p>
Div
<div class=”…”>content</span>
Block element
Box model
Method for specifying layout, can be applied to block elements
Content
width: sets width of content (unit value, %)
CSS
02:55
height: sets height of content (unit value, %)
Fills containing block by default
Can also set min-width, max-width, etc.
Applies to blocks, images and floats
Padding
padding: sets space around content (unit value, %)
padding-top, padding-bottom, etc.
Shares background colour with content
Margins
margin: sets space around border (unit value, %)
Can specify sides
Does NOT share background with content
Be careful of margin collapse
Two stacked block elements, margins may merge
Border
border-style: none, dotted, dashed etc.
Can also specify border-left-style, etc.
border-color: name, RGB or hex
Can specify side, border-top-color, etc.
border-width: unit value, %, or named (thin, medium, thick)
Can set to specific side
border-collapse: sets border to single line (collapse, separate)
Display
Renders element differently (specifies rendering category
display: block, inline, inline-block, table-cell, etc.
Doesn’t actually make the element something else, just displays it
CSS
02:55
inline-block: parent element treats like inline, child thinks it’s a block
Standard page layout
Within <body>
Block elements arranged vertically, placed in given order, occupy width of page
Within block elements
Inline elements arranged horizontally, left to right, wrap as lines fill
Floating elements
Removed from standard flow
Vertical position unchanged, horizontal position specified
Oriented in containing block
float: left, right, none
Not synonymous with alignment, relates to flow and placement
Block elements typically set as floats
Preventing wrapping
clear: left, right, both, none
Positions an element under floats
You've reached the end of your free preview.
Want to read all 101 pages?
- Spring '14
- Sarah-JaneWhittaker
- elements, Array
