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.
Ihoplänkning
En webbsida länkas ihop med stilmallen med följande kod som ska ligga på valfri plats mellan <head> och </head>
<link href="style.css" rel="stylesheet" type="text/css" />
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 divbehå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.
Exempel med id
#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
Exempel med class
Klass används när du vill skapa en formatering som kan användas på flera ställen på samma webbsida.
Det fungerar på exakt samma sätt som ovanstående men med skillnaden att du ersätter # med en punkt.
Exempel:
.red p span {
font-color: red;
}
.blue p span{
font-color: blue;
}
.green p span {
font-color: green;
}
Flera 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-behållaren 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änk ska vara gul. Jag kan lova att det inte blir vackert, men som ett teoretiskt exempel så fungerar det iallafall.
Snygga upp dina deklarationer
Som du ser så blir det lätt otydligt när man skriver alla deklarationer på samma rad. Ett snyggare sätt att skriva CSS externt är att göra ett radbyte för varje deklaration i din stilmall.
Föregående deklarationer ser då ut så här och ger betydligt bättre överblick:
div#menu {
width: 200px;
background-color: #CCCCCC;
color: blue;
border: solid 1px;
border-color: green;
}
div#menu a {
color: yellow;
}
Samma stil för olika element
Om du vill använda samma stil för olika element på en webbsida så använder du ett kommatecken.
Låt säga att vi vill ha samma formatering för numrerade och ickenumrerade listor:
ul, ol {
font-style: italic;
line-height: 15px;
}
<<< Egenskaper || Marginaler >>>
