Mester CSS: Guide til elegant nettdesign

by
Tweet
Share
Share
Pin
0 Shares

Grunnleggende om nettutvikling: Betydningen av CSS og hvordan koble det til HTML

Nettutvikling hviler på tre fundamentale pilarer: HTML, CSS og JavaScript. HTML strukturerer innholdet på en nettside ved å definere elementene som utgjør siden.

CSS (Cascading Style Sheets) definerer hvordan disse HTML-elementene skal presenteres visuelt. Javascript brukes for å legge til interaktivitet og dynamisk funksjonalitet.

CSS er spesielt viktig for å skape visuelt tiltalende brukergrensesnitt og en god brukeropplevelse. Det kontrollerer utseendet og stilen til nettinnhold, inkludert layout, presentasjon og design.

Med CSS kan man endre utseendet på innholdet, manipulere skrifttyper, farger, kanter, marger, mellomrom og bakgrunner.

CSS spiller også en nøkkelrolle i å skape responsive nettsteder som tilpasser seg ulike skjermstørrelser og enheter. Det sørger for konsistente stiler på tvers av nettstedets sider og bidrar til å gjøre nettsteder tilgjengelige for alle, inkludert personer med funksjonsnedsettelser.

Dersom du ønsker å tilpasse nettstedet til din merkevare og bruke merkefargene dine, er CSS det verktøyet som gir deg denne muligheten.

Uten CSS ville nettsteder sett nokså like ut, med kjedelige design uten stiler, farger, sveveeffekter eller bakgrunner. De ville heller ikke være responsive eller ha mulighet for tilpasning for å reflektere en spesifikk merkevare.

Derfor er CSS et viktig redskap for nettutviklere. For å bruke CSS på et nettsted må det kobles til HTML-koden. HTML beskriver elementene og innholdet på et nettsted, mens CSS definerer hvordan disse elementene skal se ut.

Denne artikkelen vil forklare hvordan CSS kobles til HTML. Men først skal vi se på de ulike måtene å skrive CSS og bruke det til å style HTML-elementer.

Ulike metoder for å inkludere CSS i HTML

Det finnes tre hovedmetoder for å inkludere CSS i HTML-filer:

#1. Inlinestiler

Denne metoden innebærer å skrive CSS-stiler direkte inn i hvert HTML-element, som illustrert nedenfor:

  <body style="background-color: yellow;">
    <h2 style="color: orangered; font-size: 40px;">tipsbilk.net</h2>
    <p style="color: blue; font-size: 16px;">tipsbilk.net er en online publikasjon som produserer artikler av høy kvalitet innenfor teknologi, forretning og fintech for å hjelpe bedrifter og mennesker med å vokse.</p>
  </body>

Selv om denne metoden er enkel, er det ikke en effektiv måte å legge til CSS. Det er tidkrevende, gjør koden vanskelig å lese og vedlikeholde, spesielt ved omfattende styling, og kan negativt påvirke lastetiden for nettsider.

#2. Intern CSS

Med intern CSS skrives stilene for en nettside i et <style>-element plassert i <head>-delen av HTML-siden. Et eksempel ser du nedenfor:

  <html lang="no">
    <head>
      <title>tipsbilk.net</title>
      <style>
        body {
          background-color: yellow;
        }

        h2 {
          color: orangered;
          font-size: 40px;
        }

        p {
          color: blue;
          font-size: 16px;
        }
      </style>
    </head>
    <body>
      <h2>tipsbilk.net</h2>
      <p>tipsbilk.net er en online publikasjon som produserer artikler av høy kvalitet innenfor teknologi, forretning og fintech for å hjelpe bedrifter og mennesker med å vokse.</p>
    </body>
  </html>

Selv om denne metoden er enkel å implementere, er den ikke ideell fordi den gjør det vanskelig å dele stiler mellom ulike HTML-dokumenter.

#3. Eksternt CSS-stilark

Dette innebærer å lage en egen CSS-fil for å samle all styling for HTML-sidene. Denne CSS-filen blir deretter koblet til et HTML-dokument for å style elementene på nettsiden. Her er et eksempel på en ekstern CSS-fil:

    body {
      background-color: yellow;
    }

    h2 {
      color: orangered;
      font-size: 40px;
    }

    p {
      color: blue;
      font-size: 16px;
    }

Dette er den anbefalte metoden for å legge til CSS i HTML-dokumenter. Det forenkler deling av stiler mellom ulike filer og skiller HTML fra CSS. Dette gir modulær kode som er lett å lese og vedlikeholde.

Slik kobler du CSS til HTML

For å lære hvordan du kobler CSS til HTML, opprett en mappe og lag en HTML-fil kalt «index.html» og en CSS-fil kalt «style.css» i den. Du kan bruke andre navn for filene, men filendelsene må være henholdsvis «.html» og «.css».

Åpne begge filene i en tekstredigerer. Lim inn følgende kode i HTML-filen:

  <html lang="no">
    <head>
      <title>tipsbilk.net</title>
    </head>

    <body>
      <h2>tipsbilk.net</h2>
      <p>tipsbilk.net er en online publikasjon som produserer artikler av høy kvalitet innenfor teknologi, forretning og fintech for å hjelpe bedrifter og mennesker med å vokse.</p>
      <p>Noen av temaene som dekkes av tipsbilk.net inkluderer:</p>
      <ul>
        <li>Programmering</li>
        <li>Cyber Security</li>
        <li>Digital Forensics</li>
        <li>Produktivitet</li>
        <li>Gaming</li>
      </ul>
    </body>
  </html>

Du kan åpne HTML-filen i en nettleser ved å åpne nettleseren, navigere til mappen der HTML-filen befinner seg, og deretter dra filen inn i nettleseren.

Alternativt kan du høyreklikke på HTML-filen og velge en nettleser fra rullegardinmenyen. Ved å dobbeltklikke på filen vil den åpnes i standardnettleseren.

Foreløpig ser nettsiden vår slik ut:

For å definere hvordan elementene i HTML-filen skal se ut, trenger vi en CSS-fil med all styling. Lim inn følgende kode i CSS-filen du opprettet:

    body {
      background: rgb(245,235,224);
      background: linear-gradient(90deg, rgba(245,235,224,1) 0%, rgba(227,213,202,1) 35%, rgba(212,163,115,1) 100%);
    }

    h2 {
      color: #fb5607;
      font-size: 40px;
    }

    p {
      color: #0f4c5c;
      font-size: 16px;
      font-weight: 700;
    }

    li {
      color: #00b4d8;
      font-weight: 400;
    }

Nå som CSS-filen er klar, er neste steg å koble den til HTML-filen. For å koble «index.html» til «style.css», legg til følgende linje i <head>-delen av HTML-filen:

  <link rel="stylesheet" href="style.css">

I koden over:

  • <link>: er et HTML-element som brukes for å spesifisere forholdet mellom det aktuelle HTML-dokumentet og en ekstern ressurs, i dette tilfellet en CSS-fil. Det brukes til å koble CSS-filer til HTML-filer.
  • rel=»stylesheet» – rel står for relasjon. Dette er et attributt som legges til <link>-elementet for å spesifisere forholdet mellom HTML-dokumentet og ressursen som kobles til. I dette tilfellet er det satt til «stylesheet» for å indikere at den koblede filen er en CSS-fil.
  • href=»style.css»: brukes for å spesifisere banen til CSS-filen. Banen oppgis som en streng til «href». Siden CSS-filen ligger i samme mappe som HTML-filen, er banen ganske enkelt navnet på CSS-filen.

Hele HTML-koden ser slik ut:

  <html lang="no">
    <head>
      <title>tipsbilk.net</title>
      <link rel="stylesheet" href="style.css">
    </head>

    <body>
      <h2>tipsbilk.net</h2>
      <p>tipsbilk.net er en online publikasjon som produserer artikler av høy kvalitet innenfor teknologi, forretning og fintech for å hjelpe bedrifter og mennesker med å vokse.</p>
      <p>Noen av temaene som dekkes av tipsbilk.net inkluderer:</p>
      <ul>
        <li>Programmering</li>
        <li>Cyber Security</li>
        <li>Digital Forensics</li>
        <li>Produktivitet</li>
        <li>Gaming</li>
      </ul>
    </body>
  </html>

Slik ser HTML-filen vår ut i nettleseren etter at den er koblet til CSS-filen:

Beste praksis for å koble CSS til HTML

Her er noen gode fremgangsmåter du bør følge når du kobler CSS til HTML:

  • Bruk eksternt stilark: Den beste og anbefalte måten å legge til CSS på, er å bruke en ekstern CSS-fil og koble den til HTML-filen. Dette gir modulær kode, som er lettere å lese, feilsøke og vedlikeholde.
  • Plasser <link>-elementet i <head>-delen av HTML-dokumentet. En vanlig feil er å legge <link>-elementet i <body>. Dette vil føre til feil, og stilene vil ikke vises i HTML-dokumentet.
  • Bruk relative baner. Når du kobler CSS til HTML, må du også spesifisere plasseringen til CSS-filen. Bruk relative baner fremfor absolutte baner, for å sikre at prosjektet er overførbart.
  • Kombiner CSS-filer når de brukes på samme side. For å oppnå raskere lastetider og bedre ytelse, kombiner flere CSS-filer til én fil, spesielt dersom de inneholder stiler for samme side.
  • Sørg for riktig stavemåte når du kobler CSS til HTML. En vanlig nybegynnerfeil er å stave «rel=»stylesheet»» feil eller bruke flertallsformen «stylesheets». Hvis stilene ikke vises, dobbeltsjekk stavemåten.

I tillegg til å koble CSS til HTML-koden på riktig måte, bør du sørge for at CSS-filene har beskrivende navn, god kodeorganisering med kommentarer, og at du bruker klassenavn og ID-er med omhu. Dette vil bidra til en bedre utviklingsopplevelse.

Konklusjon

CSS er et viktig verktøy for å skape estetiske nettsider som er behagelige å bruke. Som utvikler vil kunnskap om CSS hjelpe deg med å skape bedre brukergrensesnitt og brukeropplevelser. For å bruke CSS i HTML-koden, må du lage en ekstern CSS-fil og følge retningslinjene i denne artikkelen for å koble filene korrekt sammen.

Du kan også undersøke hvordan du kan bruke SVG i HTML for å designe fantastisk grafikk.