HTML (Hypertext Markup Language) er kodespråket som fungerer som grunnlaget for all nettutvikling. Hvis HTML er det første språket du vil lære når du er interessert i å bygge nettsider, er CSS ofte en god nummer to.
Enten du er en frontend-utvikler, en fullstack-utvikler eller noen som begynner med webdesign, er hvordan du bruker et CSS-stilark noe du definitivt bør vite hvordan du gjør!
Hva er CSS? Og hvordan forholder det seg til HMTL?
CSS står for Cascading Style Sheets med vekt på «Style» og den nyeste versjonen
brukes til å strukturere et nettdokument som definerer ting som overskrifter og avsnitt, og lar deg bygge inn bilder, video og andre medier. Tenk på HTML som grunnlaget og Cascading Style Sheets som de estetiske valgene. Du trenger både å lage en nettside og JavaScript for å gjøre den interaktiv.
Hvordan fungerer CSS?
CSS 3 bringer stil til nettsidene dine ved å samhandle med HTML-elementer ved hjelp av syntaks. Elementer er de individuelle HTML-komponentene på en nettside – for eksempel et avsnitt – som i HTML kan se slik ut:
<p>Dette er mitt avsnitt!</p>
Hvis du ønsket å få dette avsnittet til å virke rosa og fet for folk som ser på nettsiden din gjennom en nettleser, ville du brukt CSS-kode som ser slik ut:
p { farge:rosa; font-weight:bold; }
I dette tilfellet kalles «p» (avsnittet) for «velgeren» – det er den delen av Cascading Style Sheets-koden som spesifiserer hvilket HTML-element CSS-stilen vil påvirke. I CSS skrives velgeren til venstre for den første krøllede parentesen. Informasjonen mellom krøllete parenteser kalles en erklæring, og den inneholder egenskaper og verdier som brukes på velgeren. Egenskaper er ting som skriftstørrelse, farge og marger, mens verdier er innstillingene for disse egenskapene, og du kan endre disse ved å bruke endringer på velgeren. For eksempel, «bakgrunnsposisjon», «kantfarge», «kantstil» og «kantbredde, «og «tekstjustering» er egenskaper og «topp», «rød», «prikket», «tykk» og «venstre» er verdier.
For et praktisk eksempel, i eksemplet ovenfor, er «farge» og «font-vekt» begge egenskaper, og «rosa» og «fet» er verdier.
Ekstern, intern eller innebygd CSS?
Du lurer kanskje på hvordan denne CSS-koden faktisk brukes på HTML-innhold. På samme måte som HTML, skrives Cascading Style Sheets i enkel, ren tekst gjennom et tekstredigeringsprogram eller et tekstbehandlingsprogram på datamaskinen din, og det er tre hovedmåter å legge til CSS-koden på HTML-stilte sider. CSS-kode (eller et stilark) kan være ekstern, intern eller inline.
Eksterne stilark lagres som en CSS-fil (.css) og kan brukes til å bestemme utseendet til et helt nettsted gjennom én fil. For å bruke denne typen stilark, må html-filene dine inkludere en overskriftsdel som kobler til det eksterne stilarket.
Interne stilark er CSS-instruksjoner skrevet direkte inn i overskriften på en bestemt HTML-side. Dette er spesielt nyttig hvis du har en enkelt side på et nettsted som har et unikt utseende.
Til slutt er innebygde stiler utdrag av CSS skrevet direkte inn i HTML-kode, og gjelder bare for en enkelt kodeforekomst, uten en ekstra CSS-fil. Generelt sett er et eksternt stilark den mest effektive metoden for å implementere CSS på et nettsted, mens interne stilark kan brukes på en sak etter sak når individuelle stilendringer må gjøres.
