De css-selectors (html-tag,id, class)

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

Volgende video: De pseudo-class selectors

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.

We zijn bijna zover dat we aan de slag kunnen. Nog even één ding.

Ik wil je eerst nog vertellen welke belangrijke css-selectors er allemaal zijn.

Maak een nieuw css-bestand aan.

Klik met de rechtermuisknop ingedrukt op de linkerkolom en kies voor Nieuw bestand.

Noem deze main.css.

Koppel na de normalize.css dit stijlblad aan de pagina.

Hiervoor kun je van de index de normalize link kopiëren met Commando C.

En plakken met Commando V, hoef ik enkel nog de naam aan te passen in main.css. Zo.

Deze main kan hier weg ik ga mijn andere kolom activeren. Dubbelklik op main en dit is mijn lege stijlblad

Nu leest eerst de browser de normalize.css in wat zorgt voor gelijke weergave op alle browsers.

Daarna bepaal jij jouw vormgeving in dit stijlblad, de main.css.

Als je een html-element wilt vormgeven dan voldoet het om direct de naam van het html-element te plaatsen.

Bijvoorbeeld -body- accolade openen, accolade sluiten.

En tussen de accolades plaats je de declaraties. Je start met de eigenschap, bijvoorbeeld background-color.

dubbele punt, daarna de waarde, bijvoorbeeld 'beige'. En dan puntkomma.

Ga ik even door. Het h-twee element wordt meerdere keren op de pagina gebruikt.

Ik ga de vormgeving voor de h-twee bepalen. Dat doe ik met de selector h-twee, accolade openen accolade sluiten.

En dan de declaratie ertussen. Color, dubbele punt 'brown', puntkomma om af te sluiten.

Alle h-twee's op deze pagina wijzigen nu in de kleur bruin.

Als ik naast de h-twee ook de h-één aan deze vormgeving wil verbinden

kan ik voor dezelfde stijlopdracht een tweede selector toevoegen.

Dit doe je door de selectors te scheiden met een komma.

Typ achter h-twee een komma, spatie h-één en voilà ook de hoofdkop wordt nu bruin.

Ik maak dit weer even ongedaan. Zo., nu zijn enkel beide h-twee's nog bruin.

Wat als ik slechts één ervan van kleur had willen wijzigen.

Hiervoor moet ik ervoor zorgen dat ik één van deze h-twee's apart kan benaderen.

Dat doe je door een class te verbinden aan het element.

Plaats in het h=twee element het attribuut class=" ".

Dubbele quotes en je mag zelf de naam bedenken voor de class. Ik noem deze "tip".

Bedenk wel dat je bij dit soort naamgevingen nooit gebruik maken van spaties of vreemde leestekens.

Gebruik het liefst alleen letters, eventueel met een scheidingsstreepje of underscore om de naam leesbaar te houden.

Nu wijzig ik de selector in h-twee, punt tip.

Een class geef je in css aan met een punt. Nu wordt enkel de h-twee met de classnaam 'tip' anders vormgegeven.

Je kunt ook een id geven aan een html-element. Ik wijzig de class in id.

Houd dezelfde naamvoering aan maar dan moet ik de selector nog wel gaan aanpassen.

Voor een id gebruik je daarvoor het hashtag-teken.

Regel is dat je een id maar één keer mag toepassen op een pagina.

En classes mag je juist meerdere malen toepassen.

Daarom zul je het meest gebruik gaan maken van een class.

Dus ik wijzig de id weer in een class. En pas dan ook de selector weer aan met een punt.

Classes kun je dus aan verschillende html-elementen verbinden. Kijk maar.

Ik plaats deze class nu ook binnen dit em-element, alleen de bruine kleur wordt niet toegepast.

Dat komt omdat ik in mijn stijlblad bepaal dat deze classnaam alleen als hij is toegepast op h-twee, van kleur moet veranderen.

Als ik hem op alle classnamen wil toepassen, verwijder ik h-twee.

Nu zeg ik dat voor alle elementen met classnaam tip deze kleurwijziging mag worden toegepast.

Je kunt met de selector dus heel precies de route naar het html element aangeven.

Dit zijn voor nu en de komende video's de belangrijkste selectors.

Je maakt vooral gebruik van de html-tags, meestal in combinatie met een class.

En heel af en toe ook in combinatie met een id.