Se det mest grunnleggende innen CSS
Hva er CSS?
CSS er en forkortelse for Cascading Style Sheets, som er CSS-koder du skriver for å gi styling til din hjemmeside. CSS koder kan modifisere farger, fontstørrelser, bakgrunnsbilder og mange andre elementer på nettsiden din.
HTML fungerer som byggeklossene for nettsiden din og gir strukturen, mens CSS legger til stil og presentasjon for å gjøre nettsiden din mer attraktiv og brukervennlig.
Hva er et CSS dokument?
Et CSS dokument er en fil som inneholder CSS-koder. CSS-dokumentet består av en .css-filtype som definerer dokumentet som CSS. Dette dokumentet kan kobles til et HTML-dokument ved hjelp av en link-tagg.
Så la oss se på noen CSS-koder.
CSS-koder
CSS-koder er koder som bestemmer utseendet til elementer på en nettside. Her er noen vanlige CSS-koder og hva de gjør:
- color: endrer fargen på teksten
- font-size: endrer størrelsen på fonten
- background-color: endrer bakgrunnsfargen
- border: legger til en ramme/kant rundt et element
h2 {
color:red;
font-size:30px;
}I denne kodebiten blir h2-elementet stylet ved å endre fargen til rød og øke skriftstørrelsen til 30 piksler.
Bruk av CSS i HTML dokumentet
Du vil i hovedsak bruke to metoder for å style forskjellige HTML-elementer. Vanligvis vil du skrive CSS i et eget CSS-dokument, men det kan også hende du ønsker å skrive CSS direkte i HTML-dokumentet ditt.
<h2 style="color:red">bare en tittel</h2>For å style en HTML-tagg må du følge en bestemt syntaks. Syntaks refererer til hvordan en kode skal skrives. Syntaksen for å style et HTML-element inneholder “style”-attributten og en styling-verdi. Dette betyr at du må skrive inn “style” i starten av attributten, deretter skrive inn styling-verdien innenfor anførselstegn. Styling-verdien kan inkludere ulike egenskaper, som for eksempel farge eller størrelse.
Ved å bruke denne syntaksen, kan du enkelt style og tilpasse elementene på nettsiden din etter dine behov og ønsker.
CSS i eget dokument
Selv om vi kan skrive CSS-koder direkte i HTML-dokumentet, vil det være mer oversiktlig å ha CSS-kodene samlet i et eget CSS-dokument. Dette gjør det enklere å holde orden på kodene og gjøre endringer mer effektivt.
Lag et CSS dokument
I VSCode kan du enkelt lage et nytt CSS-dokument ved å velge “New File” og deretter lagre det med et valgfritt navn, så lenge filtypen ender med “.css”. Dette vil automatisk gjøre det mulig å bruke CSS-koder for å style HTML-dokumentet ditt.
Koble CSS med HTML
Når du har laget et CSS-dokument, må du koble det til HTML-dokumentet ditt slik at stylingen tar effekt på nettsiden din. Dette gjøres ved å legge til følgende kode i head-seksjonen i HTML-dokumentet ditt:
<link rel="stylesheet" href="style.css">Kodebiten over er delt inn i tre deler:
- <link> er koden for å koble sammen dokumentene.
- rel=”stylesheet” forteller nettleseren at dette er et stilark.
- href=”style.css” angir filbanen til CSS-dokumentet som kalles “style”.
Hvis CSS-dokumentet ditt heter “design.css”, må href-navnet være “design.css” og ikke “style.css”.
Ved å legge til denne koden i head-seksjonen på HTML-siden din, vil nettleseren kunne laste inn CSS-dokumentet og bruke stylingen på nettsiden din. Det er viktig å huske på at filbanen må være riktig angitt, slik at nettleseren kan finne CSS-filen og koble den sammen med HTML-filen din.
CSS syntaks i et CSS dokument
Syntaksen for CSS består av tre deler:
- selector lar deg bestemme hvilket element som skal styles. En selector kan være en tagg, attributt, class eller id.
- property er en bestemt style (font størrelse, tekst farge, bakgrunnsfarge…).
- value er en verdi av property(10px, grønn, #424242…).
Du kan style et element med mange properties og values så lenge du legger til stylingen imellom krøllparantes og ender value med semikollon.
Kommentar
En CSS kommentar skrives på en litt annen måte enn hva vi gjør i HTML. To skråstreker er en kommentar for en linje, mens to skråstreker med to stjerner på innsiden lar deg skrive en kommentar med flere linjer.
/* Dette er en kommentar */CSS kommentarer skrives på en litt annen måte enn HTML-kommentarer. Du kan bruke to skråstreker med to stjerner på innsiden for å skrive en CSS-kommentar. Dette lar deg legge til kommentarer i CSS-koden din uten at det påvirker hvordan koden fungerer. Med kommentarer kan du også forklare hva koden gjør og hvorfor den er der, noe som kan være nyttig for å huske hva du har gjort og for å hjelpe andre som ser på koden din.
Oppsummering av CSS
- CSS er stylingen på en nettside
- Et CSS-dokument er en fil med filtypen .css
- Du kan skrive CSS-koder i et HTML-dokument, og i ett CSS-dokument
- CSS-syntaksen består av en selector, property, og value
