Gør din CSS cascading

CSS er det sprog, som man benytter til at style ens hjemmeside. Med et sæt regler, angiver man f.eks. hvor stor teksten skal være, hvilken font, de enkelte elemeter skal have, linjehøjde, farve og meget mere. Det er et enormt simpelt sprog, så man kan nemt komme i gang. Men det kræver årevis at mestre det (og det vil jeg ingenlunde påstå, jeg gør). (Skal du have fat i de tunge drenge i Danmark, vil jeg anbefale dig, at kigge på ShiftCph).

Det gode ved at det er simpelt, er at alle kan snedkerere i det.

Det dårlige er, at der bliver lavet meget makværk ? og desværre er det sådan med HTML og CSS, at de kunder, der køber det, ikke er i stand til at se, om de har købt pænt håndværk eller makværk.

Nuvel... skal ikke gøre mig til dommer over andres arbejde, men jeg ser igen og igen og igen, at folk glemmer C'et i CSS. C'et står for "Cascading" ? altså noget vandfaldshalløj og det er netop dét, mange ikke får fat i.

Her er et eksempel på noget, jeg ser voldsomt meget:

	<div id="maincontent">
		<h1 class="redheader">Overskrift</h1>
		<p class="contenttext">Lorem ipsum</p>
		<p class="contenttext">Lorem ipsum</p>
		<p class="contenttext">Lorem ipsum</p>
	</div>

Og den tilhørende CSS er således

	.redheader { font- family : verdana; color : red; }
	.contenttext { font-family : verdana; line-height : 1.2; }

Måden det burde være skrevet på (for at anvende C'et i CSS).

	<div id="maincontent">
		<h1>Overskrift</h1>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
		<p>Lorem ipsum</p>
	</div>

Og med denne CSS.

	#maincontent { font-family : verdana; }
	#maincontent h1 { color : red; }
	#maincontet p { line-height : 1.2; }

Voilá ? så er man efterladt med sprød HTML og CSS, der rent faktisk er cascading.

Og ... det er min klare overbevisning, at Google også elsker sprød og simpel HTML.

Lær meget mere CSS

Herunder et par af de bøger, jeg har lært CSS fra:

• CSS3 for Web Designers
• Transcending CSS
• Hardboiled Webdesign
• Handcrafted CSS
• Bulletproof Webdesign