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
