Pseudo-element first-letter & first-line

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.

Met de pseudo-elementen first-letter en first-line kun je de vormgeving bepalen voor de eerste letter of de eerste regel.

Pseudo elementen bieden de mogelijkheid om de vormgeving te bepalen voor elementen die voldoen aan die criteria.

Zo kun je bijvoorbeeld het pseudo-element combineren met de h-één.

En daarmee de vormgeving voor de eerste letter van de kop h-één bepalen.

Of je combineert bijvoorbeeld het pseudo-element 'first-line' met de 'p' van de paragrafen.

En hiermee kun je dan de eerste regel van alle paragrafen vormgeven.

Je combineert dus de html selector met het pseudo-element.

Voor dit hoofdstuk maken we gebruik van de local root folder css--.

Ga naar Bestand > Open map en zorg dat de map css-- is aangewezen.

Open daarna de bestanden index.html en main.css.

Ik wil de eerste letters van de kop h-één een andere vormgeving geven.

Ik zoek de selector van de h-één op en ik plaats daarna de volgende pseudo selector.

De h-één::first-letter.

Ik hou het even eenvoudig en kies alleen maar een andere kleur en die maak ik oranje met 'orange'.

Zie dat de eerste letter van de h-één nu een andere kleur heeft gekregen.

Als ik de eerste regels van mijn paragrafen anders wil vormgeven, dan doe ik dat met het pseudo element 'first-line'.

Ik zoek de selector op van mijn paragrafen. En plaats hierna het pseudo element p::first-line.

Ditmaal kies ik voor de eigenschap font-weight en die maak ik vetter met .

Ik kan ook een andere kleur kiezen. Ik plaats color.

Eventueel kun je weer uit het lijstje met bestaande kleuren een kleur kiezen.

Ik neem deze blauwe waarde over en die plaats ik bij color.

Elke eerste regel van de paragraaf wordt nu vet en in blauw geplaatst.

Ook als ik mijn browser-venster breder maak, waardoor de eerste regel veel langer wordt.

Met een pseudo-element bepaal je dat alle tekst dat past op de eerste regel

Wordt vormgegeven conform de stijlopdracht die je hieraan hebt gegeven.