CSS Tutorial - Kapitel 2: Introduktion

Om du råkar ha läst min XHTML tutorial innan du hamnade här, så kanske du kommer ihåg att jag förklarade HTML-kod som en "magisk låda". Precis som vi kan sätta en etikett på en ask som hjälper oss hålla koll på vad som finns däri, tar HTML-taggarna detta ett steg längre och skapar det föremål i asken som vi skriver på etiketten. Jag hittade på följande exempel:

<html>
  <äpple> Sten </äpple>
</html>

...i vilket en oskyldig sten placerades mellan två "äpple"-taggar, som därmed förvandlade den stackars stenen till ett smaskigt äpple. Bara i teorin förstås, eftersom exemplet inte fungerar.



Om vi nu härifrån går över till Cascading Style Sheets, så kan vi säga att CSS är vad som talar om för asken hur äpplet skall skapas. Vilka egenskaper bör det ha? Ska det vara rött? Grönt? Ska det vara hårt eller mjukt? Mumsigt? Ruttet kanske?

På sätt och vis kan man säga att HTML / XHTML bidrar med ett gäng substantiv (objekten som din sidlayout består av) och CSS bidrar med adjektiven som beskriver dem.



Det här är faktiskt allt CSS gör, i ett nötskal. I korthet så fungerar det alltså ungefär såhär:

  • Först kommer det skrivna innehållet. Det är bara text, i en text-fil.

  • Sedan kommer HTML-taggarna, som sveper in runt innehållet och hackar upp det i hanterbara bitar och talar om för webläsarna världen över vad som är vad och vart det ska ta vägen.

  • Sedan slutligen, CSS'en. Inladdad av webbläsaren, som snällt får sitta och matcha upp den mot alla refererande HTML-taggar, berättar CSS-informationen precis hur allt ska ritas upp, vilka färger det ska ha, om det ska ha någon ram, om det ska användas några särskilda teckensnitt eller storlekar, bakgrunder, etc. Listan kan göras mycket lång.



Det är faktiskt ungefär allt som är värt att veta om hur CSS fungerar. Nu ska vi börja titta närmare på vilka CSS-värden som finns, och hur de används.





< Tidigare: Förberedelser

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl