Grunderna i CSS

För att du ska förstå och effektivt kunna använda CSS (Cascading Style Sheets) är det viktigt att du har en god förståelse för några grundläggande delar. Här förklarar vi några av dem i detalj och med exempel som riktar sig till dig som nybörjare som vill lära dig grunderna i CSS.

Selektorer

Selektorer är grunden för CSS. Du använder dem för att identifiera och välja de HTML-element som du vill applicera stilar på. Det finns flera olika typer av selektorer

Elementselektorer

Dessa selektorer riktar sig till alla element av en viss typ. Om du vill ändra utseendet på alla stycken (<p>) på en sida kan du använda en elementselektor:

p {
color: blue;
}

Med den regeln ändrar du textfärgen till blå för alla stycken på sidan.

Klasselektorer

Klasselektorer använder du för att välja element som har en viss klass. Klasser definieras i HTML med attributet class. En klass kan användas på flera element:

.container {
max-width: 1200px;
margin: 0 auto;
}

Här påverkar .container alla element med klassen ”container”. Till exempel:

<div class=”container”></div>

ID-selektorer

ID-selektorer används för att välja ett unikt element med ett specifikt ID. ID bör vara unika inom ett dokument, vilket innebär att de bara ska användas på ett enda element:

header {
background-color: #f8f9fa;
}

Detta påverkar elementet med ID ”header”:

<div id=”header”></div>

Deklarationer

I CSS består varje stilregel av en selektor och en eller flera deklarationer. Deklarationer är nyckelvärdepar som definierar hur det valda elementet ska se ut. En deklaration består av:

• Egenskap (Property): Vad du vill ändra på. Till exempel färg (color), bakgrundsfärg (background-color), typsnittsstorlek (font-size), mm.
• Värde (Value): Vad du vill att egenskapen ska vara. Exempelvis blå (blue), 16 pixlar (16px), mm.

Här ser du ett exempel på en enkel deklaration:

h1 {
color: red;
font-size: 24px;
}

Den är deklarationen gör att h1-elementet får färgen röd och textstorleken 24 pixlar.

Block- och inline-element

HTML-element kan vara antingen blocknivå- eller inline-element, vilket påverkar hur de visas på en sida:

Blockelement

Blockelement (<div>, <p>, <h1>) tar upp hela bredden av sin förälder (container), även om deras innehåll inte fyller hela bredden. De börjar också på en ny rad i förhållande till andra element.

Exempel:

<div>
Detta är ett blockelement
</div>
<p>detta är också ett blockelement</p>

Inline-element

Inline-element (<span>, <a>, <img>) tar bara upp så mycket bredd som deras innehåll kräver. De placeras i samma rad som närliggande element.

Exempel:

<span>Detta är ett inline-element.</span> Texten fortsätter här.

Att förstå skillnaden mellan block- och inline-element är viktigt för att du korrekt ska kunna strukturera och styla dina webbsidor.

Boxmodellen

Varje HTML-element kan betraktas som en rektangulär låda, en ”boxmodell”. Boxmodellen består av:

• Innehåll (Content): Själva innehållet i elementet, som text eller bilder.
• Padding: Utrymmet mellan innehållet och elementets kantlinje.
• Kantlinje (Border): En linje som omsluter innehållet och eventuell padding.
• Marginal (Margin): Utrymmet utanför kantlinjen som separerar elementet från andra element på sidan.

Här är ett exempel på en boxmodell i CSS:

div {
width: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

Detta skapar en div-låda med en total bredd som inkluderar innehållet, utfyllnad, kantlinje och marginal.

Färg och bakgrund

Färger i CSS kan anges på flera sätt:

• Färgnamn: Använda enkla namn som red, green, blue, mm.
• Hexadecimala Värden: Färger definieras med en kod som exempelvis #ff0000 för röd.
• RGB och RGBA: Specificera färger med hjälp av röd, grön och blå komponenter (till exempel rgb(255, 0, 0) för röd). RGBA inkluderar även en alpha-kanal för transparens (till exempel rgba(255, 0, 0, 0.5)).

Bakgrunder kan också vara mycket mer än bara enfärgade.

Bakgrundsbilder

Du kan sätta en bild som bakgrund på ett element:

body {
background-image: url(’background.jpg’);
}

Gradienter

Skapa övergångar mellan färger:

div {
background: linear-gradient(to right, red, yellow);
}

Layouttekniker

Att skapa en layout som fungerar bra på alla skärmstorlekar och enheter är en av de största utmaningarna inom webbutveckling. CSS erbjuder dig flera tekniker för det ändamålet.

Flexbox

Flexbox är ett flexibelt boxlayoutsystem som gör det enkelt att skapa komplexa layouter utan att använda float eller positioning:

.container {
display: flex;
justify-content: space-between;
}

Detta gör att element inom klassen ”container” fördelas jämnt med utrymme mellan dem.

CSS grid

CSS grid är ett tvådimensionellt layoutsystem som ger full kontroll över både rader och kolumner:

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

Koden ovan skapar en layout med tre lika breda kolumner.

Float och clear

Detta är en äldre teknik där element ”flyter” till vänster eller höger, men den har i stor utsträckning ersatts av flexbox och grid. Float används dock fortfarande i vissa specifika situationer.

Responsiv webbdesign

Responsiv design innebär att din webbplats ser bra ut och fungerar väl på alla enheter, från mobiltelefoner till stora skrivbordsskärmar. Med ”media queries” kan du applicera olika stilar beroende på enhetens bredd:

@media (max-width: 600px) {
.container {
flex-direction: column;
}
}

Denna ”media query” ser till att elementen i .container ordnas i en kolumn istället för i rad när skärmen är 600 pixlar bred eller mindre. Detta är ett viktigt steg för att göra din webbplats användarvänlig och tillgänglig.

Summering

Genom att förstå och använda ovanstående grundläggande delar kommer du att kunna skapa snygga, funktionella och responsiva webbplatser med CSS. Ju mer du experimenterar och övar, desto mer bekväm kommer du givetvis att bli med att arbeta med CSS.

Vill du lära dig mer om CSS är W3Schools ett bra ställa för dig att börja på.