Pro HTML5 and CSS3 Design Patterns

CHAPTER 1 DESIGN PATTERNS: MAKING CSS EASY!

CSS Properties and Values: Specialized

List applies only to lists.
i list-style: TYPE POSITION IMAGE
i list-style-type: disc, circle, square, none, decimal,
lower-alpha, upper-alpha, lower-roman, upper-roman
i list-style-position: outside,inside
i list-style-image: none, url("file.jpg")

Table applies only to tables.
i border-collapse: separate, collapse
table-layout: auto, fixed

Cell applies only to cells.
vertical-align: baseline, bottom, middle, top

Inline applies only to inlines and inline-blocks.
vertical-align: baseline, LENGTH, %LineHeight,
text-bottom, text-top, middle, top, bottom

Page applies only to blocks and tables.
page-break-after: auto, always, avoid
page-break-before: auto, always, avoid

Selectors

• {} selects all elements
  p {} selects all

  elements
  .c {} selects all elements where class="c"
  p.c {} selects all

  elements where class="c"
  #main {} selects one element where id ="main"
  a:link {} selects all unvisited links
  a:visited{} selects all visited links
  a:hover {} selects all links being hovered over
  a:active {} selects the current link being activated
  a:focus {} selects all links that have the focus
  p:first-letter {} selects first letter of all

  elements
  p:first-line {} selects first line of all

  elements
  p:first-child {} selects first child of all

  elements
  tr:nth-child(even) selects every even row of a table
  tr:nth-child(2n+0) same as above
  tr:nth-child(2n+0) same as above
  tr:nth-child(10n+9) same as above
  #n .c :first-line {} selects every 9th, 19th, 29th, etc., row
  #n > .c > :first-line {} child selector example
  #n + .c + :first-line {} sibling selector example
  #n , .c , :first-line {} applies independent selectors to same block of properties
  [title] {} selects all elements with a title attribute
  [title~="WORD"] {} selects all where title attribute contains "WORD"
  [title="EXACT_MATCH_OF_ENTIRE_VALUE"] {} selects all with exact attribute match