Ett steg mot att bemästra webbdesign

av

Grunderna i webbutveckling: Vikten av CSS och hur man länkar det till HTML

Webbutveckling bygger på tre grundläggande tekniker: HTML, CSS och Javascript. HTML ger strukturen för webbplatser genom att definiera de olika elementen som visas.

CSS, eller Cascading Style Sheets, ansvarar för hur dessa HTML-element visas visuellt. Javascript, å andra sidan, lägger till interaktivitet och dynamik till webbsidor.

CSS är särskilt viktigt för att skapa visuellt tilltalande gränssnitt med en optimal användarupplevelse. Det styr hur webbinnehåll presenteras och utformas, och det används för att definiera sidornas layout, utseende och stil.

Med CSS kan man anpassa hur innehållet visas, till exempel genom att ändra typsnitt, färger, kanter, marginaler, avstånd och bakgrunder.

CSS är även avgörande för att skapa responsiva webbplatser som anpassar sig till olika skärmstorlekar och enheter. Dessutom säkerställer CSS enhetlighet i stil på olika sidor inom en webbplats, samt tillgänglighet för användare med funktionshinder.

Om man vill anpassa en webbplats efter ett specifikt varumärke, med rätt färger och stil, är CSS det verktyg som gör det möjligt.

Utan CSS skulle webbplatser sannolikt ha ett mycket enformigt utseende, med enkla designer utan stil, färger eller bakgrunder. De skulle inte heller vara responsiva eller ge möjlighet till anpassning för att representera ett varumärke.

Därför är CSS ett viktigt verktyg för alla webbutvecklare. För att använda CSS på en webbplats måste den länkas till sidans HTML. HTML beskriver själva elementen och innehållet på sidan, och CSS används sedan för att forma hur dessa element visas.

Den här artikeln kommer att guida dig genom hur du kopplar CSS till HTML. Innan vi går in på detta, ska vi utforska de olika sätten du kan skriva CSS och applicera det på dina HTML-element.

Olika metoder för att inkludera CSS i HTML

Det finns tre huvudmetoder för att inkludera CSS i HTML-filer:

#1. Inline-stilar

Denna metod innebär att man skriver CSS-stilar direkt på varje HTML-element. Ett exempel på detta:

<body style="background-color: yellow;">
  <h1 style="color: orangered; font-size: 40px;">adminvista.com</h1>
  <p style="color: blue; font-size: 16px;">adminvista.com är en onlinepublikation som producerar högkvalitativa artiklar om
    Teknik, Affärer och Fintech för att hjälpa
    företag och människor att växa.</p>
</body>

Även om denna metod kan verka enkel för att lägga till CSS, så är det inte ett bra sätt för storskalig styling. Det är tidskrävande, gör koden svårläst och svår att underhålla, och kan påverka webbsidornas laddningstider.

#2. Intern CSS

Denna metod innebär att man skriver stilar för en webbsida inom ett <style> element, som placeras i <head> delen av HTML-sidan. Här är ett exempel:

<html lang="sv">
<head>
  <title>adminvista.com</title>
  <style>
    body {
      background-color: yellow;
    }

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

    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>adminvista.com</h1>
  <p>adminvista.com är en onlinepublikation som producerar högkvalitativa artiklar om
    Teknik, Affärer och Fintech för att hjälpa
    företag och människor att växa.</p>
</body>
</html>

Denna metod är visserligen enkel men rekommenderas inte heller, då det försvårar möjligheten att dela stilmallar mellan olika HTML-dokument.

#3. Extern CSS-stilmall

Denna metod innebär att man skapar en separat CSS-fil för att lagra all styling för webbplatsen. Denna CSS-fil länkas sedan till ett HTML-dokument för att designa webbsidans element. Här är ett exempel på en extern CSS-fil:

body {
  background-color: yellow;
}

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

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

Detta är den rekommenderade metoden för att lägga till CSS till HTML-dokument. Den gör det inte bara enkelt att dela stilar mellan olika filer utan separerar även HTML från CSS, vilket gör koden mer organiserad, lättläst och lätt att underhålla.

Så här kopplar man CSS till HTML

För att lära dig koppla CSS till HTML, börja med att skapa en mapp och skapa två filer: en HTML-fil med namnet index.html och en CSS-fil med namnet style.css. Du kan välja andra filnamn men ändelserna bör vara .html och .css.

Öppna båda filerna i din textredigerare. Kopiera och klistra in följande HTML-kod i index.html-filen:

<html lang="sv">
<head>
  <title>adminvista.com</title>
</head>
<body>
  <h1>adminvista.com</h1>
  <p>adminvista.com är en onlinepublikation som producerar högkvalitativa artiklar om
    Teknik, Affärer och Fintech för att hjälpa
    företag och människor att växa.</p>
  <p>Några av de ämnen som behandlas av adminvista.com inkluderar:</p>
  <ul>
    <li>Programmering</li>
    <li>Cyber Säkerhet</li>
    <li>Digital Forensik</li>
    <li>Produktivitet</li>
    <li>Spel</li>
  </ul>
</body>
</html>

Du kan öppna HTML-filen i en webbläsare genom att navigera till mappen och dra filen till webbläsarens fönster.

Alternativt kan du högerklicka på HTML-filen och välja en webbläsare från menyn. Om du dubbelklickar på filen öppnas den i din standardwebbläsare.

I nuläget visas webbsidan på följande sätt:

För att definiera hur elementen i HTML-filen ska visas behöver vi en CSS-fil med stilar. I den CSS-fil som du skapade, klistra in följande kod:

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%);
}

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

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

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

Nu när CSS-filen är klar, är nästa steg att länka den till HTML-filen. Lägg till följande rad inom <head>-delen av HTML-filen:

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

I raden ovan:

  • <link>: är ett HTML-element som används för att specificera relationer mellan HTML-dokumentet och en extern resurs, i detta fall en CSS-fil. Det är detta element vi använder för att länka CSS-filer till HTML.
  • rel=”stylesheet” – rel står för relation. Detta attribut anger relationen mellan HTML-dokumentet och den länkade resursen. Här anges “stylesheet” för att definiera att den länkade filen är en CSS-fil.
  • href=”style.css”: används för att specificera sökvägen till CSS-filen. Eftersom CSS-filen ligger i samma mapp som HTML-filen, är sökvägen filnamnet.

Hela HTML-koden visas nedan:

<html lang="sv">
<head>
  <title>adminvista.com</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>adminvista.com</h1>
  <p>adminvista.com är en onlinepublikation som producerar högkvalitativa artiklar om
    Teknik, Affärer och Fintech för att hjälpa
    företag och människor att växa.</p>
  <p>Några av de ämnen som behandlas av adminvista.com inkluderar:</p>
  <ul>
    <li>Programmering</li>
    <li>Cyber Säkerhet</li>
    <li>Digital Forensik</li>
    <li>Produktivitet</li>
    <li>Spel</li>
  </ul>
</body>
</html>

Så här ser HTML-filen ut i webbläsaren efter att ha länkat den till CSS-filen:

Bästa metoder för att länka CSS till HTML

Här är några bra metoder att följa när du länkar CSS till HTML:

  • Använd en extern stilmall. Det bästa och rekommenderade sättet att lägga till CSS är att använda en extern CSS-fil och länka den till HTML. Det gör koden mer modulär, lättläst, enkel att felsöka och lätt att underhålla.
  • Placera <link> elementet i <head> delen av HTML-dokumentet. Ett vanligt misstag är att placera <link> elementet i <body>. Detta leder till fel och gör att stilarna inte visas.
  • Använd relativa sökvägar. När du länkar CSS till HTML, använd relativa sökvägar istället för absoluta sökvägar. Detta säkerställer att ditt projekt är portabelt.
  • Kombinera CSS-filer när de används på samma sida. För att säkerställa snabbare laddningstider, kombinera flera CSS-filer till en fil, särskilt om de innehåller stilar för en enskild sida.
  • Kontrollera stavningen när du länkar CSS till HTML. Ett vanligt nybörjarfel är att stava rel=”stylesheet” fel och använda pluralformen “stylesheets”. Om stilarna inte visas, kontrollera så att stavningen är korrekt.

Förutom att länka CSS till HTML korrekt, säkerställ att CSS-filerna har beskrivande namn, är organiserade med kommentarer, och att klasser och ID:n används på ett genomtänkt sätt. Detta kommer att leda till en smidigare utvecklingsprocess.

Slutsats

CSS är ett viktigt verktyg för att skapa attraktiva webbplatser som är behagliga att använda. Som utvecklare hjälper kunskap om CSS dig att skapa bättre gränssnitt och användarupplevelser. Använd en extern CSS-fil och följ riktlinjerna i artikeln för att länka CSS och HTML korrekt.

Du kan även utforska hur man använder SVG i HTML för att skapa fantastisk grafik.