CSS Tutorial - Kapitel 3: Style-attributet

OK, så vid det här laget vet du förmodligen hur HTML sätter en liten etikett på varje liten del av innehållet på dina sidor, och nu vill du lära dig hur man sätter CSS-egenskaper på etiketterna. Det finns flera olika sätt att göra det på, och vi ska börja med den som är lättast att applicera, på i princip vilken HTML-tagg du vill i hela ditt dokument: Style-attributet.

Detta innebär att man sätter style="" inuti en tagg och sedan skriver in CSS-inställningarna där, mellan citat-tecknen. Om vi skulle vilja prova med ett litet exempel på detta, kan vi t.ex använda egenskapen color, som logiskt nog påverkar text-färgen på den skrivna texten. Såhär:

<html>
  <head>
    <title>Att stajla text-färgen</title>
  </head>
  <body>
    <h1 style="color: blue;">Äpplen igen</h1>
    <p style="color: red;">
      Här var det röda äpplen.
    </p>
    <p style="color: green;">
      Dessa äpplen skall hädanefter vara gröna.
    </p>
  </body>
</html>

Som du kanske gissat genom att läsa koden ovan, och som du förstås sett om du kopierat den till en text-fil och öppnat den i din webläsare, så blir rubriken i exemplet blå medan det första stycket får röd text och det andra grön. Det är förstås möjligt att skriva in hexadecimala värden för HTML-färger också, för dig som redan vet vad det är.



En sak vill jag dock säga om detta. Genom att använda attributet style på taggar i HTML-koden så tvingas vi även lägga CSS'en i samma fil. Det innebär att om vi vill tillverka många sidor från samma mall och senare vill ändra på utseendet på dem, så måste vi uppdatera style-attributet på varje enskild sida. Det vore uppenbarligen inte särskilt roligt att sitta och göra, och på det viset underminerar det även hela poängen med att arbeta med CSS.

Därför föreslår jag att du lägger style-attributet på minnet som ett sätt att lägga in CSS-egenskaper endast för tillfälliga tester, eller när du av någon anledning absolut måste använda den metoden, men att du i övrigt försöker undvika den helt och hållet. Det finns mycket bättre sätt för att arbeta med CSS som vi ska börja titta på i nästa kapitel: ID'n och Klasser.





< Tidigare: Introduktion

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