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,

Lorem ipsum dolor sit amet,

consectetur adipisicing elit ...

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