CSS

CSS (Cascading Style Sheets) määrittää XHTML-sivun ulkoasun. Voidaan määrittää esim. että kaikki <h2>-otsikot ovat sinisiä.

CSS:ssä on kolmenlaisia luokkia.

/* määritetään että kaikki <h2>-otsikkotekstit ja kaikki <p>-kappaleet ovat oransseja ja tekstin tausta on sinistä. */
h2,p
{
color: orange;
background-color: blue;
}
/* määritetään suuri otsikko */
h2.iso
{
font-size: 200%
}
/* määritetään punainen teksti */
.punainen
{
color: red;
}
/* "*"-merkki on universaali valitsin eli kaikki teksti muuttuu Verdana tyyliseksi jos ei muuta mainita */
*
{
font-family: verdana;
}

<h2>-elementti merkitsee suurta otsikkoa. <p>-elementti merkitsee kappaletta. Kun ylläoleva koodi ajetaan selaimessa näyttää lopputulos seuraavanlaiselta.

Tervetuloa XHTML:n ihmeelliseen maailmaan

Tämä on kappale.

Tämä on toinen kappale.

Sivulla http://jigsaw.w3.org/css-validator/ voi tarkistaa ett tiedosto on CSS yhteensopiva.

/* määritellään kaikille otsikoille ominaisuuksia */
h2,h2,h3,h4,h5,h6
{
background-color: silver;
background-image: url("kuvat/smile.gif"); /* kuvat kansiosta smile.gif-kuva */
border: 1px dotted black;

/* neljä eri tapaa tehdä teksti valkoiseksi */
color: white;
color: #ffffff;
color: rgb(255, 255, 255);
color: rgb(100%, 100%, 100%);

float: left;
font-family: verdana, arial;
font-size: 200%;
font-weight: bold;

height: 100px;
left: 100px;
padding: 10px;

text-align: center;
text-align: right;
text-align: left;

top: 100px;
width: 100px;
z-index: 2;
}

Linkkejä:
Esitelmä väreistä: http://www.cc.jyu.fi/~mimi/luento/index.htm
Väriympyrä: http://www.web-source.net/216_color_chart.htm
Ilmaista kotisivutilaa saa esim. osoiteesta http://www.fortunecity.com.

On erilaisia tapoja asettaa esim. kuvia tai tekstiä kotisivuille. Ennen käytettiin yleensä taulukoita joiden avulla sijoitetiin asioita. Nykyään suositellaan kuitenkin että sijoitukset tehdään CSS:n avulla.

Linkki CSS-ominaisuuksista: http://www.quackit.com/css/properties/.

Valikot

Sijoittaminen

Pari linkkiä sijoittamisesta. sijoittaminen 1 sijoittaminen 2

----------Tästä alaspäin olevat asiot ovat rakennuksen alla.----------

/* Kaikkien .reunus-luokkien ymprille tulee reunus (border) joka on 2 pikseli leve ja mustan vrinen. p:n tai h2:n ymprill on mys 5 pikselin marginaali (margin). */

.reunus
{
border: 2px solid #000000;
}

.marginaali
{
margin: 5px;
}
Taso3
Ulompi
Sisempi

Heading one

Paragraph 1

Paragraph 2

Paragraph 3

Heading two

Paragraph 1

Paragraph 2

Paragraph 3

/* tyylit.css */ .suorakulmio
{
position: absolute;
top: 2em; /* 2 kertaa fontin korkeus */
left: 80%;
width: 10%;
/* height: 10%; */
background-color: rgb(255, 0, 0);
}

kappale

tekstiä

Sijoitus

This is normal text.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

This is more normal text.