CSS Grunder

Vad är CSS

CSS är ett stilspråk som används för att bestämma hur innehåll ska se ut, placeras och typograferas på hemsidor.

CSS skrivs oftast i en separat fil som länkas till en hemsida. På så sätt kan man styra flera olika sidors utseende från en enda CSS-fil.

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

CSS kan även skrivas in direkt i HTML-koden för att styra utseendet på en speciell del av sidan, som inte följer huvudfilens formgivning. Här vill jag t.ex. ha lite text med rosa bakgrund. Den kan jag skapa mitt i HTML-koden, så här:

<span style="background-color:pink">Rosa text</span>

Mer CSS

Här kommer några fler css-exempel testa  att göra dessa på din webbsida:

border-radius = runda hörn!

#exempel {border-radius:30px 30px 30px 0;}

Ett tal för varje hörn, i ordningen: upp, höger, ner, vänster.

rgba-inställningar för bättre kontroll av genomskinlighet

#exempel {background: rgba(255, 168, 216, 0.45);}

De tre första värdena är röd-, grön- och blåvärdena. Ta reda på dessa värden med hjälp av t.ex. detta verktyg. Det sista värdet är genomskinligheten. 1 = ingen genomskinlighet, 0 = osynligt.

text-shadow= go figure…

#exempel {text-shadow: 2px, 2px, #CCC;}

Första värdet är y-axeln, andra värdet är x-axeln, och det tredje är färgen.

box-shadow = för att lägga skuggor bakom block-element, som t.ex. <div>-boxar

#example1 {
         box-shadow: 10px 10px 5px #888;
         }

Första värdet är y-axeln, andra värdet är x-axeln och det tredje är suddigheten. Fjärde värdet är färgen.

Exempel

Text-shadow, border-radius, rgba-genomskinlighet och box-shadow i underbar symbios!

Skuggad rubrik! First Moses, now this!

Hey! En pratbubbla liksom! Med skugga! Och kolla! Genomskinlighet, utan att innehållet blir genomskinligt! Jag smäller av! CSS3 rular!