CSS står för "Cascading Style Sheets" och används för att styla, alltså lägga till en design på HTML-elementen. Genom CSS kan man definera hur elementen ska se ut genom att t. ex. sätta färger, storlekar, marginaler, borders och annat. Man kan även animera med CSS genom att använda transitions och/eller keyframes. För att koppla ihop ett CSS-dokument skriver man <link href="FILNAMNET.css" rel="stylesheet">
För att använda CSS krävs det i regel att du länkar till elementet genom en s. k. class. Det gör du genom att skriva class="dinClass" i elementet du vill styla. Därefter skapar du en CSS-regel i din CSS-fil där du definierar hur elementet ska se ut. Om du t. ex. vill ändra färgen på ett element till lila skulle du skriva .dinClass{color: purple;} i CSS-dokumentet.
Det finns primärt tre olika sätt att använda CSS på. Det första är att använda inline-css, alltså sätta css direkt i HTML-elementet. Det andra är att använda intern CSS, alltså sätta CSS i head-taggen i HTML-filen. Det tredje är att använda extern CSS, alltså länka till en separat CSS-fil, vilket är det bästa praxis. Anledningen till varför det är så finner du under style sektionen på HTML sidan.
HTML används för att skapa strukturen på en hemsida, alltså för att skapa elementen och placera dem på sidan. CSS används för att styla elementen, alltså för att ändra färg, storlek, placering och annat på elementen. HTML är alltså för att skapa elementen, medan CSS är för att styla dem.
Det finns flera fördelar Det gör det enklare att ändra designen på hemsidan, eftersom du bara behöver ändra i en fil istället för att behöva gå igenom alla html-filer. Det möjliggör dessutom så att flera html-sidor kan använda samma stylesheet. Därför bör du undvika att använda <style> taggen om möjligt.
En attribut är en del som appliceras på en HTML-tagg som ger webbläsaren information om hur den ska rendera elementet. Det är dessa attributer som CSS ändrar på för att styla en hemsida.
Border-attributen används för att skapa en synlig kant eller ram runt ett element. Det finns flera olika borders man kan använda, men den vanligaste är att bara ha simpel bredd med pixlar runt det. Testa håll över bilden nedan för att se hur en border kan se ut.
Bilden nedan använder attributen border: 5px solid var(--accentColor); vilket skapar en border runt bilden med en tjocklek på 5px med accentfärgen, vilket är deklarerat tidigare för att färgen ska dynamiskt kunna ändras beroende på om du använder darkmode eller lightmode. Om du bara har ett tema går det lika bra att ange en färg direkt.
Men! Border har inte bara i uppgift att lägga till en ram runt en bild. Det är faktiskt border attributen som utnyttjas för att göra rundade hörn på ett element. Detta genom border-radius. Testa håll musen över bilden nedan för att se hur det kan se ut.
Color attributen används för att ändra färgen inuti ett element. Främst används det för att ändra färg på till exempel text. Det är tack vare color attributen som man kan göra denna text till en annan färg. Det görs genom att helt enkelt skriva color: var(--accentColor); där var(--accentColor); reprensenterar accentfärgen som defineras tidigare i dokumentet så att den kan ändras dynamiskt beroende på om du använder darkmode eller inte. Precis som med bordern, kan du bara byta ut det mot valfri färg ifall du inte har behov av att dynamiskt behöva ändra färgen. För att göra det anger du antingen namnet på en färg, en hexadecimal färgkod, eller en färgs RGB-värde.
Om du vill ändra färgen på till exempel en div istället för text, kan du använda background-color, vilket bestämer färgen på bakgrunden av elementet.
När man lägger in en bild är det viktigt att man anger en beskrivning av vad bilden visar i alt-attributet. Detta är för att personer som är blinda eller har dålig syn fortfarnade ska kunna förstå vad det är som visas. Det är även denna beskrivning som kommer visas ifall bilden av någon anledning misslyckas med att visas. Alt-attributen lägg i regel in bakom src attributen i <img>-taggen och är en av de få attributer som inte bör vara i ett separat CSS-dokument, utan direkt inline vid taggen. Detta är eftersom beskrivningen är unik till specifika bilden.
Class-attributen används för att koppla ihop ett html-element med en css-class. För att lägga till en class på ett HTML-element skriver du class="className" där du byter ut "className" mot namnet på din class. För att sedan definera en class i CSS skriver du helt enkelt .className{} där du sedan skriver css-stylerna innanför måsvingarna.
Id-attributen används för att tilldela ett HTML-dokument ett ID. Detta ID går att använda som en klass för att sätta stylar på elementet, men bästa praxis är istället att endast använda IDs när man behöver referrera elementet i javascript kod. IDt kan även användas som ett s.k. anchor. Ett anchor används för att genom en länk skicka användaren till sen specifik plats på en sida.
Lang-attributen används för att tala om för webbläsaren vilket språk den är gjord på. Denna attribute sätts i regel i html-taggen eftersom en sida är vanligvis endast i ett språk, och därmed bör attributen vara global.
Width-attributen används för att tala om hur stor bredd ett html-element bör ha. Detta är en superviktig attribut att kunna ifall man ska göra en snygg hemsida eftersom den är bland det viktigaste layoutbyggande. En width skrivs vanligtvis i vw, % eller px. Vad som är bäst i vilken situation kan du läsa om nedan.
När man bygger en hemsida måste man ha i åtanke alla de olika enheterna som den kommer att användas på. Vissa kommer att surfa in på den från en stationär dator med stor skärm, andra kanske från sin surfplatta, medan en väldigt stor del använder sina mobiltelefoner. Därför måste hemsidan se lika snygg ut och vara lika användbar oberoende av vilken enhet användaren har. När man designar en hemsida på detta sätt kallas det för responsive design.
CSS-koden ovan är en så kallad media query och används för att tillämpa andra CSS-regler beroede på enhetens egenskaper. Just denna media query kollar hur stor skärmen är. Om viewportens bredd av hemsidan är mindre än 600px kommer stylarna inom måsvingarna att skriva över standard stilarna. . Eftersom telefoner används vertikalt, har de en lägre width än vad en dator skulle ha och man kan på så sätt få en annan design på telefoner. I exemplet ovan betyder det att på telefoner kommer alla taggar "h1"s teckenstorlek ändras till 3% av viewporten. På denna sida används till exempel media-taggen för att ändra navbaren till en hamburgarmeny när man är på telefon.
Taggen ovan skall i regel alltid placeras inom head taggen i ditt HTML-dokument. Denna taggen kallas vanligtvis för "Viewport Meta Tag" och definerar viewporten och är en ytters viktig del i responsive design. Delen width=device-width av taggen sätter så att bredden av sidan är desamma som enhetens bredd. initial-scale=1.0 sätter standard zoom-leveln till 1 när man går in på sidan för första gången. Denna tagg är en nyckeldel i responsive design och hjälper hemsidan att rendera rätt på olika enheter.
Enheten vw står för "viewport width" och är en relativ enhet som reprensenterar 1% av bredden av viewporten. Tack vare detta är vw vanligt att använda om man vill ha en fast layout som ska scalea bra mellan olika enheter. Problemet som däremot kan uppstå är att element ser alldeles för stora ut på stora skärmar, och tvärtom på små. Därför är det bäst att använda det i kombination med min-width och max-width i mediataggen för att kompensera för detta.
Enheten px är tillskillnad från vw en absolut enhet. Den scalear inte med viewporten av sig själv, och kräver därför att du själv ser till att det ser bra ut på alla enheter. Fördelen med px är att det kan ge dig mer kontroll över hur sidans innehåll ser ut, på bekostnaden av att du måste själv se till så allt ser snyggt ut genom att kompensera/ändra layouten med media-taggen. Genom att använda pixlar möjliggör du även för webbläsarens inbyggda inzoomningsfunktion att fungera, vilket den inte gör när man använder vw vilket kan ställa till det för tillgänglighetsverktyg.
I praktiken är det dock vanligast att man använder en kombination av dessa. T. ex använder texten på denna sida px, medan vissa bilder och layout-element som vågorna använder vw.
