Beginnen met het gebruiken van CSS in je HTML
Wat is CSS?
CSS of Cascading StyleSheet is een manier om pagina's verder op te maken. Op moderne website's wordt er vaak meer CSS gebruikt dan HTML. Met CSS kan je achtergronden beter defineeëren maar ook nog afstanden, positie,... Het is een must als webdesigner om CSS even goed te beheersen als HTML.CSS is heel eenvoudig opgemaakt:
object {
kenmerk: eigenschap;
}
body {
background-color: red;
}
Toepassen
Als je dit wilt toepassen moet je dit natuurlijk ergens toevoegen. Hiervoor zijn verschillende mogelijkheden:Zet tussen de head-tags op de pagina
De eenvoudigste manier voor ontwikkelingsdoeleinden of voor kleine pagina's is de css plaatsen in de pagina zelf. Let natuurlijk wel op dat dit meer bandbreedte kost. Aangezien op elke pagina nu een stylesheet staat!<head>
<title>Mijn eerste CSS</title>
<style>
body {
background-color: red;
}
</style>
</head>
De stylesheet importeren
Je kan ook een stylesheet importeren in een stylesheet. Je kan het op dezelfde manier doen als vorig voorbeeld maar in plaats van direct de code te schrijven kan je ook code importeren.Sla eerst de css op in een bestand (bijvoorbeeld style.css) en gebruik vervolgens deze code:
<head>
<title>Mijn eerste CSS</title>
<style>
@import url("path/to/style.css");
</style>
</head>
De stylesheet als meta-tag laten ophalen
Deze methode is eenvoudig om toe te passen en is meteen ook het duidelijkste voor de webbrowser.Sla dus net zoals het vorig voorbeeld de css op in een bestand (bijvoorbeeld style.css) en daarna zet je dit tussen de <HEAD>:
<link rel="stylesheet" href="path/to/style.css" type="text/css" media="screen" />
Stijl toepassen per object
Een andere methode is om de stijl per object de definieëren in de html zelf. Deze methode is enkel aan te raden bij kleine pagina's en niet bij websites. De HTML begint er onordelijk van te worden.<body style="background-color: red;">
deze methode gebruik je het best niet!<br />
</body>
Verder gaan met CSS
Maar er zijn natuurlijk veel meer kenmerken en eigenschappen die je kunt toepassen dan enkel background-color. Er zijn er veel te veel om op te noemen maar ik zal er een paar opnoemen:Achtergronden
Achtergronden moet je vaak toepassen met css.| Kenmerk: | Wat doet het? | Gebruik |
| background-color | Pas een achtergrondkleur toe. | background-color: green; background-color: #ff0000; |
| background-image | Pas een achtergrondafbeelding toe. | background-image: url(path/to/image.png); |
| background-repeat: | Hoe moet een achtergrond zich herhalen? | background-repeat: no-repeat; background-repeat: repeat-x; background-repeat: repeat-y; |
Margin's en Padding's
Met Margin's en Padding's kan je eenvoudig de afstand tussen elementen bepalen.Margin is de afstand rond het object en Padding binnen het object zelf.
| Kenmerk: | Wat doet het? | Gebruik |
| padding | Past de afstand tussen de inhoud van het object en de omranding van het object aan. | padding: 5px; |
| padding-top | Past de afstand tussen de inhoud van het object en de omranding van het object aan de bovenkant aan. | padding-top: 15px; |
| padding-left, padding-right, padding-bottom | Zie hierboven. Behalve aan een andere kant. | padding-right: 25px; |
| margin | Past de afstand rond het object en zijn omranding aan | margin: 7px; |
| margin-top | Past de afstand bovenaan het object en zijn omranding aan | margin-top; 17px; |
| margin-left, margin-right, margin-bottom | Wat zou dit doen? :P | margin-left: 45px; |
Lettertypen
Als je lettertypen wilt toepassen is het heel eenvoudig. Meestal gebruikt men deze code voor een lettertype globaal te maken:body {
font-family: "Verdana";
}
| Kenmerk: | Wat doet het? | Gebruik |
| font-family: | De lettertypefamilie die gebruikt wordt. | font-family: "Verdana"; font-family: serif; font-family: "Verdana",non-serif; |
| font-size: | De grootte van het lettertype | font-size: 11px; |
Afmetingen en Gedrag
Soms is het handig om bepaalde afmetingen op voorhand vast te leggen.| Kenmerk: | Wat doet het? | Gebruik |
| width | Definieer de breedte van het object | width: 150px; |
| height | Definieer de hoogte van het object | height: 250px; |
| min-width | Definieer de minimale breedte van het object.Dit is handig als je object altijd een bepaalde afstand moet hebben als hij te klein is. | min-width: 100px; |
| min-height | Doet hetzelfde als het vorige, behalve met de hoogte | min-height: 250px; |
| position | Dit kenmerk vertelt of andere objecten rekening mee moeten houden met de afmetingen en locatie van dit object | position: absolute (ja) position: relative (nee) |
| left: | Verander de afstand ten opzichte van de paginarand aan de linkerkant | left: 50%; |
| right, top, bottom | Dit doet hetzelfde als bovenaan, behalve aan een andere kant | right: 15px; |
| float | Je kan kiezen of een bepaald object aan de linker- of rechterkant zit. Let op! om dit te gebruiken definieer je best de breedte! | float: left; float: right; |
Scrollbalken
Soms heb je nood aan scrolbalken als je een maximale hoogte of breedte hebt gedefineerd voor bijvoorbeeld een div.| Kenmerk: | Wat doet het? | Gebruik |
| overflow | Definieer hoe en of er scrollbalken gebruikt worden. | overflow: hidden; overflow: visible; overflow: scroll; |
Hoe pas je css toe op een object of onderdeel
Nu kennen we al een beetje CSS. Je kunt CSS niet alleen toepassen op objecten zelf, maar ook op bepaalde objecten. Zo kun je kiezen om enkel sommige afbeeldingen die achtergrondkleur of padding te geven. Hiervoor zijn er classes en id's.HTML
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Einstein1921_by_F_Schmutzer_2.jpg/264px-Einstein1921_by_F_Schmutzer_2.jpg" alt="" class="einstein" /><br />
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/ThomasEdison.jpg/220px-ThomasEdison.jpg" alt="" class="edison" /><br /><br />
<div id="header">Welkom op mijn website</div>
<div id="footer">Alle rechten voorbehouden.</div>
</body>
CSS
Als je goed kijkt naar bovenstaande html zie je dat de afbeeldingen allebei een verschillende class hebben. En de div's allebei een verschillende id. Je kan ook id's en classes omwisselen, maar een id mag (om geldig te blijven) slechts 1x gebruikt worden, classes mogen meermeels gebruikt worden.body {
background-color: #eeeeee;
}
.einstein {
padding: 5px;
background-color: red;
}
.edison {
padding: 5px;
background-color: yellow;
}
#header {
position: absolute;
left: 5px;
top: 5px;
font-size: 72px;
}
#footer {
font-size: 8px;
}
Een .duid een class (of klasse) aan. Een # een id.
Maar we kunnen hier nog verder in gaan!
HTML
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/ThomasEdison.jpg/220px-ThomasEdison.jpg" alt="" class="edison" /><br /><br />
</body>
CSS
.edison {
padding: 5px;
}
.edison:hover {
background-color: yellow;
}
Meer over afmetingen
Afmetingen in css kan je op verschillende manieren toepassen...Meer over kleuren
Er zijn verschillende manieren om kleuren te gebruiken in CSS. Ofwel gebruik je de Engelse naam:body {
color: white;
background-color: black;
}
body {
color: #ffffff;
background-color: #000000;
}
Het kenmerk color past de tekstkleur toe!
Afsluiting
Bedankt voor het lezen van deze tutorial, ik hoop dat je er veel mee bent en later een pro wordt in het gebruiken van CSS.Reactie's op Beginnen met het gebruiken van CSS in je HTML
| StefannafetS | 05/03/2011 18:01.11 | |
| kun je toevoegen hoe je mouse over voor teksten kan maken? die hover word heel snel even besproken terwijl je er mooie menus ermee kan maken | ||
| thoot-je | 04/04/2011 15:59.11 | |
| hoi, hoe kan je text nou niet helemaal naar links zetten maar je text ietsje meer naar rechts toezetten zodat er een wit stuk is voor je tekst? | ||
