HTML-OPAS/CSS-mallit

CSS-malleja

Oheiset mallit on liitetty css_pohja.htm tiedostoon. Alla on css_pohjan-alkuperäinen koodi, johon on sitten lisätty tyylimääritteet HEAD-lohkoon

<HTML>
<HEAD>
<TITLE>HTML-OPAS/Selain Raahen Porvari-ja Kauppakoulu</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000" link="#000080" vlink="#000080" alink="#000080">
<h1 align="left">Tyyli-harjoituksia</h1>
<p align="left">Tämä tiedosto on kirjoitettu css-mallien pohjaksi. Tämän tiedoston ominaisuuksia on muokattu tyylien avulla. Alla olevien esimerkkikoodien mukaan. Mallit on järjestetty niin, että ensin on koodi ja sitten IFRAME-elementtiin on sijoitettu tämä peruskoodi lisättynä tyylimäärityksillä.</p>
<h2 align="left">Otsikko 2</h2>
<p>Luettelo</p>
<ol>
<li>Asia 1</li>
<li>Asia 2</li>
<li>Asia 3</li>
</ol>
<p>Ylimääräinen kappale omia tyyliluokkia varten</p>
</BODY>
</HTML>

Sivu uudessa selainikkunassa

<STYLE TYPE="text/css">
H1{
color:red;
font-family:arial;
}

P{
color:blue;
text-transform:uppercase
}
</STYLE>

Sivu uudessa selainikkunassa

<STYLE TYPE="text/css">
H1{
color:red;
font-family:arial;
}

H2{
background-color:yellow;
color:red;
text-transform:uppercase
}

OL{
list-style-type:lower-alpha;
color:aqua;
}
</STYLE>

Sivu uudessa selainikkunassa

<STYLE TYPE="text/css">
H1{
color:red;
font-family:arial;
}

H2{
background-color:yellow;
color:red;
text-transform:uppercase
}

OL{
list-style-type:upper-roman;
color:purple;
}

P{
font-family:"Times New Roman";
font-size:14pt
}

.omatyyli{
font-size:20pt;
}
</STYLE>

Sivu uudessa selainikkunassa

Lisää malleja. Käytetty css-koodi on sivujen lopussa

Sivu uudessa selainikkunassa