Praktiska steg
- Öppna din HTML-fil i en textredigerare.
- Skapa en ny CSS-fil och länka den till din HTML-fil.
- Börja skriva CSS-regler för att styla specifika element som du riktar in dig på.
Viktiga koncept
- Elementväljare: Väljer ett element baserat på dess taggnamn, t.ex.
p för stycken.
- Klassväljare: Väljer element med en viss klass, t.ex.
.minKlass.
- ID-väljare: Väljer ett element med ett unikt ID, t.ex.
#mittID.
- Attributväljare: Väljer element baserat på deras attribut, t.ex.
input[type="checkbox"].
- Pseudoklasser: Väljer element baserat på deras tillstånd, t.ex.
:hover för element som hovras över.
- Pseudoelement: Väljer delar av ett element, t.ex.
::first-line för den första raden i ett stycke.
- Kombinatorer: Kombinerar väljare för att välja element relaterade till varandra, t.ex.
p + h1 för rubriker som följer stycken.
Egenskapsväljare på sida
<p>Detta är ett stycke.</p>
<h1 class="titel">Rubrik</h1>
/* Elementväljare */
p {
color: röd;
}
/* Klassväljare */
.titel {
font-size: 2em;
}
Detta CSS kommer att göra att alla stycken blir röda och alla rubriker med klassen titel blir 2em stora.