Grundlæggende web design, ITU Torsdag d. 29 sept Cascading Style Sheets

3 måder at ændre styles på: for et html-element: (inline) for et html-dokument: (embedded) styles for en række html-dokumenter: (external) Hierarki

Selector(s) { property : value; etc. } Inline syntax: Embedded & External syntax:

Selectors: Eksisterende html elementer: body, p, td, h1... Egne klasser:.MinKlasse,.broedtext,.nyhedsboksen... Elementer med id: #topbarren, #menu1, #nyhedsboksen... f.eks. ( ) …

Pseudo klasser: a:link{ … } a:visited{ … } a:hover{ … } a:active{ … } Link Visited Hover Active => LoVe HAte Første elementer (som ikke alle browsere understøtter) : :first-letter{ … } :first-line{ … } :first-child{ … }

Flere selectors kan kommasepareres: body, table,.broedtekst, #topbarren{ property : value } … eller nestes så de er afhængige: #kolonne3.broedtekst.fed{ property : value } Og de kan raffineres løbende: body, tr, #kolonne3 { property : value } #kolonne3 { property2 : value }

Properties (og values): color : blue / #0000FF / RGB(0,0,255) font-size : 20px / 3cm / 12pt / 50% etc. (enhed SKAL angives efter tallet) font-family : Verdana, Arial, Helvetica, sans-serif text-align : left / right / center / justify text-decoration : none / underline / line-through background-color : red / #FF0000 / RGB(255,0,0) background-image : url(sti til billede) border : black solid 1px border-top-style : solid / dashed / dotted / double / groove padding-left : 10% margin-top : 15px