CSS
Definitie:
CSS (Cascading Style Sheets) is een taal die de stijl van een
HTML-document beschrijft.
CSS beschrijft hoe HTML-elementen moeten worden
weergegeven.
CSS is geen programmeertaal (geen logica).
3 manieren voor gebruik van CSS
Inline CSS:
Styling rechtstreeks op een HTML Element
Interne CSS: Styling binnen een HTML-document via <style> tags met CSS code
Externe CSS:
Styling in een extern CSS bestand dat we linken aan ons HTML bestand
Er is een voorkeur om de CSS bestanden in een externe map te zetten, waarom?
Voor externe css gaan we deze externe file moeten inlezen. Hoe gaan we dat doen, zoek dit eens uit.
Voor een goede filestructuur gaan we ook mappen gebruiken om de CSS, Javascript en afbeeldingen allemaal mooi te scheiden.
Opdracht: (3 min)
1. Maak een nieuwe hoofdmap aan en daarin een map ‘css’
2. Start met een lege index.html
3. Voorzie de index.html van de basisstructuur
4. Open een nieuwe file
5. Sla deze op als style.css in de map ‘css’
6. In de ‘head’ van je index.html zet je <link rel=”stylesheet” type=”text/css” href=”css/style.css”>
De Css selector geeft aan over welke onderdelen van je HTML je spreekt. Deze elementen ga je voorzien van een bepaalde lay-out.
Welke kleuren kan je toevoegen met CSS?
- Kleurnamen (steeds Engels) bv red;
- Hexadecimale kleuren #f2f2f2;
- RGB bv rgb(0,0,255);
Waarvoor staat RGB?
Opdracht: zoek een cheat sheet van alle kleuren je kan toevoegen in CSS en bestudeer die even. (5 min)
Opdracht: (5 min)
Test je eerste CSS-link met je HTML uit. Maak in de index pagina uit de vorige opdracht een hoofdtekst, een ondertekst en een paragraaf. Gebruik deze CSS of een variatie ervan. Geef de ondertekst en de paragraaf een andere kleur en lijn de tekst centraal uit.
h1 {
color: red;
text-align: center;
}
Welke lettertypes kan je gebruiken in CSS?
Ga altijd voor Web-Safe-Fonts. Deze worden altijd vertoond in de browser. Andere kunnen ook gebruikt worden maar die moet je apart invoeren.
Waarom hebben we een font family voor lettertypes met Arial en Helvetica en anderen. Waarom niet gewoon Arial?
Opdracht: Zoek een lijst van alle web-safe-fonts die je in CSS kan gebruiken en verander de tekst in de vorige oefening via CSS in een ander lettertype. (5 min)
Wat is een ‘class’?
Het HTML-attribuut ‘class’ wordt gebruikt om gelijke stijlen voor elementen met dezelfde klassenaam te definiëren.
HTML-elementen met eenzelfde class-attribuut hebben dezelfde indeling en stijl.
<div class=”cities”>
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class=”cities”>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
Een element dat vaak gebruikt wordt om meerdere elementen een stijlvorm te geven via klassen is een <div> element. Dit is als het ware een container waar we inhoud in kunnen plaatsen. Een blok met code die samen hoort. We hebben ook sections, articles en andere tags die eenzelfde functie hebben maar waarbij er meer informatie gegeven wordt over de functie van de container (vb: een sectie, een navigatie, een footer tekst). Ook hiermee kunnen we meerdere elementen in die blokken een stijlvorm geven via CSS.
Wat is een ‘id’?
vb. <h1 id=”myHeader”>My Header</h1>
Het HTML-attribuut ‘id’ geeft een uniek ID voor een HTML-element aan. Het ID kan worden gebruikt door CSS en Javascript om bepaalde taken uit te voeren voor dat unieke element.
Wil je in CSS een id selecteren, gebruik je # gevolgd door het id van het element.
Verschil tussen class en id?
Een ID mag je slechts eenmaal gebruiken per webpagina. Slechts één HTML-element mag een specifiek ID hebben (unieke IDs).
Een class kan door meerdere elementen gebruikt worden. De class is dus niet uniek.
Hoe gebruik je ‘id’ en ‘class’ in CSS?
.alinea {
background-color: lightseagreen;
font-family: Cambria, Cochin, Georgia
}
#top {
background-color: green;
}
Opdracht: zoek een cheat sheet voor CSS en bestudeer die even. (5 min)
Opdracht: (20 min)
1.Plaats in je HTML enkele paragrafen lorem ipsum en een paar titels.
2.Maak hier div’s van.
3.Probeer het verschil uit tussen class en id.
4.Voeg verschillende CSS-stijlen toe aan de verschillende div’s.
CSS Plaatsing
Border – Padding – Margin
Content = eender wat je in HTML hebt gezet (div, href,…)
Padding = de ruimte tussen je inhoud en de rand van je inhoud
Border = de rand rond je inhoud
Margin = de ruimte rond de border
Pseudo classes
Een pseudo-classe wordt gebruikt om een speciale toestand van een element te definiëren. (vb: andere kleur voor hyperlinks wanneer je er met de muis over gaat of er op klikt).
selector:pseudo-class {
property:value;
}
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Opdracht: maak een map genaamd tabel en maak deze tabel na. Als je over een rij hovered met de muis geef dan een grijze achtergrond voor die rij.
Opdracht:
Groep 1:
Wat is flexbox? Hoe gebruik je het, wat kan je ermee, demonstratie…
Groep 2:
Wat is CSS Grid? Hoe gebruik je het, wat kan je ermee, demonstratie…
Extra:
- Wat is font awesome en toon aan in een html document
- Naast element, id en klasse bestaan er nog combinaties CSS selectors. Welke zijn er en hoe werken deze + demonstratie
- Media Queries, wat, hoe gebruik je, + demonstratie