Exempel: Formatera rubriker och stycken

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:

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.