Percentage with respect to current size Absolutely named sized xx small x small

Percentage with respect to current size absolutely

This preview shows page 21 - 25 out of 101 pages.

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
Image of page 21
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, %)
Image of page 22
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
Image of page 23
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
Image of page 24
Image of page 25

You've reached the end of your free preview.

Want to read all 101 pages?

  • Spring '14
  • Sarah-JaneWhittaker
  • elements, Array

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture