CSS - Cascading Style-Sheets

På svenska betyder Cascading Stylesheets, Kaskaderande Stilmall. CSS är beroende av HTML, medan HTML inte behöver vara beroende av CSS. Man kan göra en enkel textbaserad sajt med bara HTML, men det kan uppstå problem med olika versioner av webbläsare, därför kodar alla mer eller mindre utseendet på sidan med Cascading Style-Sheets.

Det är lite svårt att använda CSS till en början, men är man van blir det snarare en underlättning och sidan får mycket bättre och mer professionellt utseende.

Man kan antingen göra stilmallen inom själva HTML-dokumentet eller i ett annat dokument som länkas i HTML-dokumentet med link-taggar, för att sen skickas i "kaskader":




En enkel stilmall:

(Färgerna på exempelkoderna är inte en nödvändighet för kodningen, de är bara stöd för att skilja på koderna)





Mellan paranteserna beskriver designern hur hon vill ha utseendet på exempelvis, från ovan, headers vilken typsnitt, storlek och så vidare. När man sen i HTML dokumentet skriver H1 (den största titeln) kommer titeln att synas som önskat, utan att man behöver göra det i HTML-dokumentet för respektive header eller annan stil. Men vill man sen ha olika sorters header, kan det vara bra att ha olika stilmallar för respektive del och sen klassa dem med class="".

För att göra en plats till sidan använder man CSS och DIV taggar, där toppen på sidan brukar kallas HEAD, innehållet för CONTAINER och slutet för FOOTER. CSS ger även mer frihet till designern att kunna göra en mer unik sida. En DIV är en del (division) i sajten, som exempelvis där innehållet ska vara eller där själva loggan eller titeln ska vara. DIV taggarna stylar man exempelvis så här:




Hashtag skrivs innan namnet på html objektet - # - före namnet på en DIV, t.ex. #header, precis som med HTML-färger, eller en punkt före en klass, t.ex. .header

Det är viktigt att kunna skilja CSS och HTML sinsemmellan, i mening "kommandon". Själva strukturen och själva kodningen är alltså HTML, medan de övriga är mer innehållet för sajten. Så här - en bok liknar HTML, då båda är text/skrifter, men böcker skiljer sig sinsemmelan i utseende och innehåll och dess like är CSS/PHP/JAVA/PEARL etc. inom webbkonstruktioner. Det är därför bra att veta vad sajten man vill bygga är ämnad till, innan den körs igång, även om man hellre skulle vilja få/hyra/köpa sajter, - en historia vilken egentligen kan bli jobbigare än egenkodningen.


I HTML-dokumentet anger man sen identiteten för stilmallen som följande:



Har man skrivit in sin stil i CSS och sen länkat mallen med koden från ovan, som visats här längst upp, ska man inte behöva ange mer i själva HTML-dokumentet, utom då id eller class. En id använder man oftast bara en gång som exempelvis vid HEAD eller BODY (oftast har en sajt bara en "head" eller "body"). Men class kan man istället återanvända hur mycket som helst och då skriver man bara class="" hänvisat till ens "class" CSS, istället för id="" i HTML-dokumentet för DIV, SPAN, P, TABLE osv.


Sen så ska man inte glömma att stänga taggen:



Måttenheten för webben är pixlar, em och %. En normal skärm är 900x1200 px (pixlar) och däremmellan kan man alltså göra Divarna.



Så här blir slutresultatet: