Mester CSS: Den komplette guiden til styling av nettsider

by
Tweet
Share
Share
Pin
0 Shares

Uten CSS ville nettsider fremstått som monotone. Dette stilsettet er avgjørende for å forme tekst, justere størrelser, velge farger og bestemme plassering av elementer på en nettside.

Hva er egentlig CSS?

Forkortelsen CSS står for Cascading Style Sheets, et språk som spesifiserer hvordan HTML-elementer skal presenteres visuelt på skjermer eller i trykt form. World Wide Web Consortium (W3C) skapte CSS i 1996.

Opprinnelig var HTML-elementer ikke utstyrt med funksjoner for å formatere nettsider, og utviklere var begrenset til å skrive ren strukturkode. Introduksjonen av tagger som i HTML 3.2 medførte imidlertid nye problemer for utviklerne.

Ettersom nettsider utviklet seg med fargerike bakgrunner, diverse skrifttyper og mange stiler, ble det kostbart og vanskelig å omskrive koden. W3C introduserte CSS som en løsning på disse utfordringene, og språket har fortsatt å utvikle seg siden.

Hvorfor er CSS viktig?

#1. CSS er effektivt

CSS eliminerer behovet for å gjentatte ganger legge til tagger for skrifttyper, elementjustering, kantlinjer, farger, bakgrunnsstiler og størrelser på hver enkelt nettside.

#2. Tidsbesparende

Ved å endre en ekstern CSS-fil, kan du enkelt transformere utseendet til hele nettstedet ditt.

#3. Tilpasningsevne til ulike enheter

Dagens brukere besøker nettsteder via en rekke enheter med forskjellige skjermstørrelser, inkludert datamaskiner, nettbrett og smarttelefoner. CSS gjør det enkelt å utvikle nettsider som tilpasser seg disse ulike skjermstørrelsene.

#4. Enkel vedlikehold

Moderne webapplikasjoner er i stadig utvikling. CSS gjør det enkelt å endre enkeltkomponenter eller hele nettstedet uten å måtte endre den underliggende koden.

Hvordan fungerer CSS sammen med HTML for å bygge nettsteder?

HTML er et grunnleggende strukturspråk som brukes til å bygge nettsider. CSS, derimot, beskriver hvordan disse nettsidene (laget med HTML) skal se ut visuelt. En nettside som er bygget med HTML og CSS, vil vanligvis ha en HTML-fil som inneholder tekst, bildelenker og HTML-koder.

Denne HTML-filen kan enten være knyttet til en separat CSS-fil via en lenke-tag, eller den kan bruke interne eller innebygde CSS-stiler. En HTML-fil kan ha en overskrift som

og et avsnitt som er markert med

. Ved hjelp av CSS kan du for eksempel instruere nettleseren om å vise all tekst i et avsnitt med fet skrift eller endre overskriften til å være 50 piksler stor og ha grønn farge.

Vi skal vise hvordan HTML og CSS samspiller i de neste avsnittene.

CSS-typer

#1. Ekstern CSS

For at en CSS skal betegnes som ekstern, kreves det en HTML-fil og en egen CSS-fil med filendelsen .css, for eksempel style.css. CSS-filen kobles til HTML-dokumentet ved hjelp av en link-tag.

Eksempel på en ekstern CSS-fil:

.main {
        text-align:center;  
    }
    .GF {
        color:red;
        font-size:50px;
        font-weight:bold;
    }
    #TP {
        color:blueviolet
        font-style:bold;
        font-size:20px;
    }

CSS-filen kan kobles til følgende HTML-dokument:

<link rel="stylesheet" href="style.css">
        <div class = "main">
            <div class ="GF">Geek Flare!!!! </div>
            <div id ="TP">
                Your favourite tech portal
            </div>
        </div>

Lenkekoden kobler det eksterne stilarket til HTML-dokumentet, mens href-attributtet angir plasseringen til det eksterne stilarket.

Det endelige resultatet av nettsiden vil se slik ut:

Ekstern CSS er den foretrukne metoden, da den muliggjør gjenbrukbare komponenter og effektiv implementering av universelle endringer i koden.

#2. Intern CSS

Intern CSS er mest egnet når du har ett enkelt HTML-dokument som krever en unik stil. Stilreglene legges til i <head>-delen av HTML-dokumentet.

Her er et eksempel på intern CSS:

    <title>Internal CSS Example</title>
    <style>
        .main {
            text-align:center;  
        }
        .GF {
            color:Red;
            font-size:70px;
        }
        .custom {
            font-style:bold;
            font-size:20px;
        }
    </style>
  <div class = "main">
        <div class ="GF">Internal CSS Demonstration</div>
        <div class ="custom">
            The Results
        </div>
    </div>

Den gjengitte nettsiden vil fremstå som følger:

Intern CSS er ikke ideell i de fleste situasjoner, da den resulterer i at koden i HTML-dokumentet blir unødvendig stor, noe som kan påvirke lastehastigheten.

#3. Innebygd CSS

Innebygd CSS innebærer å inkludere CSS-stilen direkte i HTML-koden. Du kan for eksempel style et avsnitt, en overskrift eller en div ved hjelp av innebygd CSS.

    <title>Inline CSS</title>
  <p style = "color:red; font-size:50px;
        font-style:bold; text-align:center;">
        Inline CSS Demonstration
    </p>

Det gjengitte dokumentet vil se slik ut:

Innebygd CSS er ikke anbefalt hvis du planlegger å skalere nettapplikasjonen din, da det tar lang tid å legge til en CSS-egenskap for hver HTML-tag.

Utforsk noen av de beste online kursene og bøkene for å mestre CSS.

Lag responsive nettsteder med HTML og CSS

Dette kurset lærer deg hvordan du lager responsive nettsider ved hjelp av HTML5 og CSS3. Det kreves ingen forkunnskaper innen webutvikling, og kurset dekker konsepter som boksmodellen, konfliktløsning av velgere, posisjoneringsskjemaer og arv.

Det er også et ideelt kurs hvis du vil lære å tenke ut ideer, planlegge, skissere, kode, teste og optimalisere profesjonelle nettsteder.

Avansert CSS og Sass

Dette kurset gir en grundig innføring i hvordan CSS fungerer ved å utforske emner som kaskade, spesifisitet og arv.

Kurset inneholder også moderne CSS-teknikker for å skape robuste, responsive nettsider. Det introduserer også Saas og hvordan du kan bruke det i prosjekter når du utvikler CSS, globale variabler og håndterer medieforespørsler.

Dette er også et bra kurs hvis du vil lære CSS-animasjon, da det går inn på @keyframes, animasjon og overganger.

Lær CSS

Lær CSS fra Codecademy demonstrerer hvordan du kan bruke CSS til å transformere HTML til visuelt tiltalende nettsider. Kurset er delt inn i 8 leksjoner med 6 prosjekter for å teste din forståelse.

De viktigste ferdighetene du tilegner deg i dette kurset, er hvordan du legger til stil til HTML-elementer, hvordan du kobler HTML- og CSS-filer, og hvordan du lager unike layouter for nettsider.

Lag din første nettside med HTML og CSS

Dette kurset lærer deg hvordan du bruker HTML5 og CSS3 for å lage responsive nettsider. Det gratis kurset er delt inn i 4 moduler og tar omtrent 10 timer å fullføre. Ingen tidligere programmeringskunnskaper kreves for å delta.

Grunnleggende CSS

CSS Basics er utviklet av W3Cx. I dette kurset vil du lære om gode webdesignprinsipper, grunnleggende CSS-velgere og hvordan du velger CSS-egenskaper. Kurset er delt inn i 5 moduler og tar cirka 5 uker å gjennomføre med 5–7 timers studier per uke.

Innføring i CSS3

Dette kurset introduserer deg for Cascading Style Sheets. Kurset er laget av University of Michigan og lærer deg å skrive CSS-regler, etablere gode programmeringsvaner og teste kode. Det tar omtrent 12 timer å fullføre, og du får et sertifikat når du er ferdig.

Introduksjon til HTML og CSS

Dette innføringskurset lærer deg hvordan du lager stilige og velstrukturerte nettsider ved hjelp av HTML og CSS. Du vil lære å lage nettsteder med en trelignende struktur og deretter style dem med CSS.

Dette gratis kurset passer for nybegynnere og har et læringsmodell i eget tempo. Det tar omtrent 3 uker å fullføre dette kurset, som undervises av bransjeeksperter.

CSS-veiledning

CSS-veiledning er et gratis kurs på W3schools. Det er delt inn i kapitler for enkel forståelse, og hvert kapittel inneholder eksempler og øvelser. Plattformen har også en online-editor der du kan eksperimentere med ulike konsepter via «Prøv selv»-knappen.

CSS: Den definitive guiden

Boken «CSS: The Definitive Guide» er nyttig for deg som vil lære det grunnleggende om CSS, fra velgere og spesifisitet til kaskaden. Boken dekker også flexbox, posisjonering og float-triks i detalj.

Dette er også boken for deg som vil lære å bruke CSS til å generere 2D- og 3D-transformasjoner, overganger og animasjoner. «The Definitive Guide» er tilgjengelig både som Kindle og i papirformat.

Responsivt webdesign med HTML5 og CSS

Denne boken lærer deg hvordan du bygger fremtidssikre responsive nettsteder ved hjelp av HTML5 og CSS.

Etter å ha lært triksene fra denne boken, vil nettstedene du lager fungere optimalt på datamaskiner, nettbrett og mobiltelefoner. Boken er skrevet i et lettforståelig format og er tilgjengelig i både papirformat og Kindle-format.

HTML og CSS: Design og bygg nettsider

Denne boken er egnet for alle, enten du er hobbyutøver, student eller profesjonell.

Forfatteren formidler innholdet i boken med infografikk og inspirerende bilder for å gjøre det enkelt å forstå ulike konsepter. Ressursen presenteres i en unik struktur, som gjør det enkelt å navigere i alle kapitlene.

Moderne CSS

Boken «Modern CSS: Master the Key Concepts of CSS for Modern Web Development» forklarer CSS med kodeeksempler, diagrammer og skjermbilder.

De første kapitlene introduserer farger, velgere, boksmodeller, kombinatorer og spesifisitet. Videre dekker den stiltekst, posisjonering, gradienter, kantlinjer, z-indeks og stablingskontekster. Du lærer også avanserte temaer som overganger, animasjoner, transformasjoner, flexbox og CSS-rutenett.

Avsluttende tanker

CSS sin betydning for moderne nettsteder kan ikke understrekes nok. I tillegg til å gjøre nettsider visuelt appellerende, gjør CSS det enklere å navigere på forskjellige nettsider.

Det kan være enkelt å lære CSS hvis du bruker de nevnte ressursene. Noen av kursene er gratis, mens andre koster penger.

Etter dette kan du se på CSS-juksark for utviklere og designere.