Övningsuppgifter - Stilmallar

Du har redan gjort den första stilmallen och kopplat den till hemsidan. Nu skall du förändra den, så att du ser hur dina ändringar påverkar hemsidan.

Öppna webbläsaren i läget "Arbeta offline" och öppna din hemsida i webbläsaren. Klicka på "Uppdatera"/"Hämta om". Du har nu den senaste upplagan av din hemsida öppen.

Öppna textredigeraren och öppna filen hemsida.css. Spara filen under ett annat namn - som säkerhetskopia. Men det är i filen som har namnet hemsida.css du skall göra ändringarna, eftersom det är den som är kopplad till HTML-sidan.

Jag lägger in stilmallen från föregående sida även här, så blir det lättare att förstå.

• Lägg in ett marginalindrag även på <H2>-taggen
• Ändra storlek på de olika teckensnitten
• Byt teckensnitt - välj till exempel ett serifteckensnitt till brödtexten.
• Ändra storleken på brödtextens indrag
• Ändra font-weight på <H3>-taggen - växla mellan normal och bold
• Lägg font-weight även på någon av de andra taggarna
• Ändra färg på rubriknivå 1 (<H1>), ingress (<H2> och underrubrik (<H3>)
• Ändra färg på brödtexten
• Ändra text-align på <H1> och <H2> - växla mellan left, center, right och justify
• Lägg till text-align på brödtexten - pröva med center och justify

För varje ändring du gör skall du spara hemsida.css, växla till webbläsaren, klicka "Uppdatera" och undersöka vilken inverkan din ändring får på sidan. Fortsätt tills du har fått ett utseende som du tycker om på hemsidan. När du har sparat en stilmall som du är nöjd med, kan du kasta bort säkerhetskopian som du gjorde i början.

Öppna Haj i Hjälmaren. Försök se vilka ändringar jag har gjort i stilmallen. För att det skall bli lättare att jämföra kan du öppna även den tidigare versionen.

Gå gärna tillbaka till Stilmallar och läs den sidan en gång till, innan du fortsätter till Kunskapstestet.

© SupportData.Net