Tips voor beginners

- 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; }

- Duidelijke, eenduidige naamgevingen- Hoofdlettergebruik, underscores etc.

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

- 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; }

- 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

-Zelfde eigenschappen niet meerdere keren coderen-Tijdbesparend, efficient

Voorbeeld:

h1, h2, h3 {font-family: tahoma; color: #333;}

-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

8. Laat je klasse zien!

<div class="box right"></div>  

Combinatie van stijl regels! Volgorde van de klasse is belangrijk

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

transitional frameset loose

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} 

11. Commentaar

Commentaar je CSS; Start met /* En eindig met */

Structeert je CSS

12. Block en Inline

Inline; span, a, strong, em, img, br, input

Block; div, h1...h6, p, ul, li, table, blockquote, pr

e, form

13. Alphabetiseer!

Alphabetiseer je properties; #menu {

color: #fff;float: left;height: 200px;   

margin: 0;padding: 0;width: 150px;

}  

.left { float: left; }

.clear { clear: both; }

.w30 { width: 30px; }

<div id="container"><div id="menu" class="left w30"></div><div id="content" class="left"></div><div class="clear" id="footer"></div></div>

15. margin: 0 auto

float: center

margin: 0 auto; // top, bottombottom - 

and left, rightright values, respectively.  

16. Gooi er niet zomaar een DIV tussen

<div class="header-text"><h1>Header Text</h1></div> 

<h1>Header Text</h1>

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

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

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.

text-transform: lowercase;  

21. Verberg je H1?

Geen CSS Alttag gebruiken H1 {margin: 0 0 0 -900; } <img src=“logo.png” alt=“your logo

text”>

22. Valideren

Trots/waardering Debugging

23. Ems vs. Pixels

Pixel is statisch Ems is flexibeler Verschillende manier van

webbrowsing font-size: 12px; Of -> font-size: 2em;

24. Kracht van de lijst

Waarom een lijst? Toepassing <ul>

<li class=“active”>Home</li> <li class=“n-active”>About</li>

</ul>

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

26. Margin en Padding

Verschil tussen browsers Reset gebruiken * { margin: 0; padding: 0; }

27. Object Orientated

Wat is OOCSS? Wanneer OOCSS?