2.f) CSS - cascading styles sheets

How to aply style

in-line <p style="{color: red; background-color:

internal <style type="text/css"> p { color: red; }

Reference CSS

CSS Klassenselektoren über class attribut - class="p_gelb" ( . generisch oder p. spezifisch für Element), also .p_gelb { color: yellow; background: black } oder p.p_gelb { color: yellow;

CSS ID-Selektor über id attribut - id="id02"  (ggf. auch

Selectors, Properties, and Values

Lengths and Percentages

some general units that are used in a number of properties and it is worth

• em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.
• px (such as font-size: 12px) is the unit for pixels.
• pt (such as font-size: 12pt) is the unit for points.
• % (such as font-size: 80%) is the unit for... wait for it... percentages.
• Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).

font-sizes (and possibly even heights and widths rather than 'px', which leads to non-resizable text in most browsers, and should be used sparingly,

Colours

• writing styles
  • red
  • rgb(255,0,0)
  • rgb(100%,0%,0%)
  • #ff0000
  • #f00
• 17 valid predefined colour names:
  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • orange
  • purple
  • red
  • silver
  • teal
  • white
  • yellow
• transparent is also a valid value

Text and Fonts

• font-family is the font itself, such as: Times New Roman / Arial / Verdana / font-family: arial, helvetica good for PC and Mac
• font-weight - stick with bold and normal.
• font-style: italic / normal
• text-decoration: overline / line-through underline /
• text-transform: capitalize / Uppercase / Lowercase / none

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Das box-Modell

• Margin box - inherit / auto / top  right bottom left
• Border box - combination of border-width, border-style, border-color
• Padding box - inherit / top  right bottom left
• Element box

DIV-Box d01 1 1 1 1 1

DIV-Box d02 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2

DIV-Box d03 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3

DIV-Box d04 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4