Toepassen van list-style-position & boxeigenschappen

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 list-style-position bepaal je of de nummering of opsommingstekens buiten de lijst of binnen de lijst geplaatst moeten worden.

Ik maak een selector aan voor beide lijsten met .ul-list en komma, .ol-list.

Standaard staan ze buiten de lijst met de list-style-position: outside.

Maar niet altijd is het gewenst dat deze buiten de kantlijn komen te staan. Dan kun je deze naar binnen verplaatsen met 'inside'.

Maar nu vind ik het niet mooi dat langere zinnen die doorlopen naar de volgende regel

onder de nummering of opsommingstekens doorlopen. Dan toch maar kiezen voor de optie outside.

Met een margin-left kan ik afstand creëren naar links.

Nu komen de nummering en opsommingstekens meer naar binnen te staan. Hoef je enkel nog maar te zoeken naar de juiste afstand.

Lijsten zijn blocklevel-elementen en hiervoor kun je bij de vormgeving dus gebruik maken van de box-eigenschappen margin, border en padding.

Om extra afstand tussen de tekens en de tekst te creëren gebruik je de padding.

Maar die moet je dan opgeven aan de list-items. Hiervoor moet je eerst de selectors aanmaken.

Dat is dan .ul-list, spatie li komma, en de .ol-list spatie li.

Dan gebruik ik de eigenschap padding-left. Die zet ik op één rem.

En daarmee vergroot ik de afstand tussen de opsommingstekens en de lijst-items.

Ik wil sowieso voor de lijsten ook afstand naar boven en onder opgeven.

Dan wijzig ik voor de lijsten de eigenschap margin-left in margin.

Nu kan ik met vier waarden apart de afstand naar boven, die zet ik op één rem,

Naar rechts, die zet ik op nul, naar onderen ook op één rem en naar links houd ik hem twee rem.

Om de lijsten nog iets meer te laten opvallen zet ik de font-weight op vierhonderd.

Ik kan ook een lijn naar boven en onder creëren, daarvoor gebruik ik de eigenschap border.

En dan naar boven border-top, één pixel, solid in de kleur zwart en dat is black.

Die wil ik zowel naar boven als, ik kopieer deze regel en plak hem eronder en wijzig top in bottom.

Dan krijg ik ook een lijn naar beneden. Om meer afstand tussen de randen en de inhoud te creëren

gebruik je de padding. Ditmaal voer ik niet vier waarden in maar twee waarden.

in de eerste waarde geldt voor naar boven en naar beneden.

Die zet ik op één rem en de tweede waarde geldt voor naar links en naar rechts.

En die houd ik op nul. Je ziet dat je met de list-style-eigenschappen

in combinatie met de boxeigenschappen behoorlijk veel mogelijkheden hebt qua layout en vormgeving.

Ik zou zeggen, ga hier flink mee experimenteren.