HTML tags och CSS

Om vi sätter in följande STYLE i ett dokument

<STYLE TYPE="text/css">
<!--
    A { text-decoration:none; }
-->
</STYLE>

kommer samtliga <A href=...> att bli formaterade utan understrykning.

Detta är oftast bara bra men det kan ju hända att vi i vissa situationer vill ha understrykningen kvar.

Vi har således behov av att kunna specificera att en viss text skall ha en viss formatering.

För detta har vi två metoder:

1. CLASS
2. ID

Class som selektor:

Nedan är en style som använder sig av CLASS. Observera punkten före ordet "viktigt"

<STYLE TYPE="text/css">
<!--
    .viktigt {
        color: red;
        font-weight: bold;
        text-decoration: underline;
     }
-->
</STYLE>

Vi kan då använda denna inställning i HTML koden på följande sätt:

<P class="viktigt">Detta är en viktig text</P>

vilket ger:

Detta är en viktig text

ID som selektor:

Nedan är en style som använder sig av ID. Observera # före ordet exempel

<STYLE TYPE="text/css">
<!--
    #exempel {
        color: blue;
        font-weight: bold;
        font-size: 24pt;
     }
-->
</STYLE>

Vi kan då använda denna inställning i HTML koden på följande sätt:

<P ID="exempel">Detta är ett exempel på CSS</P>

vilket ger:

Detta är ett exempel på CSS

Man kan oftast kombinera dessa två metoder om man vill

<STYLE TYPE="text/css">
<!--
    .normal {
        color: blue;
        font-size: 24;
     }
    #speciell {
        font-weight: bold;
     }
-->
</STYLE>

<p class="normal">Detta är normal</p>
<p ID="speciell">Detta är speciell</p>
<p class="normal" ID="speciell">Denna är både normal och speciell</p>

Vilket ger

Detta är normal

Detta är speciell

Denna är både normal och speciell

Om inställningarna motsäger varandra, t.ex om bägge skulle ha haft ett typsnittsnamn så kommer den senare att vara den som används.

Om vi har många olika tags som samtliga skall ha samma inställningar kan dessa grupperas. Observera kommat mellan H1, H2 och H3

<STYLE TYPE="text/css">
<!--
    H1, H2, H3 { font-family:Tahoma; color:indianred; }
-->
</STYLE>

Detta gör att H1, H2 och H3 samtliga får en typsnittsinställning och en färg

Vi kan även "krångla till det ytterligare" med följande inställning observera att det inte är ett komma mellan H4 och I

<STYLE TYPE="text/css">
<!--
    H4 I { color:red; }
-->
</STYLE>

Detta ger oss följande:

Vi kan då skriva följande

<H4>En vanlig H4</H4>
<I>Vanlig italic</I>
<H4>Men om jag sätter <I>Italic</i> i en H4 så händer detta</H4>

Vilket ger

En vanlig H4

Vanlig italic

Men om jag sätter Italic i en H4 så händer detta

Det vill säga att I formateras om den finns i en H4 men inte annars...