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.
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/.
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). */
.reunusParagraph 1
Paragraph 2
Paragraph 3
Paragraph 1
Paragraph 2
Paragraph 3
kappale
tekstiä
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 text will appear to the right of the rest of the 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.