På denne nettsiden finner du:
CSS står for Cascading Style Sheets og er koden som står for å definere stilen på nettsiden, som inkluderer designet, layout og variasjoner i fremvisning basert på forskjellige enheter og skjermstørrelser. Det er mulig å velge mellom intern og ekstern CSS. Ved den interne versjonen, er CSS-koden lagt mellom start-taggen, <style> og slutt-taggen,</style>. Style-elementet selv ligger mellom start-taggen, <head> og slutt-taggen, </head>. Det er nemlig i mellom head-taggene det befinner seg metadata, som er data om HTML-dokumentet og blir ikke direkte vist frem på nettsiden. For å benytte seg av ekstern CSS, trenger man en fil som slutter på .css, som er skrevet om på GitHub- og VS Code-siden. Man må nemlig også her legge til noe i mellom head-taggene, som er <link href=”{navnpåfil}.css” rel=”stylesheet”>. Rel-attributet definerer forholdet mellom den eksterne filen og den gjeldende filen, mens href-attributet brukes til å spesifisere hvor filen befinner seg og hva den heter. Samtidig er det mulig å legge til CSS rett inn i HTML-elementene ved hjelp av style-attributet, der verdien er CSS-koden.
Ett CSS-regelsett består av en selektor og deklarasjoner. Vi starter med selektorer, som brukes til å velge HTML element(er) du vil endre utseende på. Det finnes mye man kan velge mellom angående bruk av selektorer og det går an å legge til flere så lenge man separerer dem med komma. For eksempel kan man skrive inn kun navnet på elementet som gjør at stilen(e) man spesifiserer i deklarasjonen gjelder for alle av den typen element på siden, skrive inn navnet på en klasse (punktum før navn) eller id (hashtag før navn) for å gjøre endringer på spesifikt de, eller bruke universal selektoren, som er asterisk (*) og skaper en påvirkning på alle HTML-elementene på dokumentet.
Videre innebærer deklarasjonene spesifikasjonen av den faktiske stylingen av elementene. Deklarasjonene består av egenskaper og deres verdier. Egenskapene kan blant annet være bakgrunnsfarge (background-color), størrelser (height og width), skrifttype (font-family) og mye annet. Det finnes faktisk over 100 forskjellige egenskaper du kan benytte deg av for å velge hva du vil endre på! Alle egenskaper må også ha sine egne verdier og for å separere egenskapene fra verdiene, brukes kolon. For bakgrunnsfargen er verdien en fargekode, som for eksempel kan bli oppgitt i hekskode eller RGB. Størrelsene har verdier med tall sammen med en enhet, slik som prosent eller piksler. Sist men ikke minst har vi skrifttype, som oppgis i god og gammel tekst. Etter verdien følger et semikolon som signaliserer slutten på deklarasjonen og er brukt for å separere den fra andre deklarasjoner. Samtidig er deklarasjonene omsluttet av to krøllparanteser som vender mot hverandre ({ }).
Her er to eksempler på CSS-regelsett:
Her ser du selektoren p, som har den effekten at alle p-elementer (avsnitt) i dokumentet gjennomgår endringer i utseendet i samsvar med deklarasjonene. Den første deklarasjonen er "color" som egenskap, med verdien "#f2f2f2". Dette resulterer i en lys og nesten helt hvit farge på teksten i avsnittene over hele dokumentet. Den andre deklarasjonen er "text-align" som egenskap, med verdien "center". Dette har den effekten at all teksten i avsnittene justeres slik at den plasseres midtstilt. Til slutt har vi den tredje deklarasjonen, "font-size" som egenskap, og verdien "32px". Dette fører til at størrelsen på teksten i avsnittene blir satt til 32 piksler.
Her er selektoren en klasse som har fått navnet “hovedbilde”, som er synlig ved hjelp av punktumet forran navnet. Dette skaper da en endring etter det som står i deklarasjonen hos alle elementer som har “class=”hovedbilde”” som attribute. Først har vi “width” som egenskap og “20 cm” som tilsvarende verdi. Dette gjør at bredden til elementet blir 20 centimeter. Videre har vi “border” som egenskap og hele tre verdier: “2px”, “solid” og “#007bff”. Dette lager en kant rundt elementet som er to piksler bred, har en solid stil som er en enkel og ensfarget kant og har en blå farge. Til slitt har vi egenskapen “opacity” med verdien “0.5”. Dette gjør elementet halvt gjennomsiktig, da i dette tilfellet verdien 0 betyr helt gjennomsiktig og verdien 1 betyr helt synlig.