Tillbaka

Stilmallar (CSS)

CSS är idag det bästa sättet att sköta en sidas layout. CSS används ofta tillsammans med JavaScript (JS) och kan på så sätt skapa t.ex. JQuery. Vi kan oskså i samspelet HTML5, CSS och JS skapa appar.

De finns tre olika typer av stilmallar:

Allmän stilmall (linked style)

Den allmänna stilmallen är baserad på ett fristående dokument, som kan nås från vilken sida som helst ute på webben. Den länkas från sidans head, det betyder ju att browsern läser stilmallen innan sidan visas.

Dokumentbaserad stilmall (internal style)

Stilmallen skrivs in i sidans huvud mellan taggarna style. Mallen kan endast hantera en enskild sidas element. Sidmallen är "starkare" än den allmänna mallen.

Elementmallen (inline style)

Vi skall undvika att använda den här elementmallen så mycket som vi bara kan. Använder vi den är det precis som att gå tillbaka i tiden ... då vi blandar ihop design och innehåll. Vi ger elementet egenskapen style om vi måste använda mallen.

Det här stycket är formaterat med inline style

Egna element, klasser och id:n

I stället för att använda inline style skall vi bygga upp egna grejer efter behov. De grundar sig på standardelementet och ärver egenskaper enligt det. I stilmallen anger vi egna klasser med prefixet .(punkt) och det egna id:t med prefixet #(grind).

Egna grejer :)

Egen klass, egenskaperna finns i internal style

Egen id, egenskaperna finns i internal style

Eget element, egenskaperna i internal style

Texten är gul, rosa eller orange.