Formatera rubriker och stycken

Så här snyggar du till din design med CSS i Dreamweaver

I den här artikeln lär du 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".

Välja ut olika HTML-element

Sättet att välja ut speciella taggar i ett div-element är inte svårt. Om du exempelvis vill göra varje rubrik mörkblå, som på den här sidan, så väljer du först ut huvudelementet, i det här fallet alltså div#huvudtext. För att sätta en regel som säger att varje h1-rubrik ska visas med mörkblå text så lägger du till detta på en ny rad i stilmallen.

div#huvudtext h1 {color: #003366;}

Skapa en rubrik och formatera den med CSS

  • Öppna upp webbsidan som du jobbar med sedan tidigare.
  • Ta bort texten "huvudtext" i huvudtext-elementet och ersätt den med texten "Testrubrik".
  • För att göra om texten till en rubrik så kan du antingen sätta <h1></h1> runt texten eller markera all text som ska vara rubrik och välja "Text --> Paragraph Format --> Heading 1" i DreamWeaver. Alltså:

<h1>Testrubrik</h1>

  • För att texten i ett stycke inte ska hamna direkt under rubriken så kan det vara bra att lägga en botten-marginal på rubriken (eller padding) på h1-taggen. Lägg alltså till nedanstående kod till den tidigare formateringen av h1-taggen.

margin-bottom: 20px;

Skapa ett stycke och formatera det med CSS

  • Skriv in en kort text under rubriken och använd taggen för stycke för att se till att texten är korrekt formaterad . Själv skrev jag några rader "test" i stycket bara för att se hur formateringen ser ut.
  • Prova att skriva ett annat stycke omedelbart efter det föregående stycket. Eftersom du tidigare tog bort marginalerna med * {margin: 0; padding: 0;} så kommer dessvärre 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.

I din stilmall vill du alltså sätta en regel för alla p-taggar i huvudtexten. Därför skriver du in följande kod på en ny rad i din CSS-fil:

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

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

Nästa artikel: Bakgrundsfärger

Valid XHTML 1.0 Strict Valid CSS!