Den här artikeln ger fler exempel på hur du sätter upp deklarationer externt i en stilmall. Det är både en repetition till det du läste tidigare om extern CSS men innehåller även en del kompletterande information.
Selektorn, repetition
p {color: red;}
Detta betyder att varje stycke på din webbsida ska ges en röd text. Stycketaggen p kallas för selektor eftersom det är den som är det utvalda elementet.
Kontextuell selektor
Kanske vill du vara lite mer restriktiv i din användning av rödfärgen och därför skriver du in detta:
div#colored p {font-color:red;}
Ovanstående kod betyder att varje stycke p som befinner sig i en div-behållare med id "colored" kommer att färgas rött. Div#colored p är en s.k kontextuell selektor.
Det går att vara ännu mer selektiv:
div p span {font-color:red;}
Detta gör att endast text inom en span-tagg i ett stycke som befinner sig i en div-behållare färgas röd.
Deklarationer för id och class, repetition
För att ytterligare kunna skilja ut områden från varandra så lärde du dig att använda dig av id:n.
Exempelvis skulle vi nu kunna skriva:
#red p span {
font-color: red;
}
#blue p span{
font-color: blue;
}
#green p span {
font-color: green;
}
Att hänvisa till ett speciellt id för ett div-element sker alltså med att lägga till "#idnamn". Med denna funktion så får du i stort sett full frihet att formatera olika delar av sidan på alla möjliga olika sätt.
Vill vi ytterligare specificera omrpdet så är det inget som förhindrar oss att vara ännu tydligare:
div#red p span {
font-color: red;
}
div#blue p span{
font-color: blue;
}
div#green p span {
font-color: green;
}
Kom ihåg att ett id är unikt och inte får (ska) förekomma flera gånger på samma webbsida. Till det används
Deklarationer separeras med semikolon
När du skriver in flera deklarationer separerar du varje deklaration med ett semikolon (;).
Exempel:
div#menu {width: 200px; background-color: #CCCCCC; color: blue; border: solid 1px; border-color: green;}
div#menu a {color: yellow;}
Ovanstående kod säger att div-elementet med id "menu" ska ha bredden 200 pixlar, en ljusgrå bakgrundsfärg, blå text och en heldragen 1 pixel grön linje som omsluter innehållet. Den sista raden har också lagt till regeln att varje länka ska vara gul. Jag kan lova att det inte blir vackert, men som ett teoretiskt exempel så fungerar det iallafall.
Deklarationer för class
Som nämnts tidigare så används en class för att göra små variationer av texten på din sida. Att skapa deklarationer för dessa klasser fungerar dock i stort sett på samma sätt som för id:n.
När du vill sätta upp regler för en klass så skriver du bara in en punkt följt av klassnamnet:
.klass {deklaration}
Samma stil för olika element
<<< Egenskaper || Extern CSS >>>
