Kaj je CSS in zakaj se uporablja?

"CSS is like a fine woman ... it has class, style and all the right attributes!"

Stavek, ki sem ga nekoč, nekje zasledil. Podobno kot pri kruhu, kjer vsaka kuharica uporablja podobne sestavine, vendar je končni rezultat lahko zelo različen. Tako je tudi s CSS-om.

CSS je kratica in pomeni Cascading Style Sheets. V prevodu bi nekako pomenilo predloga, ki določajo kako bo izgledala spletna stran v brskalniku. Je poskus, da se izdelovalcem spletnih strani omogoči, ločevanje vsebine spletnih strani od dizajna. In ta poskus je v celoti uspel. Preboj CSS-a se je začel, ko se je pojavila potreba po lepših, boljših in predvsem zahtevnejših spletnih strani. CSS je vse to poenostavil. Medtem, ko je HTML, kot nekakšen vojak iz prve vrste, je CSS general iz ozadja, ki določa kako se bo ta vojak obnašal, katere vrste uniformo bo imel, s kakšnim orožjem bo oborožen. Kot že rečeno je ena od značilnosti CSS-a, da je dizajn spletnih strani ločen od kode, kar v praksi pomeni, da je tudi menjavanje izgleda spletne strani enostavnejše. Saj npr. z nekaj preprostimi ukazi zamenjamo celoten videz spletne strani.

Primer spodaj. Postavitev menijev je na vseh predlogah enaka, dimenzije spletne strani so enake, zamenja se samo barvna shema in strani dobijo popolnoma drug izgled. To nam omogoča CSS z enim ukazom, ki določa barvo menijev in ozadja.

Tudi tale blog npr. uporablja CSS. Uporaba CSS-a pa prihaja do izraza pravzaprav šele danes, ko imamo veliko število spletnih brskalnikov (Internet Explorer 6, IE7, IE8, IE9 v pripravi, Mozilla Firefox, Opera, Google Chrome ter še kakšen manjši), ki vsak malce drugače prikazujejo spletno stran in nam ravno CSS omogoča, da se za vsak brskalnik posebej napiše style sheet oz. predloga. Prav tako nam CSS omogoča, da spletno stran pravilno prikažejo tudi drugi prikazovalniki in ne samo spletni brskalniki. Danes pregledujemo spletne strani z različnimi pregledovalniki od raznih GSM mobilnih telefonov, iPod-ov, mini netbook-ov, raznih igralnih konzol in še kaj. Ker vsak tak medij spletne strani ponavadi prikazuje malce drugače, žal nekega enotnega standarda ni, oz. je samo na papirju, nam CSS omogoča, da so spletne strani v vsakem mediju prikazane pravilno. Pač za vsakega posebej se napiše svoj CSS.

Če smo začeli s kuharico, tudi končajmo z njo. Tudi kuharica vam ne bo izdala skrivnega recepta. Tako je tudi s CSS-om. Vsak je drugačen, ima neke svoje značilnosti in spet vsi težijo k temu, da spletno stran čimlepše in pravilneje prikazujejo. Učenje CSS-a je hkrati dokaj enostavno, saj ima za razliko od HTML-ja relativno malo ukazov, do 70. Tistih osnovnih, pa celo manj, nekje do 20.

Še ena zanimiva povezava čisto za konec. Tu lahko preverite, kako je izgledala vaša spletna stran pred leti in kako je samo kodiranje internet strani od takrat napredovalo Časovni Stroj.

CSS ukazi - Cascading Style Sheets Style Properties Library

A

• :after
  
• azimuth
  
  
  
• :active
  

B

• :before
  
• border-bottom-color
  
• border-bottom-style
  
• border-collapse
  
• border-left-color
  
• border-left-style
  
• border-right-color
  
• border-right-style
  
• border-spacing
  
• border-top-color
  
• border-top-style
  
• bottom
  
  
  
• background
  
• background-attachment
  
• background-color
  
• background-image
  
• background-position
  
• background-repeat
  
• border
  
• border-bottom
  
• border-bottom-width
  
• border-color
  
• border-left
  
• border-left-width
  
• border-right
  
• border-right-width
  
• border-style
  
• border-top
  
• border-top-width
  
• border-width
  

C

• caption-side
  
• clip
  
• content
  
• counter-increment
  
• counter-reset
  
• cue
  
• cue-after
  
• cue-before
  
• cursor
  
  
  
• clear
  
• color
  

D

• direction
  
  
  
• display
  

E

• elevation
  
• empty-cells
  

F

• :first-child
  
• :focus
  
• font-size-adjust
  
• font-stretch
  
  
  
• :first-letter
  
• :first-line
  
• float
  
• font
  
• font-family
  
• font-size
  
• font-style
  
• font-variant
  
• font-weight
  

H

• height
  
• :hover
  

L

• :lang
  
• left
  
  
  
• letter-spacing
  
• line-height
  
• :link
  
• list-style
  
• list-style-image
  
• list-style-position
  
• list-style-type
  

M

• max-height
  
• max-width
  
• min-height
  
• min-width
  
  
  
• margin
  
• margin-bottom
  
• margin-left
  
• margin-right
  
• margin-top
  

O

• orphans
  
• outline
  
• outline-color
  
• outline-style
  
• outline-width
  
• overflow
  

P

• page-break-after
  
• page-break-before
  
• page-break-inside
  
• pause-after
  
• pause-before
  
• pause
  
• pitch
  
• pitch-range
  
• play-during
  
• position
  
  
  
• padding
  
• padding-bottom
  
• padding-left
  
• padding-right
  
• padding-top
  

Q

• quotes
  

R

• richness
  
• right
  

S

• speak
  
• speak-header
  
• speak-numeral
  
• speak-punctuation
  
• speech-rate
  
• stress
  

T

• table-layout
  
• top
  
  
  
• text-align
  
• text-decoration
  
• text-indent
  
• text-transform
  

U

• unicode-bidi
  

V

• visibility
  
• voice-family
  
• volume
  
  
  
• vertical-align
  
• :visited
  

W

• widows
  
  
  
• white-space
  
• width
  
• word-spacing
  

Z

• z-index