Vad är CSS?

CSS står för Cascading Style Sheets och är en av webbens tre grundläggande byggstenar tillsammans med HTML och Javascript. Man kan säga att CSS är webbens ansikte utåt, och sköter alltså allt som har med design att göra. Med hjälp av CSS kan man åstadkomma allt från att välja typsnitt på text till att göra snygga animationer.

Vad kan man göra med CSS?

Alla möjliga sätt att ändra stil på text kan åstadkommas med CSS. Man kan göra texten fet, rosa eller stor. Man kan också göra så att länkar särskiljs från övrig text genom att göra länktexten blå och understruken (om du trodde att det där var en länk fick jag dig allt!). CSS kan också användas till att bestämma vad som ska hända en användare håller muspekaren över en text (vilket på engelska kallas för hover). Av någon anledning kanske man vill att texten ska byta färg från grön till lila när man håller muspekaren på texten och byta tillbaka till grön när man flyttar bort muspekaren igen (testa att föra muspekaren över den gröna texten).

Det går också att göra mycket som inte har med text att göra. Många typer av geometriska former eller andra figurer kan åstadkommas med CSS. Till exempel en cirkel som blir oval när man håller på den:

Eller kanske en röd space invader:

Sajten CSS Zen Garden är ett tydligt bevis på att det mesta är möjligt med CSS. Alla exempel som visas på CSS Zen Garden utgår från samma HTML-fil men har med hjälp av CSS fått olika design, som får varje exempel att kännas helt unik.

Hur använder man CSS?

För att kunna använda CSS behöver man först en grundläggande förståelse för hur HTML fungerar, se vårt inlägg Vad är HTML?. CSS-koden pekar nämligen ut HTML-element för att kunna välja vad man vill applicera en viss design på. Vi kan utgå från en vanlig paragraf som skrivs så här med HTML:

<p>Jag är en vanlig paragraf!</p>

Det går att ändra färg på paragrafen genom att lägga in CSS-kod rätt in HTML-elementets starttagg. Så här kan du göra texten blå:

<p style="color:blue">
Jag är en vanlig paragraf!</p>

Här används alltså attributet style, där color sätts till blue. I stället för "color:blue" skulle du kunna skriva "font-size:20px" för att göra om text-storleken till 20 pixlar. Samma mönster följs konsekvent med "sak-att-ändra: ändringsvärde". Att använda CSS i HTML-taggarna kan dock göra HTML-koden stökig och svår att underhålla. Därför brukar man i stället lägga CSS-koden i ett separat dokument och hänvisa  till det dokumentet från HTML-dokumentet.

Ett annat alternativ är att använda style-taggen. Mellan <style> och </style> kan CSS-kod läggas in. För att komma åt alla paragraf-element i ett HTML-dokument och göra paragrafernas textfärg blå kan du skriva så här:

<p>Jag är en vanlig paragraf!</p>

<style>

p { color: blue; }

</style>

Inom style-taggarna står det p { color: blue; }, vilket betyder att alla paragrafer ska få blå textfärg. På så sätt har du separerat CSS:en från HTML-koden.

Om du vill ändra textfärg i en specifik paragraf kan du använda en klass för det elementet. Klassen kommer du åt i CSS:en genom att skriva punkt följt av klassens namn. Så här:

<p class="blue">Jag är en vanlig paragraf!</p>
<p>Jag är en vanlig paragraf!</p>

<style>

.blue { color: blue; }

</style>

Den första paragrafen gavs alltså klassen "blue", medan den andra paragrafen inte gavs någon klass. CSS-koden .blue { color: blue } betyder att alla element med klassen blue ska få blå textfärg. Notera att om ett h1-element eller något helt annat element skulle få klassen blue skulle innehållet i de elementen också få blå textfärg.

För att göra former kan HTML-elementet div användas. En blå kvadrat kan åstadkommas så här:

<div class="square"></div>

<style>

.square { 
  width: 50px;
  height: 50px; 
  background-color: blue;
}

</style>

Notera att div-elementet är "tomt", det finns alltså ingen text mellan start- och sluttaggen. I stället sätts en bredd, en höjd och en bakgrundfärg för div-elementet. När det är flera saker som ska ändras separeras dessa med semikolon enligt exemplet ovan.

Ett vanligt användningsområde för CSS är positionering av innehåll.

Kanske vill du att texten ska vara högerjusterad i stället för vänsterjusterad.

Högerjustering av en paragraf åstadkoms så här:

<p class="right">Jag är en vanlig paragraf!</p>

<style>

.right { text-align: right; }

</style>

Notera att klass-namnet inte måste vara "right", utan kan ändras till vad som helst, så länge samma klassnamn används i CSS-koden för den design som ska appliceras. Det kan dock vara smart att ge klasserna logiska namn utifrån vad du försöker åstadkomma.

Av någon anledning kanske du vill visa tre svarta kvadrater på en rad med lika stort avstånd mellan varandra (som för övrigt blinkar i lite olika färger):

Den typen av positionering har tidigare inte varit trivial att få till med CSS. Men i modern CSS finns det verktyg som flexbox och grid, vilka är till stor hjälp vid många typer av positioneringsproblem. Animationer, som exempelvis blinkandet ovan, kan åstadkommas med hjälp av något som kallas för Keyframes i CSS.

CSS kan vara klurigt att använda, framför allt när mer komplicerad design ska åstadkommas. Något som underlättar är att många av de design-problem du kan komma att ställas inför redan har lösts av någon annan och det går därför ofta att hitta en lösning bara genom att googla.

På Exsitec gör vi webbapplikationer till våra kunder, som i botten fungerar som vanliga hemsidor och därför använder vi bland annat CSS när vi bygger dem.

Hör av dig till oss om du har ett behov av en webbapplikation!