CSS -> Bevezetés a CSS alapjaiba

A HTML kevés lehetőséget az oldalak formázására, tulajdonságaik beállítására.
Ezért bevezették a CSS-t (cascading style sheets - egymásba ágyazott stíluslapok), amely a HTML-t hivatott kiegészíteni.
A CSS nagymértékben megkönnyíti, és gyorsabbá teszi munkánkat, mivel elég csak az oldalainkhoz tartozó stíluslapot módosítani.
Míg HTML-ben például egy száz soros szöveg minden mondatának kezdőbetűjét zöldre akarjuk színezni, akkor az összes ilyen helyrebe kellene írnunk a megfelelő kódot, ami elég sokáig tartana. Ugyanezt CSS-ben elérhetjük pár másodperc alatt.

1. A stíluslapok csatolása

A stíluslapot használhatjuk egy adott csoportra, egy elemre vagy akár egy adott részletre is.
Ha külön file-ba tesszük a CSS-t (amit ajánlok) és ezt a file-t importáljuk, elég csak a HTML
</head> tag-je elé beírnunk:

Megadhatjuk másképp is az oldalhoz kötődő stíluslapot:

De lehetőségünk van az oldalba is elhelyezni a kódot:

Ha külön stíluslapot használunk, akkor annak legyen .css a kiterjesztése. Ezt megírhatjuk egy egyszerű szövegszerkesztőben is, amit később átnevezünk. Ha módosításra kerül a sor, nem kell megnyitni, belejavítani a HTML forrásába, elég csak CSS file-t módosítani.

2. Szinatkszisa

Vegyünk egy egyszerű példát a könnyebb megértés kedvéért:
Előbb nézzük meg a CSS-t:

Az ehhez tartozó HTML:


Ez esetben a szöveg minden betűje zöld lesz, a "kiemelés" szöveg pedig kék.
Az első kapcsos zárójel előtti rész neve szelekor, amivel megadhatjuk, hogy az oldal mely részére vonatkozzon a megadott tulajdonság. A szelektor tartalmazhat HTML elemet, osztályt, azonosítót, illetve látszólagos elemet is.
Vegyük őket külön, részletesebben:
Osztály:
Az osztály nevét "." vezeti be, amint az látható volt a fenti példában is. Attribútuma CLASS=" ".
Azonosító:
Az azonosítót egy "#" vezeti be, attribútuma az ID=" ".
Figyeljünk arra, hogy az azonosítók egyediek tehát csakis egyszer használhatók.
Ide tartozó CSS kód:


... és a HTML:

Elemek:
A HTML tag-jei szerepelhetnek. Ha egyszerre több tag-nek is akarunk tulajdonságot adni, elég csak a tag-eket egymás után írnunk.
A kapcsos zárójelben lévő rész neve deklaráció, ami megmutatja, milyen tulajdonságokat/értékeket állítottunk be.
Ebben megadhatunk több tulajdonságot is ";" elválasztva.

Még valami: hogy átláthatóbbá és később egyszerűbbé tegyük munkánkat, érdemes megjegyzéseket használni.
Szintakszisa:

3. Látszólagos elemek (pszeudo-osztály):

Ezek az elemek nem jelennek meg a HTML forrásában, de segítségükkel még több formázási lehetőséget érhetünk el, több mindennek adhatunk tulajdonságot. Például A HTML forrásában nincs benne, sem kiemelve a bekezdés első betűje, de ezt elérhetjük, ha veszünk egy peszeudo-osztályt, amivel már tulajdonságot adhatunk neki. Igaz ez a HTML forrásában nem jelenik meg külön.

Itt a bekezdés első betűjét módosítottuk. Ez hasznos lehet például iniciálé létrehozásához.
Most nézzünk meg néhány fontosabb pszeudo-osztályt:

A példa a "lat" azonosítójú elemcsoport első sorát módosítja

A linkek tulajdonságait változtatja meg attól függően, hogy a felhasználó
1. még nem használta
2. ez egér fölötte van.
Természetesen használható még a visited illetve az active látszólagos elem is.

4. Öröklődés

A CSS-ben is minden elemnek van egy szülőeleme, tehát minden elem kapcsolódik egymáshoz és ennek az elemnek lehet több gyereke is.
Például, ha a BODY elemben zöld betűszínt adunk meg, akkor az oldalon minden elem,, amely örököli ezt a beállítást, zöld színű lesz vagy, ha 18-as betűméretet adtunk meg, akkor minden betű ezt a méretet veszi fel.

Utoljára

Bővebb információt, illetve a teljes angol nyelvű CSS referenciát a W3C oldalán érheted el.