A stíluslapok már 1990 óta jelen vannak valamilyen formában. A böngészők a stílus módosítására létrehozták saját leírónyelvüket, amelyet a webes dokumentumok megjelenésének módosítására lehetett használni. Eredetileg a stíluslapokat a felhasználók használták, mivel a HTML korai verziói még csak kevés prezentációs lehetőséget tartalmaztak. A fejlesztői igények folyamatosan növekedtek a stilisztikai lehetőségek irányába, így a HTML nyelvbe is egyre több stilisztikai elem került. A CSS eredetileg Håkon Wium Lie ötlete volt 1994-ben. Bert Bos időközben egy Argo nevű böngészőn dolgozott, amely saját stíluslapokat használt; végül ők ketten döntöttek a CSS kifejlesztése mellett.
Ekkoriban több stílusleírónyelv is létezett, de a CSS volt az első, ami a kapcsolás ötletét használta fel, vagyis a dokumentum stílusa több különböző stíluslapból tevődhetett össze. Ezáltal lehetőség nyílt arra, hogy a felhasználó által megadott stílus bizonyos esetekben felülírja a szerző stílusát.
Az 1990-es évek közepén alakult meg a Word Wide Web Consortium is, amely később fellépett a CSS érdekében, és létrehozott egy bizottságot a CSS részletes kidolgozására. 1996 decemberében hivatalosan is megjelent a CSS level 1 ajánlása. A CSS Level 2, mint hivatalos ajánlat, 1998 májusában jelent meg, a CSS 3 még fejlesztés alatt áll.
Közelebb a CSS-hez
A CSS bevezetésével elkülönítették a dokumentumok struktúráját a megjelenéstől, így a weblapok használhatóbbak, kezelhetőbbek, egyszerűbbek lettek, ugyanis a CSS használatával a kódból eltűntek egyebek között a karakterformázó tag-ek.
A CSS ugyancsak alkalmas arra, hogy a dokumentum stílusát a megjelenítési módszer függvényében adja meg, így elkülöníthető a dokumentum formája a képernyőn, a nyomtatási lapon, a hangos böngészőben (amely beszédszintetizátor segítségével olvassa fel a weblapok szövegét), vagy braille készüléken megjelenítve.
A CSS szintaxisa egyszerű, csak néhány angol nyelvű kulcsszót használ a stílusok tulajdonságaihoz. A stíluslap maga a stílust leíró szabályok sora. Minden szabályhoz tartozik egy szelektor és egy deklarációs szakasz. Ez utóbbi kapcsos zárójelek között, pontosvesszővel elválasztott deklarációkat tartalmaz. A deklarációk formája a következő: a tulajdonság neve, egy kettőspont, majd az adott tulajdonság értéke.
Ha például piros színűre akarjuk színezni az szöveget, akkor:
color:red;
Az elemek stílusát különböző CSS szelektorokkal lehet kiválasztani:
* szelektor:
* {
padding: 0px;
margin: 0px;
}
Minden elem margin és padding értékét nullára állítja.
Az elem neve alapján:
p {
font-size:12px;
font-family:’courier new’;
color:red;
}
Ez ezt eredményezi:
Vagyis az a szöveg, amit a tag-ek közé írunk piros lesz, 12 pixeles betűmérettel, valamint Courier New betűtípussal.
Leszármazottak alapján
Előfordul olyan eset, amikor egy felsorolásban nem minden elemre kell linket tennünk, de azoknak különbözniük kell a felsorolás többi elemének színétől stb.
Nézzük a CSS-t:
li {
font-size:12px;
font-family:'courier new';
color:red;
}
li a:link, li a:visited{
font-size:12px;
font-family:'courier new';
color:blue;
text-decoration:none;
}
li a:hover{
font-size:12px;
font-family:'courier new';
color:blue;
text-decoration:underline;
}
Html:
Eredmény:
Class vagy id attribútumok alapján
Használjuk itt is a már előbb említett felsorolást. Most nem helyezünk el linket, hanem id és class attribútumokkal színezzünk:
Css kód:
li {
font-size:12px;
font-family:'courier new';
color:red;
}
. class{
font-size:12px;
font-family:'courier new';
color:blue;
}
#id{
font-size:12px;
font-family:'courier new';
color:black;
}
Html kód:
- normál lista elem
- id
- class
Eredmény:
Az id-kat ’#’ prefix-szel a class-okat pedig ’.’ prefix-szel látjuk el CSS-ben.
Hogyan kapcsolható a CSS a dokumentumhoz? Többféleképpen.
Első, amikor magába a dokumentum fejlécébe ágyazzuk be:
Figyelem: ilyenkor a CSS-t tag-ek közé kell tennünk.
Külső CSS fájlra hivatkozunk a dokumentumból
Ilyenkor a CSS fájlban nem kell a tartalmat tag közé tenni.
Inline-style-t használunk
Példa:
Ez a szöveg piros
