Taustaominaisuudet voi antaa mille elementille tahansa - erityisesti a:hover, a:active ja a:focus voi olla hyvin havainnolliset taustaominaisuudet. lue lisää seuraavilta sivuilta (kaikilla sivuilla ei ole paluulinkkiä tälle sivulle - käytä vaihtoehtoisia ikkunoita):

• Special advances using CSS (JavaScript-koodin korvaaminen CSS:llä)
  
• Navigointi
• Entinen kotisivuni (olen määritelly linkeille sekä CSS:n että JavaScript-koodauksen)

W3C: CSS1: CSS1 Test Suite; CSS2: 14 Colors ja Backgrounds; 14.2.1 Background properties.

Seuraavassa on malli lohkositaatille (BLOCKQUOTE) tehtävästä reunusmäärittelystä (mallin määrittelyt eivät ole välttämättä mitenkään mielekkäitä, mutta ovat silti toimivia):

blockquote
{padding:10px; /* padding antaa täytearvon reunuksen sisään laitettaville elementeille ja tekstille - margin ja padding voidaan antaa kaikille reunoille pikakirjoitteena alempana olevien esimerkkien tapaan; negatiiviset margin-arvot ovat sallittuja, mutta padding ei voi saada negatiivia arvoja */
border: olive 5px solid; /* pikakirjoiteyleisarvot reunuksille, joka voidaan myöhemmin ohittaa - joka reunalle ei tämän kautta voi laittaa arvoja vaan täyttyy käyttää alimäärittelyitä */
border-style:inset; /* tässä kaikilla sivuilla sama reunus - tämä ohittaa edellisen määrittelyn arvon solid ja kukin seuraavista kolmesta ohittaa aina edellisen arvon */
border-style:inset outset ; /* tässä ensimmäinen koskee ylä- ja alareunaa ja toinen vasenta ja oikeaa reunaa */
border-style:inset outset inset; /* tässä ensimmäinen koskee yläreunaa ja toinen vasenta ja oikeaa reunaa ja kolmas alareunaa */
border-style:inset outset inset outset; /* tässä ensimmäinen koskee yläreunaa, toinen oikeaa, kolmas alareunaa ja neljäs vasenta reunaa eli arvot menevät myötäpäivään */
border-width: 10px 5px 10px; /* toimivat samalla logiikalla kuin border-style -arvot ja viimeksi mainittu ohittaa ensiksi annetun arvon */ }

Voit katsoa myös sivun Miten CSS liitetään Web-sivuihin malleja.

Ongelman ydin on oikeastaan siinä, mitä luonnostaan reunukselliset lomakekontrollielementit, kuten SELECT itse asiassa ovat. Niiden luonne on poikkeuksellinen. Ne voidaan ymmätää ikään kuin upotetuiksi objekteiksi, elementin IFRAME tapaan, jolla on oletuksena kehysreunukset. Selaimet eivät korvaa em. elementin kehysreunuksia CSS:llä. Ne saa pois vain määrittämällä frameborder="0". Elementtien SELECT ja IFRAME reunukset ovat saman tyylisiä, joten esim. elementin SELECT reunuksia voidaan periaatteessa tulkita niin, että sillä olisi ikään kuin frameborder="1", jota ei voi määritellä toiseksi. Tällöin CSS-reunukset tulevat näiden olemassa olevien reunusten ulkopuolelle ja elementti saa tuplareunukset. Koska useimmilla lomakekontrollielementeillä on HTML:ssä luonnostaan reunukset toisin kuin TABLE ja IMG elementeillä, joille voi lisäattribuuttina ne määritellä, ne ovat lomake-elementeissä hieman erikoisasemassa.

Elementtien FRAME ja FRAMESET tulisi saada reunukset samaan tapaan kuten IFRAME.

Reunusten ja taustaominaisuuksien määrittely BODY-elementille tuottaa ongelmia lyhyillä sivuilla. Ongelma on siinä, että ilman korkeusmäärittelyä standardin mukaan toimivilla selaimilla reunus- ja taustaominaisuudet saattavat päättyä välittömästi päätöskoodin </BODY> jälkeen!. Jos on lyhyitä sivuja, reunuksen alareunan paikka saattaa jollakin selaimella muuttua koko ajan. Taustakuvia käytettäessä pahinta on se, että taustamäärittely voi jatkua reunuksen alapuolella. Lopputulos on ikävän näköinen. HTML-elementille määriteltynä lopputulos on reunusten osalta siistimpi kun elementille on määritelty myös height:100%. Toisaalta pitkillä sivuilla reunus ei ole aina asiakirjan joka reunassa, sillä reunus rullautuu CSS-spesifikaatioita noudattavilla selaimilla asiakirjan mukana.

Lyhyille sivuille voi olla tarvetta määritellä lisäksi ylimääräinen DIV-elementti ja sille prosentteina määritelty korkeusarvo (esim. height: 97%), jotta edellä käsitellystä korkeusongelmasta päästään (vaihtoehtoisesti korkeusarvo voidaan antaa BODY elementille). Kun määrittelee tälle elementille reunukset, saa nekin toimimaan mahdollisimman monessa selaimessa. Jos reunusten ylä- ja alapuolella on marginaalia, reunusten rullautuminen ei ole suuri visuaalinen haittatekijä.

Mahdolliset border ja background ominaisuudet voivat aiheuttaa sen, että ei-korvattavat rivinsisäiselementit menevät osittain päällekkäin. Korvattavilla elementeillä positiiviset margin, padding jaborder arvojen tulee kasvattaa rivikorkeuksia niin, että elementit aina mahtuvat riville.

Pystytason marginaalit menevät normaalisti kasaan (käsittelen poikkeuksia myöhemmin), jolloin esim. kahdelle perättäisille lohkoelementeille annetut samat ylä-ja alamarginaalit tuottavat yksinkertaisen, ei kaksinkertaista marginaalia.

HTML 3.2-koodauksessa rivinsisäis- ja lohkoelementtien asemoinnit on määritelty puutteellisesti align ja valign attribuuttien avulla. Ne määrittävät toisinaan lohkoelementtien sisällä olevien rivinsisäiselementtien ja muun sisällön asemointia. Toisinaan ne määrittävät lohkojen itsensä asemointia suhteessa ympäröivään emoelementtiin.

Vaaka-asemoinnin kohdalla nämä kaksi asiaa on täysin erotettu toisistaan. Ominaisuus text-align koskee kaikkea lohkoelementin sisällä olevaa rivinsisäistason sisältöä. Täten text-align:center keskittää rivinsisäiselementin ja muun rivinsisäistason sisällön. Ominaisuus ei saisi vaikuttaa millään tavoin lohkoelementin itsensä asemointiin eikä sillä ole mitään vaikutusta rivinsisäiselementteihin.

Määrittelyn margin:auto pitää aiheuttaa lohkoelementtien (tai lohkoelementeiksi määriteltyjen elementtien) vaakakeskityksen mutta ei pystykeskitystä.

Pystykeskitykselle on ominaisuus vertical-align (mahdolliset arvot ovat: baseline, top, bottom, middle, sub, super, text-top, text-bottom + positiiviset ja negatiiviset prosentti- tai pikseliarvot (jälkimmäiset eivät kuulu CSS1:n arvoihin). Se vaikuttaa normaalisti vain lohkojen sisällä oleviin rivinsisäiselementteihin. Taulukkosoluissa sillä on sama tehtävä kuin valign attribuutilla (vain arvot top, middle jabottom ovat käytettävissä). Antamalla koko taulukolle tai yksittäiselle solulle korkeus ja yksittäisille solulle valign attribuutti tai vertical-align ominaisuus on mahdollista keskittää elementtejä pystytasossa. Jos BODY ja TABLE elementeille on määritelty korkeudeksi100% tai hieman vähemmän elementti voidaan suurin piirtein keskittää sivun keskelle. Tosine CSS2-spesifikaatio itsessäänf sisältää sen ongelman, että mille tahansa lohkoelementille ei saa pystykeskitystä.

Alla on esimerkki lohkoelementistä muutamin kommentein höystettynä ():

p.special
{border:1p solid blue;
text-indent: 3em; /* ensimmäisen rivin sisennys */
margin:10px; /* tämä suhteutetaan säilytinlohkoon (normaalisti säilytinlohko on elementin emoelementti, mutta ei tapauksissa, jossa elementti on absoluuttisesti tai kiinteaästi asemoitu (käsittelen absoluuttisesti tai kiinteästi asemoituja elementtejä sivulla 11)), jossa kappale on; negatiiviset arvot ovat sallittuja; muista myös marginaalien ja täytteiden pikakirjoitemäärittelyt! */
padding:10px; /* sisennys tekstille, joka on kappaleen sisällä; negatiiviset arvot eivät ole sallittuja */
text-align:justify; /* tekstin vaaka-asemointi; muut arvot ovat: left; center and right */
vertical-align: top; /* arvo ei periydy ja se vaikuttaa lohkon sisällä olevan tekstin ja muiden elementtien keskinäiseen pystyasemointiin */
font: normal small-caps 120%/120% fantasy;

Sivujen tekijät voivat käyttää lohko- ja rivinsisäiselementtejä virheellisesti ja panna rivinsisäiselementin sisälle lohkkoelementitejä. Ole huolellinen rivinsisäiselementtien käytössä. Älä laita lohkoelementtejä rivinsisäiselementtien sisälle (käsittelen elementtien käyttöämyös erläällä the usage of elements also in lisäsivulla).

Ainoat elementit, jota voi käyttää sekä rivinsisäis- että lohkoelementtinä ovat INS jaDEL. Mutta niitä ei tule käyttää samanaikaisesti sekä rivinsisäis- että lohkoelementteinä.

Toinen eteen tuleva ongelma on se, että kuinka tiukasti dimensiot on tulkittava. HTML-attribuutein määritellyissä taulukoissa dimensiot ovat vain minimiarvo. Näin CSS:ssä ei voida tavanomaisille lohkoille menetellä. Jos sisältö ei sovi annettuun arvoon, loppusisältö menee elementin ulkopuolelle - pahimmassa tapauksessa muun sisällön päälle.

CSS2:ssa tämä ongelma on ratkaistu antamalla mahdollisuus määritellä korkeudelle ja leveydelle raja-arvot (min-height, max-height, min-width ja max-width). Vaihtoehtoinen tapa on määrittää overflow:scroll tai overflow:auto, jolloin sitä osaa, joka ei mahdu lohkon sisälle voidaan skrollata.

Sen sijaan, että laittaa suuren määrän kerroksia, on yksinkertaisempaa määritellä perus CSS useimmille selaimille siten, että sivut toimivat suhteellisen hyvin ilman JavaScript tukea. Selainkohtainen CSS määritellään niille selaimille, jotka sitä todella tarvitsevat (katso malliksi lukemasi sivun lähdekoodi). Erityisen CSS:n tarve vaihtelee, sillä jokaisella selaimella on erilaiset viat.

Edellä esitettyjen asioiden lisäksi on otettava huomioon se, että selainten käyttäjät voivat pitää vasemmalla ja oikealla sivustalla työkalurivejä. Jos heillä on käytössä 800x600 pikselin monitori, käytettävissä olevan katselukanavan (viewport) eli ikkunan leveys on noin 730 pikseliä.