Kenents CSS SKOLA - Nivå; nybörjare - medel - Del 4

Css - classer -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 har sedan tidigare deklarerat <body> <h1> <h2> <a:link> <a:visited> <a:hover> <a:active> i minstil2.css

jag utgår från denna fil>>> SE FILEN!!

Så ser länkarna i navigeringen ut innan div .class bruno skapas.
Tips! div .class kan man använnda hur många gånger som helst i samma HTML dokument


2. Nu skapar vi classen; .bruno och då kan vi få länkarna att se annorlunda ut mot de "vanliga" länkarna, det vill säga att vill lägger en del länkar i classen .bruno
Se nedan hur vi kodar det.


.bruno a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #000000;
text-decoration: none;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}

.bruno a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #000000;
text-decoration: none;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}

.bruno a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #da894b;
text-decoration: underline overline;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}

.bruno a:active {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: lighter;
color: #000000;
text-decoration: none;
padding: 10px;
text-transform: uppercase;
text-align: center;
letter-spacing: 0.4em;
display: block;
}

Så här ser det ut när vi kodat länkar med classen .bruno >>>>>



Så här ser det ut i HTML -filen i #leftcol där länkarna ligger, se nedan

<div id="leftcol"> <!-- start leftcol -->

<div class="bruno"><a href="http://www.na.se" target="_blank"> hem </a></div><br />
<div class="bruno"><a href="http://www.tullangen.se" target="_blank"> bilder </a></div><br />
<div class="bruno"><a href="http://tv4.se" target="_blank"> robinsson </a></div><br />
<div class="bruno"><a href="http://www.svt.se" target="_blank"> idol </a></div>


</div> <!-- slut leftcol -->









GÅ till del 5 i css-skolan


Jag återkommer med mer saker kring div .class

En Övning av Kennet Dyrvik - www.tullangen.se - 2009-11-25