CSS stilovi : CSS styles

Svakom od CSS svojstava moramo dodijeliti vrijednost. Tako svojstvu boje teksta (svojstvo color) ili pozadinske boje (svojstvo background-color) dodjeljujemo vrijednost boje koja može biti engleski naziv boje (npr. red, green, blue, orange...). Kada istom selektoru dodjeljujemo dva ili više svojstava navodimo ih jedan iza drugoga.

h1 { 
  color: blue; 
  background-color: orange;
}

CSS svojstava koja u sebi imaju razmak

Vrijednosti koja u sebi imaju razmak moramo navesti unutar navodnika, primjer:

h1 { 
  color: blue; 
  font-family: "Times New Roman";
}

Redoslijed važnosti selektora

Zadane vrijednosti web preglednika
Vanjska css datoteka
Css svojstva <style> unutar <head> dijela web stranice
Umetnuta css svojstva unutar elementa (npr <p style ="color:blue;">tekst </p>)

CSS svojstva s većim rednim brojem imaju viši prioritet.

Web dizajn i css

CSS selektor potomka

Koristimo ga kada imamo više elemenata kojima želimo dodijeliti različita svojstva. Npr. unutar <header> elementa imamo odlomak <p>, a imamo također i unutar <article> elementa odlomak <p>. Pristupamo im različito kada želimo različita svojstva za isti element <p>:

Selektori su:

header p {		
  color: blue; 
  text-align: justify;	
}
article p {
  background-color: olive; 	
  text-align: left;	
}

CSS poravnanje teksta

<!DOCTYPE html>
<html lang="hr">
  <head>
  <meta charset="utf-8" />
  <title>Selektor elementa</title>
  <style>
    header p { 
      color: blue; 
      text-align: justify;	
    /* boja teksta odlomka unutar naslova plava */
    /* poravnanje odlomka obostrano */
    }
    h1 {
      color: green; 
      text-align: center;	
    /* boja teksta naslova 1 zelena */
    /* poravnanje naslova 1 središnje */
    }
    h2 {
      color: yellow; 
      text-align: right;	
    /* boja teksta naslova 2 žuta */
    /* poravnanje naslova 2 desno*/
    }
    article p {
      background-color: olive; 	
      text-align: left;	
    /* boja pozadine odlomka unutar članka maslinasta */
    /* poravnanje odlomka članka lijevo */
    }
  </style>
  </head>
  <body>
    <header>
      <p>Odlomak poravnat obostrano. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
    </header>
    <h1>Obojan tekst naslova poravnat središnje</h1>
    <h2>Obojan tekst naslova poravnat desno</h2>
    <article>
      <p>Odlomak s poravnat lijevo</p>
    </article>
  </body>
</html>

CSS nazivlje

Kao i kod HTML nazivlja postoje nazivi koje je potrebno poznavati kako bi mogli koristiti CSS. CSS nazivlje obuhvaća selektore, svojstva i vrijednosti. No u tome u slijedećoj cjelini.

Uvod uweb dizajn