I den här artikeln lär du dig hur du gör för att snygga upp rubriker och stycken med CSS. Artikeln bygger vidare på föregående artikeln positionering av div-behållare.

Procedur

Nu är det dags att sätta upp deklarationer för behållarelementet i stilmallen som vi du skapade tidigare i guiden. Dessa deklarationer kommer att påverka rubriker och stycken som befinner sig i behållarelementet som vi tidigare märkt upp med id:et "huvudtext".

Så här väljer du ut olika element

Om vi antar att du vill skapa en huvudrubrik h1 som är mörkblå så börjar du med att välja ut den div-behållare som kommer att innehålla h1-taggen - i det här fallet div-behållaren med id "huvudtext".

Lägg till följande kod i din stilmall:

div#huvudtext h1 {
color: #003366;
}

Skapa och formatera en rubrik med CSS

Öppna webbsidan index.html som du jobbar med sedan tidigare.

Radera den gamla texten mellan taggarna <div id="huvudtext"> och </huvudtext"> och ersätt den istället med följande kod/text:

<h1>Testrubrik</h1>

Lägg till bottenmarginal

För att texten i ett stycke inte ska hamna direkt under rubriken så kan det vara bra att lägga en bottenmarginal till rubriken.

Lägg till följande kod (markerat med rött) till den tidigare formateringen av h1-taggen:

div#huvudtext h1 {
color: #003366;
margin-bottom: 20px;
}

Skapa ett stycke

Skriv in två stycken text under h1-rubriken mellan taggen <p> och </p>. Själv skrev jag en upprepning av ordet "test" bara för att se hur formateringen ser ut.

Ex:

<p>Test test test test test osv...</p>

Skriv ett ett annat stycke omedelbart efter det föregående stycket. Eftersom du tidigare tog bort marginalerna med * {margin: 0; padding: 0;} så kommer det efterföljande stycket att hamna direkt efter det andra. Därför bör du formatera p-taggarna och ge dem en bottenmarginal. Stycken bör ju rimligtvis separeras från varandra.

Sätt upp en CSS-deklaration för stycken

Skriv in följande kod på en ny rad i din CSS-fil:

div#huvudtext p {margin-bottom: 20px;}

Slutresultat

Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)