Download - Next Web Sharing
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?