Az alábbiakban 5+1 olyan CSS kódot sorolunk fel, amely megkönnyítheti a CSS használatának elkezdését. Nem ezek a kódok felelnek a legfontosabb és legbonyolultabb dolgokért, de gyakran használatosak, és rávezetnek a későbbi, összetettebb CSS-ek működésére.
1.padding
A padding, azaz kitöltés arra szolgál, hogy több vagy kevesebb hely maradjon egy szöveg vagy alakzat mellett. Pixellel jelöljük a kívánt tér nagyságát, és bármelyik irányba használhatjuk:
{padding-left: 5px;}
{padding-right: 5px;}
{padding-bottom: 5px;}
{padding-top: 5px}
2. display
A display-el érhetjük el, hogy egy nem kívánt elem eltűnjön. Ez elég gyakran előjön, ezért hasznos tudni róla már a kezdetektől:
{display: none}
Ha viszont szükséges, hogy az elem helye megmaradjon üresen, akkor a {visibility: hidden} kódot kell használnunk.
3. width – height
A width és a height, azaz a szélesség és magasság értelemszerűen gyakran hasznosak, hozzátehetjük őket a különböző állítandó elemekhez. Pl.: line-height. A line-heighttal a sorközt tudjuk állítani, ami többször szükséges, mint gondolnánk, a weboldal megjelenését nagy mértékben formálja ez az apróságnak tűnő elem. Szintén pixelben adjuk meg:
{line-height: 5px}
Megadhatjuk a minimum és maximum értéket is, pl: {max-width: 500px}
4. font
A font a szöveg és a betűk beállításaira vonatkozik, a parancsot specifikálnunk kell, hogy értéket adhassunk meg, pl. betűnagyság:
{font-size: large}, vagy betűvastagság: {font-weight: bold}
5. background
Ami már egy nagyobb területet befolyásoló parancs, az a background, ugyanis CSS-sel beállíthatjuk, hogy milyen szín vagy kép legyen a háttér, hogyan helyezkedjen el és ismétlődjön.
{background-color: transparent}
+1. !important
Ha valamihez hiába írunk be kódot, nem akar működni, általánosságban segíthet a dolgon, ha odaírjuk utána az !important kódot, hogy biztosan felülírjuk az eredeti beállításokat. Pl:
{cursor: pointer !important}
Reméljük, segíthettünk ezzel az összefoglalóval, hogy könnyebben induljon a CSS-használat.