Dit artikel is het vervolg op “HTML leren”. Als je het artikel “HTML leren” nog niet hebt gelezen, raad ik je aan om dat eerst te doen. Op deze manier kan je meedoen om zelf een eenvoudige website te maken met HTML, CSS en JavaScript. Nu zijn we aangekomen bij CSS. CSS leren is erg handig als je een website wil opmaken/stijlen. Met HTML kan je alleen de structuur van een website maken en met CSS zorg je voor het design van de website. De basis van CSS is niet moeilijk om te leren. Laten we verder gaan met de website die wel al hebben opgezet in “HTML leren” en CSS gaan toevoegen. Dit artikel kan je zien als een snelle CSS cursus. We gaan kijken hoe de basis van CSS werkt, wat je ermee kan en hoe je het beste CSS verder kan leren. Tot slot gaan we verder met de website die we al gemaakt hebben met HTML5. We gaan er CSS aan toevoegen. Lees lekker verder!
Ja, ik wil CSS leren met de beste CSS boeken!
Wat is CSS?
CSS staat voor Cascading Style Sheets. CSS beschrijft hoe HTML elementen moeten worden weergegeven op het scherm. Met HTML kan je elementen (HTML tags) van een website structureren, zoals het invoegen van hoofdstukken, paragrafen, video’s en afbeeldingen. Met CSS kan je bijvoorbeeld bepalen waar deze elementen moeten komen op het scherm, hoe groot het moet zijn en wat de kleur is. HTML kan je zien als de fundering van een huis en CSS zorgt voor het uiterlijk en de inrichting.
CSS syntax
De syntax (Grammatica van de taal) van CSS is niet lastig, maar wel handig om te kennen als je zelf CSS wil schrijven. CSS leren is ook de syntax begrijpen, zodat je niet alles steeds hoeft op te zoeken. Een CSS regel bestaat uit een selector en een declaratie blok (Declaration block). Hieronder een voorbeeld:
p {
color: blue;
font-size: 16px;
}
p = De HTML tag die CSS gaat stijlen. Dit is de selector.
color en font-size = Dit zijn de eigenschappen (Properties).
blue en 16px = Dit zijn de waardes.
De selector verwijst naar het HTML element. In het declaratieblok dat staat tussen de accolades {}, wordt het HTML element daadwerkelijk gestijld. Dit kan door CSS eigenschappen te gebruiken en die een waarde te geven. De scheiding tussen het CSS eigenschap en de waarde vindt plaats door een dubbele punt (:). In het declaratieblok kunnen meerdere declaraties zijn. Een declaratie is een CSS eigenschap met een waarde en tot slot een puntkomma (;). De puntkomma is nodig om de scheiding te maken met andere declaraties binnen het declaratieblok.
Dit stukje CSS code geeft aan dat alle paragrafen (p) blauw zijn met een lettertypegrootte van 16 pixels.
CSS selectors
CSS selectors kunnen HTML elementen vinden. Om CSS te leren in deze snelle CSS cursus is het goed als je dit snapt. De belangrijkste selectors staan hieronder op een rijtje.
HTML element stijlen
Dit heb je al kunnen zien in het bovenstaande voorbeeld. Een HTML element kan eenvoudig bewerkt worden, zoals p in het bovenstaande voorbeeld.
Een HTML element schrijf je in een HTML document op deze manier: <p></p>. In CSS hoef je deze <> tekens niet te gebruiken en zet je in het geval van een paragraaf alleen een p neer.
HTML elementen stijlen met een id
In een HTML document kan je HTML elementen een id geven. In CSS kan je een id selecteren en stijlen. Hieronder een voorbeeld.
Een paragraaf in een HTML document met een id:
<p id="p1"></p>
De paragraaf stijlen in CSS met “p1” als id:
#p1 {
color: green;
font-size: 20px;
word-spacing: 10px;
}
In CSS selecteer je het id van een HTML element met # en daarachter de naam van het id. Op deze manier wordt alleen het HTML element met de desbetreffende id gestijld, in dit geval een paragraaf met id “p1”. De paragraaf met id “p1” is in dit geval groen, heeft een lettertypegrootte van 20 pixels en er is 10 pixels afstand tussen de woorden.
HTML elementen stijlen met een class
Je kan ook HTML elementen een class geven en deze class stijlen in CSS. Hieronder een voorbeeld.
Een paragraaf in een HTML document met een class:
<p class="p2"></p>
De paragraaf stijlen in CSS met “p2” als class:
.p2 {
color: yellow;
font-size: 12px;
text-align: right;
}
In CSS selecteer je de class van een HTML element met punt (.) en daarachter de naam van de class. Op deze manier wordt alleen het HTML element met de desbetreffende class gestijld, in dit geval een paragraaf met class “p2”. De paragraaf met class “p2” is in dit geval geel, heeft een lettertypegrootte van 12 pixels en de tekst is rechts georiënteerd op het scherm.
Verschil in CSS tussen een id en een class
De werking van een id en een class lijken op elkaar. Echter is een id bedoeld om één HTML element te identificeren en een class is bedoeld om er meerdere te identificeren. Je kan wel dezelfde id in meerdere HTML elementen zetten, maar dan kan je later in de problemen komen als je ook JavaScript wil gebruiken. CSS leren in deze snelle CSS cursus is niet alleen begrijpen wat CSS doet, maar ook de regels van CSS kennen.
CSS toevoegen
De browser moet een stylesheet kunnen lezen om de website daadwerkelijk te kunnen stijlen. Er zijn drie manieren om CSS toe te voegen aan een HTML document, namelijk:
Ja, ik wil CSS leren met de beste CSS boeken!
Een externe stylesheet
Met een externe stylesheet kan je in één bestand alle CSS wijzigingen doen. In het HTML document refereer je naar de stylesheet door een <link> element te gebruiken. Bij de website die we verder gaan uitbreiden met CSS, gebruiken we deze methode ook. Dit is de meest nette en overzichtelijke manier om CSS toe te voegen. Hieronder een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<title>Titel van de pagina</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
</body>
</html>
Hierboven is te zien dat er een verwijzing is gemaakt naar een CSS bestand “index.css”. Als we de website verder gaan uitbreiden met CSS, kan je zien hoe je dat bestand aanmaakt. Het is ook mogelijk om te refereren naar meerdere CSS bestanden om je CSS code verder te spreiden.
CSS intern toevoegen in een HTML document
In plaats van een verwijzing naar een CSS bestand, kan je ook intern CSS toevoegen in een HTML document. Hieronder een voorbeeld:
<!DOCTYPE html>
<html>
<head>
<title>Titel van de pagina</title>
<style>
body {
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>
Zoals in de bovenstaande code te zien is, kan je CSS in een HTML document toevoegen tussen de <style></style> HTML elementen. Echter is het niet netjes om te doen. Stel dat je veel aanpassingen gaat doen in CSS, dan wordt het HTML document erg groot. Beter is om de CSS te scheiden in een apart CSS bestand of meerdere CSS bestanden.
CSS toevoegen in een HTML element
Tot slot kan je CSS ook nog toevoegen in een HTML element zelf. Het desbetreffende HTML element wordt dan gestijld. Hieronder een voorbeeld.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:purple;font-size:30px;">Hoofdstuk 1</h1>
<p>Paragraaf 1</p>
</body>
</html>
In de <h1> staat het style attribuut. Hiermee kan je in een HTML element het element zelf stijlen. In dit geval is <h1> paars en heeft een lettertypegrootte van 30 pixels. Zoals je zelf waarschijnlijk ook wel ziet, ziet het er niet heel netjes uit en is het moeilijker leesbaar.
Wat is CSS3?
Tijdens het CSS leren in deze snelle CSS cursus is het ook handig als je weet wat CSS3 is. Waarom staat er een 3 achter CSS? CSS3 is de laatste CSS versie. CSS3 heeft een aantal nieuwe features en toevoegingen ten opzichte van de vorige versie. Wanneer er weer een nieuwe versie van CSS uitkomt is nog niet bekend.
Waarom is CSS eigenlijk ontstaan?
CSS1 is gereleased in 1996 en kwam opnieuw uit in 1999 zonder de fouten die er eerst in zaten. Het idee erachter was om de content en de presentatie van een website van elkaar te scheiden. HTML is bedoeld voor de content en CSS voor het stijlen van een website. De scheiding tussen content en presentatie maakt het overzichtelijker en makkelijker om dingen aan te passen.
Het duurde even voordat alle browsers goed konden omgaan met CSS, maar tegenwoordig is CSS niet meer weg te denken bij het maken van een website. Het is makkelijk om te leren en je kan er snel mee aan de slag.
Ja, ik wil CSS leren met de beste CSS boeken!
CSS leren: Wat kan je ermee?
Het meeste belangrijke wat je kan doen met CSS is het opmaken van een website. Sinds het begin van CSS zijn er steeds meer apparaten bij gekomen, zoals smartphones en tablets. Hierop staan ook browsers waarop websites vindbaar zijn. Met CSS kan je websites ook responsive maken. Responsive betekent dat de website geschikt is voor verschillende soorten schermgroottes van apparaten. Een website die je bezoekt op je smartphone hoort in het ideale scenario een ander design te hebben dan dezelfde website op een laptop. Met CSS kan je de website geschikt maken voor verschillende apparaten.
Net zoals met HTML kan je tegenwoordig meer met CSS dan alleen websites opmaken/stijlen. Met PhoneGap kan je met CSS ook een app opmaken. Ook zijn er verschillende libraries waarmee je met CSS games kan vormgeven. Wie weet wat er in de toekomst nog meer mogelijk is met CSS?
CSS leren: Wat zijn de beste leermethodes?
Om CSS goed onder de knie te krijgen is het aan te raden om dit artikel goed door te lezen en mee te doen met de snelle CSS cursus hieronder, bij het verder uitbouwen van de website. Het is een eenvoudige website, waarbij we CSS gaan toevoegen. Belangrijk is om feeling te krijgen met de werking en syntax van CSS.
Een goede leermethode is ook om met één of meerdere van de beste CSS boeken CSS te leren. Een andere tip is het platform Pluralsight. Op dit platform staan de beste videocursussen over CSS voor beginners.
Blijf vooral niet stilzitten na de boeken en/of cursussen en ga zelf op onderzoek uit. Begin bijvoorbeeld met het maken van een eenvoudige website en breid daarbij je CSS skills steeds verder uit.
Vervolg website maken met HTML5 en CSS
Nu gaan we de website die we hebben gemaakt in “HTML leren” opmaken met CSS. Dit kan je zien als een snelle CSS cursus, waarbij je zelf aan de slag gaat. Onthoud echter dat CSS nog veel meer mogelijkheden heeft en je dit kan leren met boeken en cursussen. De website die we gaan opmaken blijft eenvoudig, het gaat er meer om dat je de syntax en werking van CSS snapt in combinatie met HTML. Feeling ermee krijgen is belangrijk.
Als je “HTML leren” en/of de video hebt gevolgd, heb je een map aangemaakt waarin een HTML bestand staat en een afbeelding. Deze afbeelding is ook zichtbaar op je website. In de map waarin je HTML bestand en de afbeelding staat, gaan we nog een map maken, genaamd “CSS”. Daarin zetten we het nieuwe CSS bestand dat we gaan aanmaken. Via Notepad++ gaan we een nieuw CSS bestand aanmaken.
Belangrijk is om de extensie “.css” achter de bestandsnaam te zetten. Zo is het herkenbaar als een echt CSS bestand. Nu gaan we in het HTML document refereren naar het CSS bestand dat we zojuist hebben aangemaakt. En zetten we een class in een <p> element en een id in het <img> element.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ProgrammeerPlaats website</title>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>
<body>
<h1>Korte beschrijving over ProgrammeerPlaats</h1>
<p class="par1">ProgrammeerPlaats is een leuke website waarop je kan leren programmeren.</p>
<p>Er zijn educatieve artikelen en video's voor de liefhebbers.</p>
<img id="img1" src="Logo ProgrammeerPlaats.png">
</body>
</html>
In het <link> element verwijs je naar het CSS bestand dat je hebt aangemaakt. In href zet je het pad neer naar het CSS bestand. Let daarbij goed op de map waarin het CSS bestand staat. In dit geval staat het CSS bestand in de map “CSS” en daarom verwijst het pad eerst naar deze map en daarna naar de naam van het bestand + de “.css” extensie. Als het CSS bestand in dezelfde map staat als het HTML document waarin de verwijzing staat, dan hoef je alleen de naam van het CSS bestand in href te zetten + “.css” extensie.
Tot slot gaan we in het CSS bestand drie HTML elementen stijlen/opmaken door middel van de drie CSS selectors te gebruiken die we in dit artikel hebben geleerd.
h1 {
font-size: 35px;
}
.par1 {
color: green;
}
#img1 {
height: 50px;
width: 75px;
}
Het <h1> element heeft nu een lettertypegrootte van 35 pixels. Het <p> element met de class “par1” is groen en het <img> element met “img1” als id heeft een hoogte van 50 pixels en een breedte van 75 pixels.
Als je de beide bestanden opslaat na de aanpassingen, kan je in de browser kijken hoe het eruit ziet. Je kan het pad kopiëren en plakken in een browser, zoals Google Chrome. Rechtermuisknop op het HTML bestand en klik op “Kopieer pad”.
Als het goed is zie je de bovenstaande beschreven aanpassingen terugkomen op je website. Probeer zelf eens wat meer aanpassingen te doen en/of de bovenstaande aanpassingen te veranderen.
Hoe nu verder?
Lees het artikel “JavaScript leren” om meer te weten te komen over JavaScript. Ook staat daar uitgelegd hoe je JavaScript toevoegt aan de website die we hebben gemaakt. Deze artikelen over HTML, CSS en JavaScript hier op ProgrammeerPlaats gaan in op de basis. Als je echt verder wil leren en meer de diepte in wil gaan, zijn de beste CSS boeken een aanrader en het platform Pluralsight. Vooral interessant is ook om te leren hoe HTML, CSS en JavaScript samenwerken met elkaar. Dit leer je eigenlijk al bij de website die we aan het maken zijn.
In “Pluralsight review en ervaringen” lees je meer over het platform. Het platform is zelfs 10 dagen helemaal gratis uit te proberen! Ga lekker aan de slag met goede boeken en/of cursussen en breid je CSS vaardigheden uit. Zit na de boeken en/of cursussen niet stil en blijf doorleren door bijvoorbeeld een website steeds verder uit te breiden en te verbeteren.
Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.