Een Cascading Style Sheet (CSS) is een systeem voor het coderen van websites waarmee ontwerpers verschillende functies tegelijk kunnen manipuleren door bepaalde elementen aan groepen toe te wijzen. Door bijvoorbeeld een code voor de website-achtergrond te gebruiken, kunnen ontwerpers de achtergrondkleur of afbeelding op alle pagina's van de website wijzigen met één wijziging in het CSS-bestand. Hier leest u hoe u CSS maakt voor een eenvoudige website.
Stappen
Deel 1 van 4: Inline CSS schrijven
Stap 1. Zorg ervoor dat u een basiskennis hebt van HTML-tags
U moet weten hoe tags werken en van de
src
en
href
attributen.
Stap 2. Leer enkele van de basis-CSS-eigenschappen
U zult zien dat er zeer veel woningen zijn. Het is echter niet nodig om ze allemaal te leren.
-
Enkele goede basis-CSS-eigenschappen om te weten zijn:
kleur
en
font-familie
- .
Stap 3. Meer informatie over waarden voor elke respectieve eigenschap
Alle eigenschappen hebben een waarde nodig. Voor de
kleur
eigendom, u kunt bijvoorbeeld de
rood
waarde.
Stap 4. Leer meer over de
stijl
HTML-kenmerk.
Het wordt gebruikt binnen een element zoals
href
of
src
. Om het te gebruiken, plaatst u tussen de aanhalingstekens na het gelijkteken het CSS-attribuut, een dubbele punt en vervolgens de waarde van de eigenschap. Dit staat bekend als een CSS-regel.
Stap 5. Begrijp dat inline CSS meestal niet wordt gebruikt voor websites door professionele webontwikkelaars
Inline CSS kan onnodige rommel toevoegen aan een HTML-document. Het is echter een geweldige manier om kennis te maken met hoe CSS werkt.
Deel 2 van 4: Basis-CSS schrijven
Stap 1. Start het programma dat u wilt gebruiken
Het zou u in staat moeten stellen om HTML- en CSS-bestanden te maken.
Als je geen speciaal programma hebt geïnstalleerd, kun je Kladblok of een andere teksteditor gebruiken. Sla uw bestand eenvoudig op als tekstbestand en als CSS-bestand
Stap 2. Open het HTML-bestand voor uw website
Je moet dit ook openen met een HTML-editor, als je er een hebt geïnstalleerd.
Met HTML-editors kunt u HTML en CSS tegelijkertijd bewerken
Stap 3. Maak een tag in je HTML-kop
Hiermee kunt u CSS schrijven zonder dat u een apart bestand nodig heeft.
Stap 4. Kies een element waaraan u stijl wilt toevoegen en typ de naam van het element gevolgd door een reeks accolades ({ })
Om uw code leesbaarder te maken, plaatst u altijd de tweede accolade op zijn eigen regel.
Stap 5. Typ tussen de accolades uw CSS-regels zoals u zou doen met de
stijl
attribuut.
Elke regel moet eindigen met een puntkomma (;). Om uw code leesbaar te maken, moet elke regel op een eigen regel beginnen en moet elke regel worden ingesprongen.
Het is erg belangrijk op te merken dat deze stijl van invloed is op alle elementen van het geselecteerde type op de pagina. Meer specifieke styling zal in de volgende sectie worden behandeld
Deel 3 van 4: Meer geavanceerde CSS
Stap 1. Maak een CSS-bestand, geen HTML-bestand en sla het op met de
.css
verlenging.
Open ook uw HTML-bestand.
Stap 2. Maak een tag in je HTML-kop
Hiermee kunt u een apart CSS-bestand koppelen aan uw HTML-document. Uw linktag heeft drie kenmerken nodig:
rel
type
en
href
-
rel
betekent "relatie" en vertelt de browser wat de relatie is met het HTML-document. Hier zou het een waarde moeten hebben van
"stijlblad"
- .
-
type
vertelt naar welk type media wordt gelinkt. Hier zou het een waarde moeten hebben van
"tekst/css"
-
href
- hier wordt op dezelfde manier gebruikt als hoe het in een element wordt gebruikt, maar hier moet het naar een CSS-bestand linken. Als het CSS-bestand zich in dezelfde map als het HTML-bestand bevindt, hoeft alleen de bestandsnaam tussen de aanhalingstekens te worden geschreven.
Stap 3. Selecteer elementen van verschillende typen waaraan u dezelfde stijl wilt toevoegen
Voeg een … toe
klas
toeschrijven aan deze elementen en stel ze gelijk aan een klassenaam naar keuze. Dit geeft je elementen dezelfde styling.
Stap 4. Wijs toe welke styling een klas zal krijgen
Typ de klassenaam in uw CSS-bestand met een punt (.) ervoor (d.w.z.
.klas
).
Stap 5. Selecteer enkele elementen waaraan u een speciale stijl wilt toevoegen en voeg een
ID kaart
attribuut.
Id's worden in CSS gemaakt met een hekje (#) in plaats van een punt.
Id's zijn specifieker dan klassen, dus een id zal elke class-styling overschrijven als het een attribuut heeft met een andere waarde dan de klasse
Deel 4 van 4: Meer leren
Stap 1. Bezoek de w3-scholen
Het is een officiële website gericht op het aanleren van webontwikkelingsvaardigheden. De w3 heeft veel referenties voor HTML en CSS, evenals andere webtalen.
Stap 2. Zoek andere sites die specifiek gericht zijn op het leren en onderwijzen van HTML en CSS
Sites zoals CSS tricks.com zijn specifiek gericht op het aanleren van CSS- en webontwerpvaardigheden. Het vinden van betrouwbare bronnen zal u helpen bij uw leertraject.
Stap 3. Neem contact op met webdesigners en ontwikkelaars
Hun ervaring en knowhow kunnen u waardevolle kennis en vaardigheden bijbrengen.
Stap 4. Bekijk de broncode van websites die je tegenkomt
Als u de CSS van goed ontwikkelde websites bekijkt, kunt u manieren zien om delen van websites te ontwerpen. Door het als oefening te kopiëren en met de code te spelen, kunt u leren hoe u verschillende CSS-kenmerken kunt gebruiken.
