Katsaus CSS:ään

Tässä yhteydessä en käsittele seuraavia:

• Why style sheets are harmful
• Lurching Toward Babel: HTML, CSS, and XML

Johdattava esimerkki

h1, h2, h3, h4   { text-align : center; }
strong.warning   { color : red; background : white; }
blockquote       { padding : 5px; font-style : italic; }
blockquote.latin { border : solid green 3px; }

Onko intuitiivisesti selvää, mitä suunnilleen merkitsee?

Esimerkkiä voi katsella.

Miksi CSS?

Erilaisia vastauksia:

1. Rakenteen (HTML) ja esitysasun (CSS) erottaminen toisistaan
2. Ulkoasua koskevien ehdotusten tekeminen
3. HTML + CSS = ladontakieli (desktop publishing) (väärä vastaus)

Historiaa:

• HTML 2.0: Yksinkertainen (alkeellinen?) rakenteen kuvauksen kieli. Joitakin ulkoasuseikkoja (tai "semi-presentational features") lähinnä tägien kautta. Esim. neljä (tai viisi) erilaista listaelementtiä ul, ol, menu ja dir (ja dl).
• HTML 3.2: Lisää piirteitä, etenkin määritteiden (attribuuttien) kautta, esim align="left", width="100", font size="4". Lisäksi taulukot, joilla ruvettiin tekemään myös ns. taittoa.
• HTML 4.0: Edelleen lisää piirteitä ja ulkoasuseikat HTML:ssä julistetaan ei-toivotuiksi ("deprecated in favor of style sheets").

Jo HTML 2.0:ssa ajateltiin tyylisäännöstöjä, esim.:

The P element indicates a paragraph. The exact indentation, leading space, etc. of a paragraph is not specified and may be a function of other tags, style sheets, etc.

Tilanne:

• Selaintuki vaihtelee suuresti ja osittain pahasti bugista:
  • IE 3: "paras puoli sen CSS-tuessa on, että sen saa helposti pois päältä"
  • IE 4: melko kattava CSS1-tuki mutta vielä paljon ongelmia
  • Netscape 4: varsin puutteellinen tuki
  • Opera 3.5x: melko kattava CSS1-tuki, mutta bugeja ja puutteita on.
• HTML:llä vai CSS:llä?
  • Ulkoasuun vaikuttava HTML "toimii" vielä usein paljon useammissa tilanteissa kuin CSS.
  • Toisaalta sillä voi tehdä paljon vähemmän kuin CSS:llä.
  • Tapojen yhdistäminen mahdollista, mutta voi tuottaa ongelmia.
• CSS:n käyttö on leviämässä. Vähintään 80 % roskaa:
  • väärinkäyttö semantiikan uudelleenmäärittelyyn
  • fyysiset dimensiot (font-size:8pt)
  • huolimattomuus (ehdotetaan tekstin väriä taustan väristä huolimatta)
  • syntaksi väärin
  • pyrkimys hallita koko dokumentin esitysasua (esim. normaalitekstin fontti) pikemminkin kuin tehdä tyylikkäitä korostuksia yms.

p:first-letter { font-weight : bolder; }

<h3>Jotain</h3>
Liirum laarum
niitä näitä.
<p>
Jotain lisää blaa blaa.

Miten opiskella CSS:ää

1. Jukka Korpela: Web-julkaisemisen opas, luku Värikkyyttä: tyylisäännöstöt (style sheets, CSS). Suomenkielisenä johdantona CSS:ään voi lukea myös Pekka Pääkkösen kirjoittaman dokumentin CSS-Tyylimäärittely, joka on referaatti kirjasta Lie & Bos : Cascading style sheets.
2. Seuraavasta voi olla pieni apu: CSS-termejä suomeksi ja englanniksi
3. Varsinaiseen opiskeluun sopinee parhaiten WDG:n CSS-aineisto joka käsittelee CSS1:tä.
4. CSS2:n opiskelu ei vielä ole kovin hyödyllistä, koska sen tuki on suppea. Mutta CSS:stä syvällisemmin kiinnostuneen kannattaa lukea CSS2:n spesifikaatio.
5. Lisää apua löytyy CSS Pointers -aineistosta.

¿Entä Downloadable CSS Tutorial from Style Master?

Primum est non nocere. Tärkeintä on olla vahingoittamatta. (Hippokrates.) Huolehdi siitä, että CSS:n käyttö ei kovin pahasti huononna esitysasua.

Käytännön neuvoja

1. Katsotaan WDG:n CSS-aineistosta Cascading Style Sheets miten homma tehdään
2. Katsotaan toimiiko se edes siedettävästi selaimissa: Master Compatibility Chart
3. Tarkistetaan HTML-koodi validaattorilla ja CSS-koodi CSSCheckillä.
4. Ihmetellään kun se ei siltikään toimi. :-) Ehkä kysytään neuvoa ryhmässä comp.infosystems.www.authoring.stylesheets

Tee mieluummin yksinkertaista CSS:ää joka toimii kuin hienouksia, jotka eivät toimi.

Viimeisimmän päivityksen ajankohta: 2000-03-09