CSS

redo

Dobro došli na CSS kurs

CSS predstavlja jezik kojim se stilizuje HTML dokument.

CSS omogućava web stranicama da budu uređene i korisnički prihvatljive.

Na ovom kursu naučit ćete kako koristiti CSS, kako bi vaše stranice bile što uređenije i modernije.

Šta sve može CSS?

CSS može da postavlja boje elemenata, mijenja raspored elemenata na stranici itd.

Primjer:

Napisat ćemo jedan jednostavan HTML dokument

HTML

<body>

<h1> Ovo je heading </h1>
<p> Ovo je paragraph. <p>

</body>

<!DOCTYPE html>
<html>
<head>
<title> Naslov </title>
</head>
<body>

<h1> Ovo je heading </h1>
<p> Ovo je paragraph </p>

</body>
</html>

Kada bismo ovakv HTML dokument otvorili u nekom pretraživaču, to bi izgledalo ovako:

REZULTAT

Ovo je heading

Ovo je paragraph.

Vidimo da je pretraživač samo pokazao tekst na bijeloj pozadini.

Hajde sada da dodamo malo CSS-a.

CSS

body {
     background-color: #4682B4;
}

h1 {
     text-align: center;
     color: white;
}

p {
     font-family: arial;
     font-size: 20px;
     color: yellow;
}

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

<style>
body {
background-color: #4682B4;
}

h1 {
text-align: center;
color: white;
}

p {
font-family: arial;
font-size: 20px;
color: yellow;
}
</style>

</head>
<body>

<h1>Dobro došli</h1>
<p>Naučite pisati web aplikacije</p>

</body>
</html>

Kada ponovo pokrenemo isti HTML dokument, pretraživač će pokazati ovakav prozor:

REZULTAT

Ovo je heading

Ovo je paragraph.

Sada možemo vidjeti sasvim drugačiji izgled prozora, iako je HTML dokument ostao posve isti.

Pomoću CSS postavki smo odredili izgled i poziciju pojedinih elemenata.

Sada smo vidjeli kako to CSS radi, ali to je samo mali dio onoga što CSS može.

Ukoliko imate ideje i poznajete CSS, možete stvarati jako lijepe i složene Web stranice.

redo

w3sedic

CSS

CSS

Ovo je heading

Ovo je heading