De reset CSS versus Normalize

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Het moet je nu goed duidelijk zijn dat elke browser eigen css-stijlen gebruikt voor het weergeven van html-elementen.

Chrome geeft hier duidelijk inzicht in met zijn user agent stylesheet.

Echter niet elke browser gebruikt dezelfde stijlen.

En daarom kan dezelfde webpagina er per browser anders uitzien.

Dit is al jaren een doorn in het oog van wetsdesigners.

Die willen juist dat de pagina er op alle browsers exact hetzelfde uitziet.

Hoe pak je dat dan aan? Eén oplossing daarvoor was alle mogelijke stijlopdrachten eruit slopen en alles terugzetten naar 'niets'.

Geen opmaak, geen vormgeving meer van de browser. Lekker beginnen met een schone lei.

Daarvoor maak je dan gebruik van een reset.css.

Eric Meyer schreef er een en die kon iedereen kopiëren van zijn site.

Klik op Copy of the file. Selecteer alle css stijlen,

en kopieer deze met Commando C.

Ik keer weer terug naar de editor en klik met mijn rechtermuis knop in de linkerkolom en kies voor Nieuw bestand.

Ik noem deze reset.css, ik dubbelklik om deze te openen.

De reset mag in zijn eigen venster staan, zo aan deze kant.

Dan plak de css die ik zojuist gekopieerd heb in het stijlblad met Commando V.

Daar is hij. Ik koppel dit externe stijlblad bovenin de -head- van mijn html-document.

Dat doe je met het html element link href =.

Geef vervolgens de route aan in dit geval de reset.css

Dan nog de verplichte attributen rel=stylesheet.

En type = "text/css ", kijk nu is alle opmaak verdwenen.

Nu zul je zelf voor alle html-elementen een stijlopdracht moeten gaan schrijven.

Het kan, maar eigenlijk is dat best veel werk. Want sommige browsergestuurde vormgeving was op zich zo slecht nog niet.

Die wilde je eigenlijk graag behouden.

Wat je vooral niet wilde waren de verschillen in vormgeving op verschillende browsers.

Daar bied normalize.css de uitkomst in. Normalize behoudt weliswaar bepaalde vormgeving,

maar zorgt voor een consistente weergave ervan op alle browsers.

En daar is het webdesigners eigenlijk om te doen.

Je kunt deze kopiëren via de download knop, daar vind je dan weer alle css stijlen.

Deze kun je allemaal selecteren met Commando A en kopiëren

Maar ik heb al een normalize.css in de local root folder staan.

Hoef ik enkel de naam van het stijlblad te wijzigen in, normalize.

En deze wordt toegepast. Hij lijkt heel erg veel op de browsergestuurde stijl, lijkt net of er niks gebeurd is.

Als ik hem even tijdelijk wegknip en je let goed op het voorvertoningsvenster,

Dit is de browsergestuurde vormgeving, dit is de pagina met het css bestand normalize.

Je kunt er nu vanuit gaan dat de vormgeving op alle browsers zo goed mogelijk gelijk is.

De meeste webdesigners maken tegenwoordig gebruik van een normalize.

Om de inhoud te bekijken kun je deze opstarten, ik zet hem er even in het venster ernaast.

En voor de echte diehards onder ons kun je in het stijlblad per css-stijl ook nog lezen wat de stijl doet en waarom.