Keskustelu: Nettisivujen teko: Ongelma CSS:n kanssa

Tässä CSS:n saloja opetellessa tuli nyt vastaan ongelma, johon en vastausta w3c:n upeasta oppaasta löytänyt. Eli nyt olen määritellyt divin seuraavasti:

div	{
	border-color: rgb(170, 170, 0);
	border-style: solid;
	border-width: 2px;
	padding: 0px;
	position: absolute;
	background-color: #eeeeee;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 10px;
}

Tämä on siis se vakiomäärittely jokaiselle diville. Mutta nyt kun haluaisin tehdä kaksi erilaista diviä, jotka noudattavat yllä olevia perusmääritteitä, mutta niillä olisi kuitenkin omia ominaisuuksia. Miten tämä onnistuisi ilman että tarttisi kuumastakin tehdä oma classi. Onko mahdollista?

Mitä vikaa on tehdä molemmista oma classi? Laitat ne tuon määreen jälkeen, niin kaikki nuo tulevat molemmille, ja lisäksi (tai osin tilalle) niiden omat määreet. (Ja id pitäisi olla eikä class, jos vain yhden teet molempia.)

/* joka diville */
div {
  margin: 0 0 0 0;
  border-color: #ff00ff;
  border-style: solid;
  border-width: 1em;
}
/* div id:llä oikea on lisäksi tällainen */
div#oikea {
  float: right;
  border-width: 0.5em;
}
/* ja div class vasen lisäksi tällainen */
div.vasen {
  float: left;
}

Hätätapauksessa voi tietenkin sivullekin upottaa tyylejä:
<div style="padding: 1em;"></div>

Kiitos taas. Juuri tuota hain.

Ja jos et halua määritellä ominaisuutta kaikille diveille, voit tietenkin kohdistaa määrittelyn useampaankin valitsemaasi kohteeseen. Esim:

div#oikea, div.vasen {
  margin: 0 0 0 0;
  border-color: #ff00ff;
  border-style: solid;
  border-width: 1em;
}

Ihan vain varoituksena valmista sivua ja ulkoasua ajatellen: jättäkää kommentit pois CSS:stä. Muuten saa erittäin todennäköisesti ihmetellä IE:n outoa käyttäytymistä. Kommentit aiheuttavat IE:ssä ongelmia, koska sillä on parsimisbugeja. Ne on tosin jo korjattu IE7:ssä, mutta se ei auta IE6:n suhteen.