Néhány alapvető információval jöttünk, ami segíthet azoknak akik életükben először szeretnének kódhoz nyúlni, az alapvető információkon túl, igyekszünk kitérni néhány hasznos tippre, és tanácsra is ami segíthet hogy könnyen megtanuljátok a CSS kód elsajátítását.

Egy CSS kód felépítése

A kódot meghívhatjuk egy külön file-ból is, de direkten be is szúrhatjuk az oldalunkba.
A következő képen jelezzük hogy egy kódsor CSS kód, egyszerűen a <style></style> elemek közé zárjuk.

A kódnak egyszerű de nagyon pontosan betartandó struktúrája van, a <style> tag-ek közt az alábbi formában írhatunk fel egy elemet, és annak tulajdonságait.

Elem {
Tulajdonság: érték;
Tulajdonság: érték;
Tulajdonság: érték;}

Elsősorban definiálnunk kell, nevén kell neveznünk az azt elemet amit formázni szeretnénk, ez lehet maga a HTML elem típusa is (pl: p-mint bekezdés, i-mint dőlt betűk, div – mint doboz), de akkor az összes olyan elemre vonatkozni fog, egyéb megszorításokat is figyelembe vehetünk, illetve egyedi azonosítóval is elláthatjuk az elemünket, de ezekről ebben a leírásban még nem ejtenék szót.

Fontos hogy az elemre vonatkozó tulajdonságok mindig kapcsoszárójelek ({}) közt vannak, közvetlenül az elem megnevezése után. A kapcsoszárójelekben az a felírt tulajdonságoknál kettősponttal(:) adjuk meg az értéket, minden érték-után és tulajdonság előtt pontosvesszővel(;) zárjuk a sort.
Nem formai követelmény hogy minden tulajdonság-érték páros külön sorban legyen, (de a saját érdeked hogy így írd fel), továbbá az sem követelmény hogy a záró kapcsoszárójel előtti érték után legyen pontosvessző, de a használata szintén a te dolgodat segíti. Bármelyik kihagyott írásjel, érvénytelenné teheti a kódot a hibás blokktól számítva.

Működése

Egy CSS kód mindig soronként fut le, így ha egy adott elemnél, ugyan azt a tulajdonságot többször felírod ( a kód akármelyik pontján), más értékkel, mindig a legutolsó lesz érvényes. Erre ezt az egyszerű példát mutatom:

Ebben az esetben a formázás úgy fog működni hogy Tulajdonság1:Érték2; lesz érvényben tehát olyan mintha Tuljadonság1: Érték1; ott sem lenne. Abban az esetben sem teljesül az Tuljadonság1: Érték1; hogyha esetleg a másik nem működne.

Törekedj arra hogy minden elemre csak a lehető legrövidebb és leg átláthatóbb kódot írd fel a szükséges formázáshoz, a saját dolgod könnyíted vele!

Közös formázás több elemnek

Legyen adott bekezdés1 és bekezdés2 akik totál ugyan olyanok, kivéve azt hogy az egyiknek kék, a másiknak piros a háttere. A továbbiakban is szeretnéd őket hasonló formában formázni egy-egy kicsi eltéréssel, és nem szeretnéd ugyan azt bemásolni mindkét elemhez. A CSS lehetőséget nyújt az elemek egyidejű formázásának, ilyenkor a közös tulajdonságokat megadhatjuk úgy egy blokkban hogy az elemnél minkettőt beírjuk és vesszővel(,) választjuk el. Majd az eltérő tulajdonságokat mindkét elemre külön-külön felírod:

Tisztább, átláthatóbb, és ha hasonlóan szeretnéd a továbbiakban formázni a két elemet, nem kell két helyen változtatnod a kódban. Természetesen nem csak két elemre írhatod fel, annyit sorolsz fel vesszővel amennyi jólesik.

Kommenteld a kódot!

Akár kezdőknek, akár már haladóknak sokat segíthet egy szépen bekommentelt kód is. Kommentelheted hogy az egyes tulajdonságok és értékek mit takarnak, illetve helyezhetsz el kommentet abból a célból is hogy melyik blokk mire vonatkozik. Ha nem kell egy blokk, de később még jól jöhet, akár azt is kommentbe rakhatod, így látod, e a kód nem fog működni.

A következő képpen helyezhetsz el kommentet egy CSS kódban:

Ez a kis összefoglaló pusztán arra szolgál hogy tudd mi fán terem a CSS kód, hogyan kell felépíteni, hogyan működik és mit érdemes szem előtt tartani, és mik az úgynevezett aranyszabályok.