CSS-tyylien määrittäminen


Edellisillä tunneilla ollaan harjoiteltu luomaan div-lohkoja. Nämä lohkot luodaan siksi, että niiden tyylejä voisi helpommin muokata. Aiemmilla tunneilla olemme luoneet lohkon ”navigointipalkki”. Nyt katsotaan, miten sen tyyliä voidaan muottaa css-tiedostossa. Div-lohkon nimen eteen kuuluu siis laittaa piste ( . ) kun sen CSS-tyyliä muutetaan.

.navigointipalkki {
border-style: solid;
border-width: thin;
border-color: black;
background-color: #FFC752;
color: #636163;
width: 20%;
float: left;
}

Jos halutaan muuttaa esimerkiksi navigointipalkin sisällä olevaa listaa, käy se seuraavanlaisella komennolla:

.navigointipalkki ul {
list-style-type: none;
margin-left: 1em;
padding-left: 0.5em;
color: red;
}

Linkkien muuttaminen

CSS-tyyleillä voidaan muuttaa linkeissä monia asioita. Ensiksikin seuraavalla CSS-komennolla voidaan muuttaa, miltä linkki näyttää, kun siinä ei ole käyty:

a:link {
color: blue;
}

Myös linkin ominaisuuksia voidaan muuttaa, kun sitä on jo klikattu. Se käy seuraavasti:

a:visited {
color: purple;
}

Seuraavalla komennolla voidaan muuttaa myös jotain linkkiin liittyvää, kokeillaan mitä!

a:hover {
background-color: #D69C52;
color: white;
}