Kenents CSS SKOLA - Nivå; nybörjare - Del 3
Css-Deklarera dina taggar
1. Jag fortsätter att arbeta i css-filen; minstil2.css (den css-fil vi tidigare skapade vår layout i nyss).
Det finns lite kod i minstil2.css sedan tidigare, lägg in koden längst ned i din css-fil.
Vi deklarerar taggen <body> i minstil2.css
Jag har färgat koden på samma sett som Dreamweaver gör i kod läget bara för att det ska vara lättare att förstå.
Jag använder mig av rätt syntax, det vill säga; in tabbningen (indrag)i koden så det ser snyggt ut samt att det är lätt att läsa och förstå koden
så här det det ut innan vi deklarerar <body> <h1> och <h2>
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #000000;
background-color: #ffffff;
margin-top: 0px;
}
Vi fortsätter att deklarera taggen <h1> (rubrik 1)
h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: lighter;
color: #000000;
text-transform: uppercase;
}
Vi deklarerar sedan taggen <h2> ( rubrik 2)
h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: lighter;
color: #000000;
letter-spacing: 0.4em;
text-transform: uppercase;
}
Se hur det blev när vi deklarerat; <body> <h1> och <h2>
LÄNKAR - Vi deklarerar länkarna så det ser lite snyggt ut
Fortsätt i din css fil, lägg in följande kod för att formatera dina länkar, gör det längst ned i ditt css dokument
a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #333333;
text-decoration: none;
}
a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #333333;
text-decoration: none;
}
a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #951919;
text-decoration: underline;
}
a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: lighter;
color: #333333;
text-decoration: none;
}
Se hur det blev när vi deklarerade länkar i vårt css-dokument
Självklart kan du deklarera alla dina html taggar, vliket du också bör göra.
En Övning av Kennet Dyrvik - www.tullangen.se -
2009-11-22