CSS Introduktion


Innehållsförteckning

    Visa innehållsförteckning


CSS är språket vi använder för att utforma en webbsida.


Vad är CSS?

  • CSS står för Cascading Style Sheets

  • CSS beskriver hur HTML-element ska visas på skärmen, papper eller i andra medier

  • CSS sparar mycket arbete. Den kan styra layouten på flera webbsidor samtidigt

  • Externa stilmallar lagras i CSS-filer


CSS Demo - En HTML-sida - Flera stilar!

Här kommer vi att visa en HTML-sida som visas med fyra olika stilmallar. Klicka på "Stilmall 1", "Stilmall 2", "Stilmall 3", "Stilmall 4" länkar nedan för att se de olika stilarna:



Varför använda CSS?

CSS används för att definiera stilar för dina webbsidor, inklusive design, layout och variationer i visning för olika enheter och skärmstorlekar.

Exempel på CSS

body
{
  background-color: lightblue;
}

h1
{
  color: white;
  text-align: center;
}

p
{
   
font-family: verdana;
  font-size: 20px;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>



CSS löste ett stort problem

HTML var ALDRIG avsett att innehålla taggar för att formatera en webbsida!

HTML var skapad för att beskriva innehållet på en webbsida, som:

<h1>Detta är en rubrik</h1>

<p>Detta är ett stycke.</p>

När taggar som och färgattribut lades till i HTML 3.2 specifikation, startade det en mardröm för webbutvecklare. Utveckling av stora webbplatser, där teckensnitt och färginformation lades till varenda sida, blev en lång och dyr process.

För att lösa detta problem skapade World Wide Web Consortium (W3C) CSS.

CSS tog bort stilformateringen från HTML-sidan!

Om du inte vet vad HTML är föreslår vi att du läser vår HTML-handledning.


CSS sparar mycket arbete!

Stildefinitionerna sparas normalt i externa .css-filer.

Med en extern stilmallsfil kan du ändra utseendet på en hel webbplats genom att bara ändra en fil!