CSS Upotreba

undo redo

Kako upotrijebiti CSS?

Da bi mogli upotrijebiti CSS, moramo ga ubaciti u HTML dokument.

Postoje tri načina kojim možemo ubaciti CSS u HTML dokument.

1. Eksterna upotreba

2. Interna upotreba

3. Inline upotreba

Eksterna upotreba

Externa upotreba podrazumijeva da se CSS stilovi spremaju u eksterni CSS dokument.

Externi CSS dokument se sprema pod extenzijom .css.

Kada koristimo eksterni CSS dokument, moramo ga povezati sa HTML dokumentom.

Ovaj način ima prednost nad ostalim, jer omogućava da HTML dokument bude pregledniji.

Povezivanje:

Da bi koristili eksterni CSS dokument, moramo ga povezati sa HTML dokumentom.

Povezivanje se izvršava HTML elementom <link>, koji se smješta u zaglavlje.

CSS

U atribut href se upisuje lokacija CSS dokumenta.

Interna upotreba

Interna upotreba podrazumijeva da CSS stilovi budu spremljani u HTML dokumentu.

CSS stilovi se smještaju u zaglavlje (head) HTML dokumenta, unutar elementa <style>.

CSS

<head>
   <style>

      p {
         font-family: arial;
      }

      h1 {
         color: blue;
      }

   </style>
</head>

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

<style>
p {
 font-family: arial;
}

h1 {
 color: blue;
}
</style>

</head>
<body>

<h1>Ovo je heading h1, i plave je boje.</h1>
<p>Ovo je paragraf p, fonta arial.</p>

</body>
</html>

Inline upotreba

Inline upotreba podrazumijeva da se CSS stilovi pišu unutar pojedninih elemenata.

Inline stilovi mogu biti korisni ako želimo definisati jednistven stil za neki element, (npr. određenu boju).

Da bi ubacili inline stil, u početnom tagu dodamo atribut style i tu pišemo CSS stilove.

CSS

<p style ="color: red; font-family: arial;"> Ovo je paragraph sa inline upotrebom. </p>

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>

</head>
<body>

<p style ="color: red; font-family: arial;">Ovo je paragraph sa <b>inline</b> upotrebom. </p>

</body>
</html>

undo redo

w3sedic

CSS

CSS Upotreba