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
Accessibility
Reset All

Background Colour

Font Face

Font Size

1

Text Colour