CSS

Cascading Style Sheet (CSS) är ett formateringsspråk som hjälper till att beskriva hur informationen ska formateras och visas på exempelvis en skärm.

Det finns olika sätt att skriva css-kod:

Efterssom formateringen av alla element på en sida tenderar att bli ganska lång så är metoden att lägga all css-kod i en extern fil att föredra. I sin html-sida så kan vi då i <head> placera en länk till vårat css dokument med hjälp av <link href="css/cssfilen.css" type="text/css" rel="stylesheet" />

En css-fil är en textfil (med ändelsen .css) där man deklarerar hur olika element ska visas. Filen bör inledas med @charset "utf-8"; på den första raden bara för att definera vilken teckenkodning som används, men i övrigt så följer man en enkel mall för att göra varje elements formatering tydlig.

h1, h2, h3 {
font-family: Arial;
color: blue;
}
body {
background-color: salmon;
margin: 300px;
}
Alla rubriker h1, h2, och h3 blir i Arial och blå. Samt att hela bodyn får en bred kant. Se ett exempel här.

I Dreamweaver finns det ett verktyg som hjälper till att både skapa och skriva CSS-filer. Detta visas på tavlan med en genomgång.

Uppgifter:

  1. Skapa en sida med en massa text (T.ex. kopiera info från wikipedia) formatera texten med olika taggar och ändra sedan dessa taggas utseende med CSS. Lägg in paragrafer, rubriker, listor och så vidare. Dela även in texten i olika områden med specialformatering. Skapa en extern CSS-fil som du länkar till i ditt html-dokument.
  2. Skapa en sida enligt följande bild och instruktionerna på tavlan (4 div:ar svart, grön, röd och blå). Valfri text. Formatera dessa på ett snyggt sätt. Meningen med uppgiften är att ni ska experimentera med hur blockelement fungerar. Skriv också en förklaring till hur attributen border, margin och padding fungerar i relation till varandra. Förklara ochså 4 olika sätt att välja färger och vad de olika "siffrorna" i färgvalen står för. Visa i uppgiften att ni klarar av att använda dessa på olika sätt.
  3. Det är inte bara bakgrunder och hela sidor som passar att formatera i CSS, även specifika element fungerar jättebra att formattera. Det finns också en del dynamiska funktioner inbyggda i CSS som gör att elementen på en hemsida kan visa olika utseenden beroende på vad användaren gör. En av dessa är hur länkar kan formateras och ändra utseende beroende på om de är aktiva, besökta och så vidare. Gör en sida där du skapar 4 grupper av identiska länkar (4-7st länkar) men varje grupp ska formateras på sitt eget vis. Förklara på sidan vad :link, :visited, :hover, och :active gör och visa i de olika länkgrupperna att du kan använda dig av dessa. Förklara också varför dessa behöver placeras i en specifik ordning i din CSS-fil för att fungera ordentligt. Varje grupp av länkar ska ha ett eget utseende, men vara tydliga i sin utfomning och visa att de hör ihop inbördes. Minst en av länkmenyerna ska vara horisontell (länkarna på sidan av varandra) och minst en ska vara vertikal (länkarna under varandra). Se till att byta färger, borders, bakgrunder och storlekar på både text och ruta för att göra olika utseenden.
    Här följer ett förslag på hur HTML-koden kan se ut för länkarna:
    <div id="ett">
     <ul><strong>LISTA 1</strong>
      <li><a href="index.html">Min startsida</a></li>
      <li><a href="http://www.youtube.com/">Youtube</a></li>
      <li><a href="http://www.svt.se/">SVT</a></li>
      <li><a href="http://sverigesradio.se/">Sveriges Radio</a></li>
     </ul>
    </div>


Tillbaka till start