Andreas Palmblad lärare: CSS i Anteckningar

Skapa en ny tom mapp med två dokument: index.html och stil.css (skapa nytt textdokument och ändra namn på dem). Tänk på att i index ska allt innehåll finnas, i stil så ska allt utseende finnas!

Skriv in följande i index.html:

<index>
<head><title>Din sidas titel</title>
<link rel=stylesheet href="stil.css" type="text/css">
</head>
<body>
All text och bilder på din sida kommer här.
<p class=bilar>Detta är en text som handlar om bilar, den kommer att vara skriven med typsnittet Arial i storlek 22</p>
<p class=cyklar>Detta är en text som handlar om cyklar, den kommer att vara skriven med typsnittet Times New Roman i storlek 12</p>
</body>
</index>

Skriv in följande i stil.css:

<style type="text/css">
.bilar { font-family: Arial; font-size: 22pt }
.cyklar { font-family: "Times New Roman"; font-size: 12pt }
</style>

Testa nu att ändra något, till exempel storleken (size) i stil.css för att se hur storleken på din text ändras. Testa att ändra färg, storlek och plats genom att skriva in nya saker i stil.css. En lista med saker man kan skriva in i stil.css finns här. Valfritt: 1. Skapa fler webbsidor i din mapp (bilder.html) och länka samma stil-dokument (<link rel osv). 2. Lägg in en bakgrundsbild i stil.css och bestäm hur att den inte ska repeteras genom att läsa här.

Tips: Ha uppe både anteckningar och Internet Explorer samtidigt. Spara i anteckningar och ladda om sidan i Internet Explorer med F5-knappen. Stäng inte ner programmen varje gång du vill se dina ändringar, det behövs inte!

Detta ska ni göra idag:

När du känner att du förstår hur ett css-dokument fungerar så går du vidare till nästa uppgift och tittar på filmen.

Andreas Palmblad lärare

CSS i Anteckningar

Inga kommentarer:

Skicka en kommentar