CSS-handleiding – Les 2 – Aan de slag met CSS. CSS-eigenschappen background, color
Hallo allemaal. In de vorige les heb ik twee bestanden gemaakt: een HTML- en een CSS-bestand. Hier is hun code:
index.html:
<html> <head> <title>CSS-handleiding</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <p>Leer CSS samen met drupalbook.org</p> <p>Regel 2 – leer CSS samen met drupalbook.org</p> </body> </html>
style.css:
body{
background: #eeeeee; /* achtergrond van de pagina */
font-size: 14px; /* lettergrootte */
}
p{
color: #ff0000; /* tekstkleur */
}
In deze les gaan we verder met het leren van CSS en voegen we kleur en stijl toe aan onze template. Laten we beginnen met de eigenschap background, die we al voor de body hebben ingesteld:
body{
background: #eeeeee; /* achtergrond van de pagina */
font-size: 14px; /* lettergrootte */
}
Zoals je ziet, hebben we nu een grijze achtergrond op de pagina:
Laten we eerst begrijpen hoe de CSS-syntaxis in een bestand werkt. Alle CSS-eigenschappen beginnen met een aanduiding van waarop we ze willen toepassen. Deze aanduidingen kunnen zijn: body, p, .class, #id. Je zult merken dat er soms een punt of een hekje voor staat. Een punt gebruik je voor elementen met een bepaalde class, en een hekje voor een element met een bepaalde id. Laten we dit verduidelijken met een voorbeeld:
<html>
<head>
<title>CSS-handleiding</title>
<link type="text/css" rel="stylesheet" media="all" href="style.css" />
</head>
<body>
<div class="green">
<p>Leer CSS samen met drupalbook.org</p>
</div>
<div id="blue">
<p>Regel 2 – leer CSS samen met drupalbook.org</p>
</div>
</body>
</html>
Ik heb twee blokken toegevoegd: één met de class green en één met het id blue. Nu schrijf ik CSS voor hen:
body{
background: #eeeeee; /* achtergrond van de pagina */
font-size: 14px; /* lettergrootte */
}
.green{
color: #00ff00 /* tekstkleur */
}
#blue{
color: #0000ff /* tekstkleur */
}
Zoals je ziet, heb ik CSS geschreven voor het element body zonder een punt of een hekje. Zonder deze tekens schrijven we CSS voor gewone HTML-tags zoals p, span, ul, li enzovoort. Met een punt schrijven we CSS voor elementen met een specifieke class, en met een hekje voor een specifiek id. Onthoud dit goed, zodat je later niet in de war raakt:
Punt (.) – voor klassen
Hekje (#) – voor id’s
Zonder punt of hekje – voor standaardtags zonder class of id
Nadat we de tag, class of id hebben aangegeven, schrijven we de CSS-eigenschappen tussen accolades {} :
body{ /* tag */
}
.green{ /* class */
}
#blue{ /* id */
}
Zoals je je herinnert uit mijn korte HTML-cursus, zijn class en id universele attributen van HTML-tags, wat betekent dat je ze aan elk element kunt toewijzen. Zo kunnen we binnen vele tags zoals p, span, li enz. verschillende CSS-stijlen toepassen.
Nu kunnen we binnen de accolades CSS-eigenschappen schrijven. Laten we beginnen met een eenvoudige: color. Deze eigenschap bepaalt de tekstkleur. We schrijven eerst de naam van de eigenschap, daarna een dubbele punt, en vervolgens de waarde. Voor color kun je zowel een numerieke waarde als een kleurnaam gebruiken:
.green{
color: #00ff00; /* tekstkleur */
}
#blue{
color: #0000ff; /* tekstkleur */
}
/* alternatief */
.green{
color: green; /* tekstkleur */
}
#blue{
color: blue; /* tekstkleur */
}
Wanneer we kleuren in numerieke (hexadecimale) vorm schrijven, gebruiken we zes cijfers en zetten we een hekje (#) ervoor. De eerste twee cijfers geven de hoeveelheid rood aan, de derde en vierde de hoeveelheid groen, en de vijfde en zesde de hoeveelheid blauw. Dit heet het RGB-systeem (Red, Green, Blue). Hexadecimale cijfers lopen niet van 0 tot 9, maar van 0 tot F, waarbij na 9 de letter A komt. Om kleuren te kiezen in dit formaat kun je een programma zoals Photoshop gebruiken. Klik op de kleurkiezer en selecteer in het palet de gewenste tint:
Nu je weet hoe je een kleur kunt kiezen voor de eigenschap color, kun je ook een kleur kiezen voor de eigenschap background. Laten we de achtergrondkleur wijzigen en de tekst beter leesbaar maken:
body{
background: #fafafa; /* achtergrond van de pagina */
color: #333; /* algemene tekstkleur op de pagina */
}
.green{
/* tekstkleur */
}
#blue{
/* tekstkleur */
}
Als je meerdere CSS-eigenschappen schrijft, gebruik dan een puntkomma (;) om het einde van elke regel aan te geven. Nu is onze pagina veel leesbaarder:
Laten we nu nog wat groene en blauwe kleuren toevoegen:
index.html:
<html> <head> <title>CSS-handleiding</title> <link type="text/css" rel="stylesheet" media="all" href="style.css" /> </head> <body> <p><span id="blue">Leer CSS</span> samen met <span class="green">drupalbook.org</span></p> <p>Regel 2 – leer CSS samen met <span class="green">drupalbook.org</span></p> </body> </html>
En style.css:
body{
background: #fafafa; /* achtergrond van de pagina */
color: #333;
}
.green{
color: #26e921; /* tekstkleur */
}
#blue{
color: #0f15f3; /* tekstkleur */
}
