A slideshow presentation about CSS.

1. Tips voor beginners

2. - Duidelijk en netjes coderen - Elke style eigen line geven ipv meerdere naast elkaar. # someDiv { background : red; padding : 2em; border : 1px solid black; } # someDiv { background: red;padding: 2em; border: 1px solid black; }

3. - Duidelijke, eenduidige naamgevingen - Hoofdlettergebruik, underscores etc.

5. - Elke browser geeft default settings mee - Reset zorgt dat alle elementen op alle browsers hetzelfde eruit komen te zien. * { margin: 0; padding: 0; border: 0; }

6. - Codeer je styles in een logische volgorde - Zet er comentaar bij - Versimpelt toekomstig gebruik Voorbeeld: /****** header *********/ Style hier /******main content *********/ Style hier /******footer *********/ Style hier

15. .left { float: left; } .clear { clear: both; } .w30 { width: 30px; } <div id=&quot;container&quot;> <div id=&quot;menu&quot; class=&quot;left w30&quot;></div> <div id=&quot;content&quot; class=&quot;left&quot;></div> <div class=&quot;clear&quot; id=&quot;footer&quot;> </div> </div>

18. Deze tool is een must voor elke webdesigner. Naast de vele functies (HTML inspecteren, fouten vinden) kun je het CSS ook aanpassen en bewerken.

19. #menu { padding: 10px; *padding: 5px; }

20. Door geen rekening te houden met absolute positionering voor de andere elementen op de pagina, kan de lay-out er lelijk uit komen te zien doordat er meerdere ‘position absolute’ elementen omheen draaien.

21. text-transform: lowercase;