Elementi CSS-a

Osnove sintakse CSS-a, priključivanje stilova web stranici, određivanje elemenata na koje će pojedine definicije stilova djelovati. Usput, tu su i neka svojstva o kojima će više riječi biti u posebnoj knjizi.

Generički kontejneri span i div

Smisao generičkih kontejnera je strukturirano obuhvaćanje i formatiranje raznih elemenata koje mogu sadržavati. Za razliku od oznaka koje su predefinirane – <p>, <h1>, ... – definiranje zadaće generičkih kontejnera prepušteno je dizajneru.

Element span

Element span je linijski generički kontejner. Tipičan primjer span kontejnera je formatiranje nekolicine riječi u tekstu.

p {
  font-size: 11px;
}
.istaknuto {
  font-size: 18px;
  font-weight: bold;
  border: 1px solid #000;
}
<p>Lorem <span class="istaknuto">ipsum dolor</span>, sit amet.</p>

Lorem ipsum dolor sit amet...

Element div

Element div je blok generički kontejner. Najčešće služi za obuhvaćanje više blok ili linijskih elemenata unutar jedne strukture koja dijeli zajedničko formatiranje. Primjer uporabe ovog elementa su prikazi CSS i HTML kôda u ovom tečaju.

/* ovaj je kod prikazan u kontejneru
definiranim sljedećim stilom */
.csskod {
  padding: 5px;
  margin: 0;
  width: 380px;
  color: #CC0000;
  background-color: #FFFFCC;
  font-family: courier, mono;
  text-align: left;
  border-width: 1px;
  border-style: dashed;
  border-color: #455372;
}
  • Zbog jednostavnosti uporabe i velike fleksibilnosti pri formatiranju raznog sadržaja, pri izradi stranica se generički kontejneri često koriste i tamo gdje to nije potrebno.
  • Nemojte pretjerati s uporabom. Primjerice, ukoliko želite formatirati tekst s okvirom, nemojte postavljati tekst u span ili div kontejner kojem ste dodali okvir – sjetite se da se okvir može definirati i u paragrafu, koji je već ionako predviđen za formatiranje teksta (vidi primjer CSS-a i ispis iz lekcije Što to točno CSS radi HTML-u?).
   
CARNet