Formatera rubriker och stycken

Den här artikeln bygger vidare på positionering av div-behållare som jag visade i föregående artikel . Nu visar jag hur du gör för att snygga upp din layout med CSS för rubriker och stycken för startsidan som vi jobbar med i guiden "Praktiska exempel".

Du lär dig 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 divelementet som vi märkt upp med id "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)

Relaterade artiklar

• Webbdesign
• XHTML
• CSS
• Hemsideprogram
• Köp Dreamweaver