LES 8: CSS Lesoverzicht: Aan de slag Wat is CSS Kleuren Tekst Blokken Lijsten en tabellen Responsive website W3chools Samenvatting Tijd: 5 minuten Doel: Aan het einde van deze les kun je CSS in de WordPress website aanpassen. 46
Aan de slag Als je de WordPress website in je eigen stijl wil maken, heb je CSS nodig om dit voor elkaar te krijgen. Wat is CSS CSS staat voor Cascading Style Sheets. Met behulp van CSS kun je stijlen definiëren voor de opmaak van een HTML-document. Met het toenemende gebruik van het internet ontstond bij webauteurs steeds meer de behoefte aan extra mogelijkheden bij de opmaak van documenten. Als oplossing voor dit probleem zijn stylesheets geïntroduceerd. De achterliggende gedachte is de scheiding tussen structuur en presentatie: HTML moet weer zorgen voor de structuur in het document, de presentatie wordt bepaald met behulp van in stylesheets vastgelegde stijlen. Een CSS code kan je zo opdelen: html-tag {eigenschap:waarde;} html-tag eigenschap waarde In welke HTML-tag wil je de CSS toepassen Wat wil je veranderen, bijvoorbeeld de achtergrondkleur. Dit geef je aan door background-color. Als je de achtergrondkleur wil veranderen kies je bij de waarde voor een kleurcode. Dit is bijvoorbeeld #ff0000 Hier komt dan de volgende code uit. body {background-color:#ff0000;} Kleuren De eigenschap color omschrijft dat dit de voorgrond kleur is van een element. Op de website: http://www.w3schools.com/cssref/css_colorsfull.asp zie je veel verschillende kleuren met de bijbehorende HEX code. 47
Mocht je alle koppen in het document donkerrood willen hebben, dan werk je in de CSS met de eigenschap H1. En dan komt de code er als volgt uit te zien. h1 {color:#990000;} De eigenschap background-color omschrijft dat iets de achtergrond kleur is. Als je de gehele achtergrond geel/oranje wil maken dan geef je de volgende code op. body {background-color:#ffcc66;} Tekst Iets waar je op de website goed rekening mee moet houden is het font/lettertype. Als je kijkt op verschillende websites, dan zie je dat overal het font net iets anders is. Per website bekijk je namelijk welk font er bij past. Op de website: http://www.google.com/fonts staan bijna 700 fonts die je kunt lenen. Klik bij het font dat je wil gebruiken. Je wordt nu doorgestuurd naar de quick use van het font. Vink de stijlen aan die je wil. Rechts zie je hoe snel de pagina nog laadt met het font erin. Probeer er maar één of twee te kiezen. Scrol naar beneden, bij nummer 3, zie je wat je in de head van de website moet zetten en bij nummer 4 zie je hoe de CSS regel eruit komt te zien. 48
49
In WordPress kun je aangeven of je bepaalde stukken tekst bold, italic of onderlijnd wil hebben. In CSS kan je dit ook zelf regelen. Hier komen de volgende codes uit. font-style:italic font-style:normal font-weight:bold De grootte van de tekst kun je aangeven in pixels, punten, procenten en em. De code ziet er dan als volgt uit. font-size:30px font-size:12pt font-size:120% font-size:1em Het bovenstaande wordt gebruikt om het font te stijlen. De tekst kun je in het algemeen ook een stijl meegeven. Het uitlijnen van de tekst kun je in WordPress aangeven, maar mocht je dit zelf willen doen dan gebruik je het volgende: text-align:left text-align:center text-align:right text-align:justify De tekst wordt links uitgelijnd De tekst wordt in het midden uitgelijnd De tekst wordt rechts uitgelijnd De tekst wordt uitgelijnd van links naar rechts Net zoals in het programma Microsoft Word kan je in websites een tekst onderlijnen, een lijn boven de tekst zetten en een lijn door de tekst heen laten lopen. Dit doe je door middel van text-decoration. Je krijgt dan: text-decoration:underline text-decoration:overline text-decoration:line-through 50
Blokken Alle HTML elementen kunnen als blokken gezien worden. Binnen dat blok zit de content, de padding, de border en de margin. Binnen de content staat de inhoud van je HTML element, denk hierbij aan teksten en afbeeldingen. De padding is de ruimte om de content heen, maar valt nog binnen de border. Een border zit om de padding en de content heen. Een border kun je een kleur geven. Dit kan niet bij de padding en de margin. De margin is de ruimte tussen de zijde en het element dat zich ernaast bevindt. Lijsten en tabellen In de vorige les heb je gezien hoe je een tabel aanmaakt. Ook deze kan gestijld worden. Om een tabel duidelijk aan te geven kun je gebruik maken van een border. Dit is een rand om de tabel heen. Deze border kun je een breedte meegeven, een stijl en een kleur. Er zijn verschillende stijlen die je mee kunt geven. Deze zie je hiernaast. De codes die je gebruikt voor de stijl, kleur en de breedte zijn: border-style, border-color en border-width Voor de lijsten kun je ook een stijl mee geven. Dit doe je door een list-style-type mee te geven. Er zijn twee list-style-types voor de unordered list en ook twee list-style-types voor de ordered. Unordered list: Ordered list: list-style-type:circle; list-style-type:square; list-style-type:upper-roman; list-style-type:lower-alpha; 51
Responsive website Tegenwoordig kijken mensen vaker naar een website via de tablet of de mobiel, dan dat de website bekeken wordt op de computer. Daarom is het belangrijk dat de website die je maakt op al deze apparaten goed te bekijken is. Dit krijg je voor elkaar door een responsive website te maken. Tegenwoordig zijn de meeste thema s al aardig responsive. Maar het kan zijn dat er dingen zijn in de website die niet zo reageren zoals je zelf wilt. Daarom kun je zelf met CSS de website responsive maken. Kijk op: http://nmsdvid.com/snippets welke code je voor verschillende smartphones en tablets kunt gebruiken. Klik op de naam van de device die wil toevoegen. Er verschijnt nu een code die begint met @media. Kopieer dit naar je CSS bestand. Je krijgt dan dit: @media screen and (device-aspect-ratio: 40/71) { Hierbinnen komen de CSS regels te staan. Voorbeeld: body {color:#0000ff;} } W3schools Op de website van w3schools kan je veel leren over CSS. Ook kan je hier oefenen met de codes. Bezoek de website op: http://www.w3schools.com/css/default.asp Samenvatting Als je in WordPress het thema naar eigen smaak wil stijlen dan is het handig om te weten hoe de CSS codes werken. CSS staat voor Cascading Style Sheets. Een CSS code deel je op in: html-tag {eigenschap:waarde;} Naast de gewone CSS regels kun je ook regels toepassen voor een responsive website. Binnen de regel van @media komen de CSS codes te staan. 52