HTML-luokat

Luokkaa HTML:ää (aseta luokka) jotta voimme määritellä elementin luokalle CSS-stilin.

Aseta samalle luokalle samaa stilia tai eri luokille erilaista stilia.

Esimerkki

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London on Englannin pääkaupunki. 
Se on Yhdistyneen kuningaskunnan väkirikkain kaupunki, 
Yli 13 miljoonan asukkaan suurkaupunkialueella.
</p>
</div> 
</body>
</html>

Kokeile itse

Luokattu blokkeja elementtejä

HTML <div>-elementti onBlokkeja elementtejäSe voi toimia muiden HTML-elementtien sisällin.

Aseta <div>-elementin luokka, jotta voimme asettaa samalle <div>-elementille saman luokan:

Esimerkki

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London on kaupunki, joka sijaitsee Englannissa. 
Se on Yhdistyneen kuningaskunnan väkirikkain kaupunki, 
joissa on yli 13 miljoonaa asukasta.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris on Ranskan pääkaupunki ja väkirikkain kaupunki.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo on Japanin pääkaupunki, suurkaupunkialueen keskuspiste,</p>
ja maailman väkirikkain suurkaupunki.</p>
</div>
</body>
</html>

Kokeile itse

Luokittelu rivivälinäiset elementit

HTML <span> elementti on rivivälinäinen elementti, jota voidaan käyttää tekstin sisällään.

Aseta <span> elementin luokka, jotta voidaan asettaa samanlaisille <span> elementeille samat tyylit.

Esimerkki

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

Kokeile itse