Kako povezati CSS i HTML?

Iz tog razloga, osmišljen je CSS kojim je HTML sadržaj web stranice potpuno odvojen od njenog prikaza. CSS kod sadrži univerzalne elemente namenjene stilizovanju pa je tako drastično smanjen obim koda koji je bilo potrebno naučiti i primeniti na svakoj web stranici.

CSS definiše kako će HTML elementi biti prikazani i rasporedjeni u okviru prozora pretraživača.

Kako se CSS uklapa u HTML?

U zavisnosti od toga gde se CSS kod pojavljuje, tj. piše, postoje tri različite mogućnosti.

Inline zapisivanje CSS-a

Inline metod znači da se CSS kod zapisuje u okviru otvarajućeg dela HTML taga čiji sadržaj se stilizuje. Sintaksa zapisivanja inline CSS-a je sledeća:

<ime_taga style=”atribut:vrednost;atribut:vrednost;”>Neki tekst …</ime_taga>

Kako izgleda inline ubacivanje CSS koda najbolje se vidi na primerima ispod.

<body style=”margin:0px;padding:0px; background-color:red; font-family:Arial, Helvetica, sans-serif;”>

Ovim smo definisali četiri CSS atributa koji će biti primenjeni na html element body.

ili

<p style=”color:red;font-size:14px;margin:0;padding:0;”>Neki tekst paragrafa</p>

Interno zapisivanje CSS-a

Interno znači da se CSS kod za stilizovanje takodje nalazi u samom HTML dokumentu, ali ne u okviru taga već u okviru head sekcije HTML dokumenta. Taj kod je odvojen od ostatka head sekcije otvarajućim i zatvarajućim tagom <style>

<style>

CSS pravila…

</style>

Najbolje ćemo videti pozicioniranje CSS internog stila na primeru kompletnog HTML dokumenta:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Untitled Document</title>

<style>

body {margin:0px; padding:0px;}

p, h1, h2, span {color:white;}

div {background-color:red;}

</style>

</head>

<body>

Sadržaj stranice…

</body>

</html>

Eksterno zapisivanje CSS-a

Eksterno zapisivanje CSS-a podrazumeva kreiranje posebnog tekstualnog dokumenta koji će biti kreiran i pozivan iz HTML dokumenta. On se poziva tako što se u samom HTML dokumentu navodi putanja ka njemu a koja govori pretraživaču da ga učita i primeni stilska pravila koja su u njemu definisana na HTML elemente koje ima u daljem kodu. Tag koji se stavlja u head sekciju dokumenta izgleda ovako:

<head>
<link rel=”stylesheet” type=”text/css” href=”stil.css”>
</head>

Kao što vidimo, za ovo se koristi poseban link tag a najbitniji parametar/atribut koji se navodi je href. U njemu je sadržana relativna putanja ka CSS dokumentu kao i njegovo ime.

Ovaj link je samozatvarajući.

rel=”stylesheet” pojašnjava pretraživaču u kakvom su odnosu dokument koji se uvozi i HTML dokument.

type=”text/css”   je više informativnog tipa. Označava vrstu sadržaja koji se uvozi (MIME tip).

Inače, zbog kompletnosti, MIME predstavlja način klasifikovanja dokumenata na Internetu, nezavisno od operativnog sistema na kome se koriste. MIME tip je koristan aplikacijama kao što su Web server i pretraživač. MIME se zapisuje iz dva dela odvojena kosom crtom (/). U našem slučaju text znači da se radi o tekstualnom dokumentu a css da je unutar njega css kod. Danas većina pretraživača ima ugradjeno prepoznavanje svih tipova dokumenata pa im ovaj podatak više nije potreban. Ovaj parametar se uglavnom stavlja zbog kompatibilnosti sa starijim verzijama pretraživača.

href=”stil.css” – CSS dokument koji učitavamo zove se stil.css i nalazi se u istom folderu gde i HTML dokument koji ga poziva. Sam CSS dokument je najobičniji tekstualni dokument i može se kreirati u bilo kom tekst editoru, čak i u Notepad-u.

Razlika ovog načina zapisivanja u odnosu na inline i interni način je u tome što u slučaju eksternog fajla, ne postoji style tag nigde u dokumentu jer ne postoji potreba razdvajanja CSS i HTML koda. Sam način pozivanja putem taga link i imena fajla koji ima ekstenziju .css je pretrazivaču dovoljan da zna šta u okviru tog fajla treba da očekuje, a to je – CSS kod. Da bi vizuelno lakše objasnili, eksterni CSS fajl izgleda ovako:

body{

margin: 0 auto;

padding: 0;

background-color: #EBEBEB;

}

.Main{

position: absolute;

width: 100%;

left: 0;

top: 0;

}

.PageBackgroundSimpleGradient{

background-image: url(‘images/Page-BgSimpleGradient.jpg’);

background-repeat: repeat-x;

height: 500px;

}

.cleared{

float: none;

clear: both;

margin: 0;

padding: 0;

border: none;

font-size:1px;

}

NAPOMENA: Ovde možete primetiti kako prazan prostor u okviru CSS pravila nema nikakav značaj za ispravnost koda. Ovo je najčešći način zapisivanja gde se u okviru jedne linije definiše pojedinačni atribut.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn