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.

4. - Makkelijker Sneller/Tijdsbesparend -Tip: Niet aan beginnen pas als je CSS goed beheerst.

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

7. Zelfde eigenschappen niet meerdere keren coderen Tijdbesparend, efficient Voorbeeld: h1, h2, h3 { font-family: tahoma; color: #333; }

8. Niet tegelijk met je CSS Tijdsbesparend als je eerst je hele HTML template maakt -Op deze manier visualiseer je eerst je geheel en kun je daarna duidelijker je CSS toepassen

9. 8. Laat je klasse zien! <div class=&quot;box right&quot;></div> Combinatie van stijl regels! Volgorde van de klasse is belangrijk

10. 9. Gebruik de juiste DOCTYPE! Strict is het beste om te gebruiken DTD Andere DOCTYPES transitional frameset loose

11. 10. Hou het kort Met meerdere margins: #menu { margin-left: 5px; margin-right: 7px; margin-top: 8px; } Kan je beter margin gebruiken: #menu { margin: 8px 7px 0px 5px; // top, right, bottom, left }

12. 11. Commentaar Commentaar je CSS; Start met /* En eindig met */ Structeert je CSS

13. 12. Block en Inline Inline; span, a, strong, em, img, br, input Block; div, h1...h6, p, ul, li, table, blockquote, pre, form

14. 13. Alphabetiseer! Alphabetiseer je properties; #menu { color: #fff; float: left; height: 200px; margin: 0; padding: 0; width: 150px; }

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>

16. 15. margin: 0 auto float: center margin: 0 auto; // top, bottombottom - and left, rightright values, respectively.

17. 16. Gooi er niet zomaar een DIV tussen <div class=&quot;header-text&quot;><h1>Header Text</h1></div> <h1>Header Text</h1>

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;

22. 21. Verberg je H1? Geen CSS Alttag gebruiken H1 {margin: 0 0 0 -900; } <img src=“logo.png” alt=“your logo text”>

23. 22. Valideren Trots/waardering Debugging

24. 23. Ems vs. Pixels Pixel is statisch Ems is flexibeler Verschillende manier van webbrowsing font-size: 12px; Of -> font-size: 2em;

25. 24. Kracht van de lijst Waarom een lijst? Toepassing <ul> <li class=“active”>Home</li> <li class=“n-active”>About</li> </ul>

26. 25. Voorkom extra selectors Vb. body #header .home ul li { .. } .home li { .. }

27. 26. Margin en Padding Verschil tussen browsers Reset gebruiken * { margin: 0; padding: 0; }

28. 27. Object Orientated Wat is OOCSS? Wanneer OOCSS?