Inleiding tot CSS

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

CSS wordt gebruikt voor het stijlen en layouten van webpagina's, bijvoorbeeld om letterypes, kleuren, afmetingen en witruimte van de inhoud aan te passen, of voor het toevoegen van animaties en andere decoratieve eigenschapen. Deze module zet je op weg naar het bemeersteren van CSS, met een basis van de werking. Inclusief selectors and properties, het schrijven van CSS regels, CSS toepassen op HTML, hoe lengtes, kleuren en andere eenheden in CSS toete passen, cascading en overerven en het debuggen van CSS.

Vereisten

Voordat je aan deze module begint, zou je:

  1. Een basiskennis van computers en het web moeten hebben (gewoon kijken naar inhoud is voldoende)
  2. Een basis werkomgeving hebben zoals beschreven in Installing basic software en een begrip van hoe bestanden moerten worden aangemaakt en beheerd, zoals beschreven in Dealing with files.
  3. Een vertrouwdheid met HTML, zoals beschreven in Introduction to HTML.

Opmerking: Als je werkt op een computer, tablet of ander apparaat waar je niet de mogelijkheid hebt om bestanden aan te maken, dan kan je, voor het grootste stuk, codevoorbeelden maken in een online programma zoals JSBin of Thimble.

Handleidingen

Deze module bevat de volgende artikels. Deze omvatten al de basis theorie van CSS en bieden voldoende kansen om vardigheden te testen.

Hoe werkt CSS
In deze module starten we met een theoretische basis, kijken we naar wat CSS is, hoe de browser HTML omvormt in een DOM, hoe CSS wordt toegepast op delen van de DOM, een paar basis voorbeelden en welke code gebruikt wordt om CSS te injecteren in onze webpagina.
CSS syntax
Als volgende gaan we dieper in op de CSS syntax. Kijkend naar hoe properties en hun values samen een declaration vormen, meerdere declarations een declaration block en meerdere van deze declaration blocks en selectors samen een volledige CSS rule worden. We ronden af met te kijken naar andere CSS Syntax mogelijkheden zoals commentaren en witruimtes. 
Selectors
Selectors werden al vernoemd in het vorige artikel, maar in dit hoofdstuk gaan we hier dieper op in, welke selector types zijn er en hoe werken ze.
CSS waarden en eenheden
Er zijn veel verschillende types van CSS waarden om rekening mee te houden. Van numerieke waarden tot kleuren tot functies die een bepaalde actie uitvoeren (zoals het inladen van een achtergrond afbeelding of het draaien van een element). Sommige van deze waarden hangen vast aan bepaalde eenheden om een weergave te bepalen. Wil je een element dat 30 pixels breed is? of een van 30 centimeter?, of 30ems? In dit artikel gaan we kijken naar de meest voorkomende waarden zoals lengtes, kleuren en gemakkelijke functies, maar ook de minder voorkomende waarden zoals graden en zelfs eenheidsloze numerieke waarden.
Cascade and inheritance
CSS has two different but related systems to resolve situations where you have selector conflicts (different selectors select the same elements; which one wins and ends up being applied?) and elements nested inside other elements (some of the styling applied to the parent elements makes sense to be inherited by the child elements; some doesn't.) This article covers both systems in enough detail to be useful but not overwhelming.
The box model
The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model.
Debugging CSS
In the final article of this module, we take a look at the basics of debugging CSS, including exploring the CSS applied to a page, and other tools that can help you find errors in your CSS code.

Assessments

The following assessments will test your understanding of the CSS basics covered in the guides above.

Fundamental CSS comprehension
This assessment tests your understanding of the above guides with some carefully crafted exercises.

See also

Intermediate Web Literacy 1: Intro to CSS
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to CSS module. Learn to style HTML elements on a webpage using CSS selectors, attributes, and values.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: WartClaes
 Laatst bijgewerkt door: WartClaes,