Home > CSS > Kratki uvod u CSS

Kratki uvod u CSS

Siječanj 17th, 2009

Uvod u Cascading style sheet

Šta je CSS

NAPOMENA: Ovaj clanak napisao je neki od bivsih clanova BHWebmasters.Net-a. Neznam ime nazalost pa molim autora ako cita ove redove da mi se javi. Nasao sam ovo u arhivi. Jako interesantan i dobar clanak za pocetak.

CSS je jezik koji može sadržati sve one podatke ili bolje rečeno sve syntax-e koje imaju zadatak da odrede stil (style) nekog elementa jedne stranice. Ti elementi mogu biti od običnog texta do jedne veoma kompleksno ”stajlovane” tabele.

Svaki sajt koji ne sadrži u sebi neke od syntax-i a koristi CSS za definisanje stila pojedinog ili pojedinih dijelova stranice mora imati dio HTML (HyperText Markup Language) koda koji poziva neki CSS fajl sa syntax-ama. Mi ćemo krenuti baš od početka a to je kako i kojom komandom pozvati neki CSS dokument.
Recimo da se vaš CSS dokument zove ”stil” tada u <HEAD> vašeg HTML-a pišete sljedeći kod:

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

Ako ne želite praviti poseban fajl za CSS syntax-e onda ih morate pisati u vaš HTML dokument i to na sljedeći način:

<style type=”text/css”>
<!–

OVDJE DOLAZE VAŠE SYNTAX-E

–>
</style>

U zadnjem kodu imamo sljedeće <!– … –>, to možemo izostaviti, a ono služi samo da se sakriju syntax-e od browsera koji ne podržavaju CSS.

S ovim smo riješili pozivanje nekog CSS fajla u HTML dokument. Sad je vrijeme da saznamo kako pisati CSS dokument i prije svega koje syntax-e postoje u CSS-u.

CSS syntax-e

U sljedećoj tabeli su prikazane neke syntax-e CSS-a:

CSS Syntax-a Kategorije Moguće vrijednosti
font-size apsolutna veličina slova
relativna veličina slova
dužina | procentualno
xx-small, x-small, small, medium, large, x-large, xx-large
larger, smaller
10pt, 12pt, 14pt, 20pt, 24pt,… | 20%, 25%, 50%, 80%, 120%,150%, 200%,…
font-family bilo koje sistemsko slovo Helvetica, Times, Geneva, Courier,…
font-weight ključna riječ | broj normal, bold, bolder, lighter | 100-900
font-style ključna riječ normal, italic
text-decoration ključna riječ none, underline, line-through
text-transform ključna riječ capitalize, uppercase, lowercase, none
text-align ključna riječ left, right, center, justify
text-indent dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
margin dužina | procentualno | ključna riječ em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n% | auto
margin-top dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
margin-right dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
margin-bottom dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
margin-left dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
padding dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
padding-top dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
padding-right dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
padding-bottom dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
padding-left dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
color boja none, naziv boje na Eng., #HexaDecimalni kod, rgb(0-255,0-255,0-255), rgb(?%,?%,?%)
background-color boja none, naziv boje na Eng., #HexaDecimalni kod, rgb(0-255,0-255,0-255), rgb(?%,?%,?%)
background-image URL slike url( )
border-width dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
border-style ključna riječ none, naziv boje na Eng., #HexaDecimalni kod, rgb(0-255,0-255,0-255), rgb(?%,?%,?%)
border-color boja none, naziv boje na Eng., #HexaDecimalni kod, rgb(0-255,0-255,0-255), rgb(?%,?%,?%)
border-top-width dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
border-right-width dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
border-bottom-width dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
border-left-width dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%
width dužina | procentualno em, ex, px, pt, pc, in, mm, cm | 1%-1000%, …n%

Apsolutne jedinice:

pt > tačka
px > pixel
mm > milimeter
pc > pica
in > inche
cm > centimetar

Relativne jedinice:

em > veličina slova
ex > polovina veličine slova
px > pixela, zavisno od rezolucije

Syntax-e za tekst

Syntax-a {font-size}

Koristi se za definisanje veličine slova, a može se definisati na četiri načina: absolutno, relativno, po dužini, ili procentualno. Možda najjednostavnije a i ono što većina koristi jeste definisanje veličine slova po dužini.

Primjer:
{ font-size: 30px; }

Obajšnjenje: syntax-a je definisana preko dužine od 30px .

Sadržaj

CSS Syntax-a:

{ font-size: apsolutna veličina slova|relativna veličina slova|dužina|procentualno; }

NAPOMENA: uspravna linija iz prošlog primjera znači “ili” tj. samo jednu od veličina smijete koristiti : aspolutnu veličinu slova ili relativnu ili dužina ili procentualno.

• apsolutna veličina slova
koristi jednu od ovih ključnih riječi:
xx-small, x-small, small, medium, large, x-large, xx-large
• relativna veličina slova
koristi jednu od sljedećih ključnih riječi: larger, smaller
• dužina
upisuje se broj koji odgovara nekoj jedinici, te jedninice mogu biti px, pt, in, cm itd.
• procentualno
upisuje se broj koji odgovara je izražen procentualno

Primjeri za sve četiri mogućnosti:

• apsolutna veličina slova
{ font-size: xx-large; }
• relativna veličina slova
{ font-size: smaller; }
• dužina
{ font-size: 14px; }
• procentualno
{ font-size: 80%; }

Syntax-a {font-family}

Određujemo vrstu slova, ovdje se isklučivo koriste standardna sistemska slova. U syntax-u možemo upisati više vrsta slova ali ih moramo odvajati zarezom i razmakom nakon zareza kao u sljedećem primjeru:

Primjer:
{ font-family: Times, Helvetica, TimesRoman, serif; }

Obajšnjenje: ovom syntax-om je postavljena vrsta fonta u Times, Helvetica, TimesRoman, serif.

Sadržaj

Ako imate vrstu slova koja ima razmak odnosno ime slova se sastoji iz dvije ili više riječi onda slovo definišite kao u primjeru:

{ font-family: “Book Antiquat”; }

CSS Syntax-a:

{ font-family: ImeSlova; }

ili

{ font-family: ImeSlova1, ImeSlova2, ImeSlova3, ImeSlovaN; }

ili

{ font-family: “Ime Slova”; }

Syntax-a {font-weight}

font-weight definiše debljinu odnosno koliko će vaša slova biti boldirana. Ovdje možete koristiti ključne riječi kao npr. bolder ili lighter ali i cijele brojeve od 100-900 i primjećujemo da ako stavimo veći broj naše slovo će biti deblje.

Primjer:
{ font-weight: bolder; }

Obajšnjenje: debljina slova je postavljena na bolder.

Sadržaj

CSS Syntax-a:

{ font-weight: normal|bolder|lighter|100… 900; }

• normal
ova ključna riječ je defaultna
• lighter
slova se udebljavaju ali malo
• bolder
slova se udebljavaju ali više nego kod lighter

Syntax-a {font-style}

Ova syntax-a podešava slova na italic (ukošena) ili ih vraća u normal (prvobitni) oblik.

Primjer:
{ font-style: italic; }

Obajšnjenje: slova će biti ukošena .

Sadržaj

• italic
ukošena slova
• normal
normalna slova

CSS Syntax-a:

{ font-style: normal|italic; }

Syntax-a {text-decoration}

Ova syntax-a dekorira vaš tekst sa nekim od sljedećih vrijednosti: underline, line-through, ili defaultna vrijednost none:

Primjer:
{ text-decoration: line-through; }

Obajšnjenje: tekst koji ima ovu sintax-u izgleda ovako:

Sadržaj

• underline
podvlači text
• line-through
linija kroz sredinu texta
• none
nema nikakvih dekoracija

CSS Syntax-a:

{ text-decoration: none|underline|line-through; }

Syntax-a {tetxt-transform}

Mijenja tekst na četiri načina: capitalize, uppercase, lowercase i kao defaultna vrijednost none.

• capitalize
Tekstovi Sa Ovom Syntax-om Će Imati Na Svakoj Riječi Početno Veliko Slovo
• uppercase
TEKSTOVI SA OVOM SYNTAX-OM SU NAPISANI VELIKIM SLOVIMA
• lowercase
tekstovi sa ovom syntax-om su napisani malim slovima
• none defaultna vrijednost
Primjer:
{ text-transform: uppercase; }

Obajšnjenje: tekst je napisan velikim slovima.

Sadržaj

CSS Syntax-a:

{ text-transform: capitalize|uppercase|lowercase|none; }

Syntax-a {text-align}

text-align se koristi za poravnanje teksta. Poravnanje se vrši sa četiri vrijednosti. Defaultna vrijednost je left.

• left
poravnava tekst sa lijeve strane
• right
poravnava tekst sa desne strane
• center
centrira tekst
• justify poravnava tekst sa obje strane
Primjer:
{ text-align: justify; }

Obajšnjenje: tekst je poravnat s obje strane .

Sadržaj ovog teksta je poravnat s obje strane. Glavni grad SAD-a nije Sarajevo već Washington

CSS Syntax-a:

{ text-align: left|right|center|justify; }

Syntax-a {text-ident}

Ova syntax-a služi za odvajanje prve linije od lijeve stranice za određenu vrijednost i za nju se može reći da je kao TAB dugme na tastaturi. Defaultna vrijednost je 0.

Primjer:
{ text-indent: 40px; }

Obajšnjenje: prvi red je 40px udaljen od početka tabele (tabela se ovdje ne vidi).

Sadržaj ovog teksta je poravnat s obje strane. Glavni grad SAD-a nije Sarajevo već Washington

CSS Syntax-a:

{text-indent: dužina|procentualno; }

Margin

Margine su nevidljivi vanjski prostor između elemenata i u ovom dijelu ćemo saznakti kako se definišu margine. Pri definisanju margina možete postaviti da sve margine imaju istu vrijednost ili da svaka ima različitu ali ono što je važno, pri davanju vrijednosti jednoj margini ne smijemo nikada koristiti negativne vrijednosti jer može doći do nekih nesporazuma. Kada koristite margine onda ih možete podesiti sve od jednm ili pojedinačno svaku posebno. Definisanje margina se može izvršiti na četiri načina:

• margin
ovdje se upisuje samo jedna cifra ili ključna riječ auto koja pravi isti prazni prostor oko elementa sa sve četiri strane
• margin-top
podešavanje gornje margine
• margin-right
podešavanje desne margine
• margin-bottom podešavanje donje margine
• margin-left podešavanje lijeve margine

Syntax-a {margin}

Ovu syntax-u koristimo samo ako želimo imati isti prazni prostor sa sve četiri strane elementa.

{ margin: 40px; } pravi 40px praznog prostora oko elementa

CSS Syntax-a:

{margin: dužina|procentualno; }

Syntax-a za element koji ima nejednake četiri margine izgleda ovako:

{ margin 11px 22px 33px 44px;}

Iz zadnjeg primjera vidimo da je: gornja margina 11px, desna margina 22px, donja margina 33px i lijeva margina 44px. Redoslijed margina je uvijek isti i piše/čita se u smjeru kazaljke na satu, gornja margina je prva a zatim slijedi desna itd. Bosanskim jezikom rečeno redoslijed je: gore-desno-dole-lijevo.

NAPOMENA: primjetite da se između dužina ne pišu zarezi

CSS Syntax-a:

{margin: dužina|procentualno|auto; }

Syntax-a {margin-top}

Služi za podešavanje gornje margine .

Primjer:

{ margin-top: 40px; }

CSS Syntax-a:

{margin-top: dužina|procentualno; }

Syntax-a {margin-right}

Služi za podešavanje desne margine .

Primjer:

{ margin-right: 40px; }

CSS Syntax-a:

{margin-right: dužina|procentualno; }

Syntax-a {margin-bottom}

Služi za podešavanje donje margine .

Primjer:

{ margin-bottom: 40px; }

CSS Syntax-a:

{margin-bottom: dužina|procentualno; }

Syntax-a {margin-left}

Služi za podešavanje lijeve margine .

Primjer:

{ margin-left: 40px; }

CSS Syntax-a:

{margin-left: dužina|procentualno; }

Padding

padding syntax-a služi da definišemo unurtašnji razmak jedne tabele, odnosno s time definišemo koliko će neki tekst ili slika biti udaljena od granice tabele. Ova syntax-a bi bila nešto slično kao CELLPADDING u HTML-u. Zamislite da je vaš element kao blok koji ima vanjski dio, unutrašnji i granični dio koji se nalazi između prva dva. Da bi naš tekst, slika ili drugi sadržaj elementa bio za određenu vrijednost udaljen od granice koristitćemo padding syntax-u na sljdeći način:

• padding
ovdje se upisuje samo jedna cifra koja pravi isti prazni prostor u unurtašnjosti elementa sa sve četiri strane
• padding-top
podešavanje gornjeg razmaka
• padding-right
podešavanje desnog razmaka
• padding-bottom podešavanje donjeg razmaka
• padding-left podešavanje lijevog razmaka

Syntax-a {padding}

Ovu syntax-u koristimo samo ako želimo imati isti razmak u unutrašnjosti elementa sa sve četiri strane.

Primjer:
{ padding: 10px; }

Obajšnjenje: razmak od crvenih linija (bordera ili okvira) je najmanje 10px.

Sadržaj

CSS Syntax-a:

{padding: dužina|procentualno; }

Syntax-a za element koji ima nejednake razmake:

{ padding 11px 22px 33px 44px;}

Iz zadnjeg primjera vidimo da je: gornji razmak 11px, desni razmak 22px, donji razmak 33px i lijevi razmak 44px. Redoslijed razmaka je uvijek isti i piše/čita se u smjeru kazaljke na satu, gornji razmak je prvi a zatim slijedi desni itd. Dakle padding ima sličan princip kao margin syntax-a.

NAPOMENA: primjetite da se između dužina ne pišu zarezi isto kao kod syntax-e margin

CSS Syntax-a:

{padding: dužina|procentualno; }

Syntax-a {padding-top}

Služi za podešavanje gornjeg razmaka.

Primjer:

{ padding-top: 40px; }

CSS Syntax-a:

{padding-top: dužina|procentualno; }

Syntax-a {padding-right}

Služi za podešavanje desnog razmaka .

Primjer:

{ padding-right: 40px; }

CSS Syntax-a:

{padding-right: dužina|procentualno; }

Syntax-a {padding-bottom}

Služi za podešavanje donjeg razmaka .

Primjer:

{ padding-bottom: 40px; }

CSS Syntax-a:

{padding-bottom: dužina|procentualno; }

Syntax-a {padding-left}

Služi za podešavanje lijevg razmaka .

Primjer:

{ padding-left: 40px; }

CSS Syntax-a:

{padding-left: dužina|procentualno; }

Color – CSS Boje

Prije nego sto krenemo sa syntax-ama kojime definišu boje jednog elementa trebamo znati koje sisteme definisanja boja imamo. Postoje tri različita sistema od kojeg je najinteresantniji HexaDecimalni sistem ali mi ćemo obraditi sve pa sami izaberite koji ćete sistem koristiti.

Moguće je:

{ color: rgb(crvena%, zelena%, plava%); } <<< RGB% sistem
{ color: rgb(0-255, 0-255, 0-255); } <<< RGB sistem
{ color: #HexaDecimalni kod; } <<< HexaDecimalni sistem

RGB sistem

{ color: rgb(crvena, zelena, plava); }

Ovdje ćemo umjesto riječi crvena, zelena i plava upisati broj vrijednosti od 0 do 255. Što je manji broj tako je boja bliža crnoj i obrnuto dakle ako umjesto “crvena” upišemo broj bliži nuli onda će crvena biti tamno-crvena. Kada se sve tri vrijednosti popunimo nekim brojem onda to čini vašu boju, zamislimo da sve tri vrijednosti odgovaraju svjetiljkama, ako isklučimo dvije svjetiljke onda one imaju vrijednost 0 a treća koja je upaljena ima maksimalnu vrijednost 255, sobu koju obasjavaju te svjetiljke obasjat će je ali ne sa maksimalnim osvjetljenjem već samo sa 1/3 to bi od prilike činilo smeđu boju. Iz ovoga slijedi da ako su sve svjetiljke ugašene nemamo svjetlosti i to je crna boja. Ako su sve svjetilke upaljene (ako su sve vrijednosti 255) onda je to maksimalna vrijednost sve tri boje crvene, zelene i plave i to čini bijelu boju, sve između čini neku drugu boju.

{ color: rgb(crvena%, zelena%, plava%); }

Umjesto crvena%, zelena% i plava% pišemo vrjednosti od 0% do 100%. U pogledu na prvi primjer 100% odgovara 255 odnosno 0% odgovara 0.

Ovom syntax-om podešavamo crvenu, zelenu i plavu boju u procentima.

Neke vrijednosti:

Syntax-a Rezultat
rgb ( 255, 0, 0 ) puna crvena, bez zelene, bez plave crvena
rgb ( 0, 255, 0 ) bet crvene, puna zelena, bez plave zelena
rgb ( 0, 0, 255 ) bez crvene, bez zelene, puna plava plava
rgb ( 255, 255, 255 ) puna crcena, puna zelena, puna plava bijela
rgb ( 0, 0, 0 ) bet crvene, bez zelene, bez plave crna
rgb ( 100%, 0%, 0% ) puna crvena, bez zelene, bez plave crvena
rgb ( 0%, 100%, 0% ) bet crvene, puna zelena, bez plave zelena
rgb ( 0%, 0%, 100% ) bez crvene, bez zelene, puna plava plava
rgb ( 100%, 100%, 100% ) puna crcena, puna zelena, puna plava bijela
rgb ( 0%, 0%, 0% ) bet crvene, bez zelene, bez plave crna

HexaDecimalni sistem

{ color: #HexaDecimalni kod; }

U HTML-u ili CSS-u boje možemo definisati preko HexaDecimalnih kodova koji počinju sa znakom “rešetka” (#) i iza rešetke dolazi šest simbola “HexaDecimalni kod”. HexaDecimalni sistem sačinjavaju slova A, B, C…. F i brojevi 0, 1, 2, 3… 9. Neki od ovih simbola se poredaju u red od šest znakova i to čini određenu boju. Ovaj sistem koristi 99% webmastera.

#HexaDecimalni kod Rezultat
#000000
#FFFFFF
#333333
#FF0000
#00FF00
#0000FF
#FFFF00
#9300EE

Sistem sa ključnim riječima

Ovaj sistem koristi riječi koje naznačavaju boju. Riječi su na engleskom jeziku.

Nekoliko ključnih riječi.

Ključna riječ Rezultat
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
coral
darkblue
darkolivegreen
firebrick

Background – pozadina

background syntax-a ima zadatak de odredi izgled pozadine, ona je određuje na dva načina. Prvi način je boja pozadine a drugi je slika pozadine.

Syntax-a {background-color}

Vrši podešavanje boje pozadine elementa.

Primjeri:

{ background-color: green; }
{ background-color:#008000; }
{ background-color: rgb(0, 255, 0); }
{ background-color: rgb(0%, 100%, 0%); }

CSS Syntax-a:

{ background-color: ključna riječ|#HexaDecimalni kod|rgb(0-255,0-255,0-255)|rgb(0-100%,0-100%,0-100%); }

Syntax-a {background-image}

Postavlja sliku u pozadinu elementa. Ako imamo sliku koju želimo postaviti u pozadinu neke tabele onda to možemo uraditi preko sljedeće syntax-e:

Predpostavimo da se slika zove BHWlogo.jpg

{ background-image: url(folder do slike/BHWlogo.jpg); }

CSS Syntax-a:

{ background-image: url(URLSlike); }

Border – okvir

Borderi su oviri koji se nalaze oko nekog elementa.

Syntax-a {border-width}

Podešavanje debljine bordera.

Primjer:
{ border-width: 15px; }

Obajšnjenje: postavlja debljinu bordera na 15px .

Sadržaj

CSS Syntax-a:

{ border-style: dužina|procentualno; }

Syntax-a {border-style}

Podešavanje stila odnosno kako će okvir izgledati, moguće su none, solid, dashed, dotted, inherit, double, inset, outset, groove, ridge ključne riječi. Da bi se border sa određenim stilom mogao prikazati potrebna mu je određena debljina, tu debljinu određujemo syntax-om border-width.
Primjer:
{ border-style: dotted; }

Obajšnjenje: ključna riječ u syntax-i čini da okvir oko elementa bude isprekidan.

Sadržaj

CSS Syntax-a:

{ border-style: none|solid|dashed|dotted|inherit|double|inset|outset|groove|ridge ; }

Syntax-a {border-color}

Podešavanje boje bordera. Da bi se border sa određenom bojom mogao prikazati potrebna mu je minimalna debljina od 1px, tu debljinu određujemo syntax-om border-width.

Primjer:
{ border-color: blue; }

Obajšnjenje: border je plav.

Sadržaj

{ border-color: ključna riječ|#HexaDecimalni kod|rgb(0-255,0-255,0-255)|rgb(0-100%,0-100%,0-100%); }

Syntax-a {border-top-width}

Podešavanje debljine gornjeg dijela okvira, tj. podešavanje debljine gornje linije.

Primjer:
{ border-top-width: 5px; }

Obajšnjenje: gornji border ima vrijednost 5px.

Sadržaj

Syntax-a {border-right-width}

Podešavanje debljine desnog dijela okvira, tj. podešavanje debljine desne linije.

Primjer:
{ border-right-width: 5px; }

Obajšnjenje: desni border ima vrijednost 5px.

Sadržaj

Syntax-a {border-bottom-width}

Podešavanje debljine donjeg dijela okvira, tj. podešavanje debljine donje linije.

Primjer:
{ border-bottom-width: 5px; }

Obajšnjenje: donji border ima vrijednost 5px.

Sadržaj

Syntax-a {border-left-width}

Podešavanje debljine lijevog dijela okvira, tj. podešavanje debljine lijeve linije.

Primjer:
{ border-left-width: 5px; }

Obajšnjenje: lijevi border ima vrijednost 5px.

Sadržaj

Syntax-a {width}

Ova syntax-a podešava dužinu nekog elementa. width može biti izražen procentualno, apsolutno ili sa ključnom riječi auto koja je i defaultna vrijednost.

Neke od mogućih vrijednosti syntax-e:

{ width: 500px; }
{ width: 7in; }
{ width: 100%; }
{ width: auto; }

Primjer:
{ width: 160px; }

Obajšnjenje: prikazana je tabela koja je zavisna od width syntax-e, pošto je syntax-a podešena na 160px i tabela će biti te iste dužine.

Upotreba CSS-a

Primjer: napraviti CSS sa pet elemenata:

1. element 1 treba imati okvir “border” debljine 3px samo sa desne strane, ostale strane su 1 px
2. element 2 crvena boja slova sa crvenim isprekidanim “dotted” borderom debljine 1px
3. element 3 ima plavu pozadinu “background” sa crnim slovima
4. element 4 je tabela crvene boje i dužine “width” 30%
5. element 5 ima razmak “padding” od 10px sa svih strana, vrsta slova Verdana crne boje

Riješenje:

1. Otvoriti novi dokument u Notpad-u
2. U prazan dokument upisati sljedece CSS syntax-e:

.element1 { border-style: solid; border: 1px; border-right-width: 3px ; }
.element2 {color: red; border: 1px; border-style: dotted; border-color: red; }
.element3 {color: #000000; background-color: blue; }
.element4 {backgroun-color: blue; width: 30%; }
.element5 {padding: 10px; font-family: verdana; color: black; }

3. Snimiti dokument sa nekim imenom npr. stiyle.css

Upotreba CSS-a u HTML-u

Ako već imamo napisane CSS sintax-e onda je vrijeme da ih iskoristimo, to se radi ovako:

Primjer: imamo tekst koji uzima syntax-u elementa 3 odnosno tekst će biti crn sa plavom pozadinom.

KOD:

<p class=”element3″>Ovaj tekst je crven i nalazi se na plavoj pozadini</p>

Ovako bi izgledao cijeli HTML dokument:

<html>
<style type=”text/css”>
.element1 { border-style: solid; border: 1px; border-right-width: 3px ; }
.element2 {color: red; border: 1px; border-style: dotted; border-color: red; }
.element3 {color: #000000; background-color: blue; }
.element4 {backgroun-color: blue; width: 30%; }
.element5 {padding: 10px; font-family: verdana; color: black; }
</style>
<body>
<p class=”element3″>Ovaj tekst je crn i nalazi se na plavoj pozadini</p>
</body>
</html>

Popularity: 7% [?]

CSS

  1. Trenutno nema komentara.
  1. No trackbacks yet.