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.

Pogled u CSS

Pogledajmo zajedno kako izgleda CSS. Kratak primjer usporedbe čistog HTML kôda i web stranice izrađene CSS‑om govori sam za sebe.

Ako želimo da ispis koji vidi korisnik izgleda ovako,

možemo to uraditi sljedećim HTML kôdom:

<p>
<font face=" Courier New, Courier, mono">
<font color=" #9b5c98" size="+2 ">
<b> Lorem</b></font>
  ipsum dolor sit amet,
</font>
</p>
<p>
<font face=" Courier New, Courier, mono">
<font color=" #9b5c98" size="+2 ">
<b> consectetur</b></font>
  adipisicing elit ...
</font>
</p>

ili možemo napisati nekoliko linija CSS-a,

p {
  font-family: "Courier New", Courier, mono ;
}
.naglaseno {
  color: #9b5c98 ;
  font-size: 24px ;
  font-weight: bold ;
}

i tada će, za isti rezultat ispisa, HTML kôd izgledati ovako:

<p>
  <span class=" naglaseno">Lorem</span>
  ipsum dolor sit amet ...
</p>
<p>
  <span class=" naglaseno">consectetur</span>
  adipisicing elit ...
</p>

U drugom primjeru izvedenom CSS-om vrijedi primijetiti dvije važne stvari:

  • jednostavnost HTML kôda,
  • oblik, veličina i boja znakova za obje linije kontrolira se s jednog mjesta.
  • Samo je drugi primjer HTML kôda u skladu sa strogim standardom HTML 4.01. Prvi je primjer ostvaren elementom font za koji se preporuča izbjegavati ga.
  • U stvarnim primjenama CSS-a nije preporučljivo miješati razne veličine znakova ili fontove u jednom redu kao što je to, demonstracije radi, učinjeno ovdje.
CARNet