CSS Tip Nr. 1. Resetarea stilurilor cu CSS Reset

Aceasta este prima parte din seria de articole mentionate in postarea precedenta, in care voi vorbi despre sfaturi si practici in CSS care va vor ajuta la optimizarea lucrului.
Astazi, o sa ating tema resetarii stilurilor CSS. Resetarea stilurilor CSS, denumit in mod obisnuit CSS Reset sau Reset CSS  este procesul de resetare, sau mai bine zis de setare a stilurilor elementelor la o valoare initiala astfel incit sa evitam valorile implicite care le pun browserele HTML elementelor.
CSS Reset evita neconcordantele dintre browsere
De exemplu, folosim o ancora <a> in HTML document. De obicei browserele cum ar fi Firefox sau Internet Explorer afiseaza aceste ancore cu culoare albastra si subliniate. Dar, in urma cu citiva ani cineva crease un browser,nu le-a placut modul traditional de afisare a linkurilor asa ca au fcut ca ancorele sa fie de culoare rosie si fontul: bold. Daca vom folosi tehnica CSS Reset si vom alege noi valorile initiale a elementelor vom evita in asa mod surprizele neplacute pe care ni le ofera browserele prin afisarea unor linkuri de culoare rosie si fontul bold :)
Un simplu exemplu:
Cum sunt afisate paragrafele: <p> in browsere. Am plasat intr-un container div trei pargrafe carora nu le-am setat nici un stil CSS, doar containerului iam setat backgroung si border astfel ca sa fie evidentiat mai bine diferentele, priviti in imagine neconcordantele dintre 2 browsere:

Implicit, in Firefox este setat un spatiu intre primul rind al paragrafului si container. In Internet Explorer acest spatiu lipseste!
Deci, apare intrebarea: care browser afiseaza mai corect? Raspunsul: NU Conteaza! Conteaza doar faptul ca in dependenta de browser, daca nu folosim CSS Reset, pagina se va afisa in mod diferit si astfel nu mai avem cross browsing pentru pagina data. Normal, ca exemplul cu paragrafele este unul trivial, in realitate astfel de cazuri sunt mult mai multe, padding, margin, line-height si alte atribute sunt cauza pentru care pagina arata diferit de la browser la browser.

CSS reset, de unde a inceput...
Conceptul de CSS Reset a fost prima data pomenit cu mult timp in urma(pe cind inca dinozaurii traiau in Internet) de catre Andrew Krespanis intr-un articol de-al sau in care sugera de a utiliza un CSS selector universal la inceputul fisierului de stiluri pentru a selecta toate elementele si de a le atribui margin, padding: 0.
Cam asa ceva:

* {
  margin: 0;
  padding: 0;
} 

Selectorul universal (*) actioneaza ca un model, ca o expresie regulata in programare.
Astfel incit * nu este precedat de alt selector, toate margin si padding le sunt atribuite valoarea 0. Aplicind acest selector cu valorile salede mai pentru exemplul cu paragraful, o sa obtinem lichidarea spatiului dintre conatiner si paragraf.
Odata ce am scapat de spatiile neconsistente, putem sa trecem la stilizarea paragrafelor(ca sa nu ne departam de exemplu) asa cum dorim:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; } 

La scurt timp dupa Andrew Krespanis, un alt guru CSS, Eric Meyer a continuat dezvoltarea conceptului de CSS Reset pentru margins si paddings, pentru ca mai apoi sa cuprinda si line-height, font styles si list styles
Sfaturi pentru aplicarea CSS Reset
1. Incepeti prin a va decide cum, si stilurile caror elemente anume au nevoie de a fi resetate.
2. CSS Reset trebuie sa fie primul lucru pe care browserul trebuie "sa-l vada".
3. Creati un fisier CSS aparte pentru CSS Reset.
4. Evitati pe cit posibil utilizarea selectorului universal
5. Evitati redundanta stilurilor din CSS Reset si celelalte stiluri.

CSS Relative position

CSS Relative positioning  este relativ, usor de inteles :) . Daca pozitionam, relativ, un HTML element el va sta exact acolo unde-l punem. Putem atunci sa impingem relativ elementul setind punctului de start pozitia pe vertical si pe orizontal. Daca o sa setam top pozitia sa fie de 20px, atunci HTML Elementul se va pozitiona cu 20px sub pozitia initiala, setind pozitia left cu 20px, atunci elementul se va muta ai la dreapta creind un spatiu de 20px fata de pozitia de inceput. Iata si CSS exemplul:
#myBox {
  position: relative;
  left: 20px;
  top: 20px;
}

CSS Box model

Box model este o piatra de temelie a tehnologiei CSS si dicteaza cum trebuie sa fie dispuse elementele, si, intr-o anumita masura cum trebuie sa interactioneze aceste elemente intre ele. Fiecare element in pagina este considerat ca o cutie dreptunghiulara formata din continutul elementului, padding, border, si margin.

Padding este aplicat in jurul suprafetei cu continut. Daca adaugam un background unui element atunci backgroundul va fi aplicat suprafetei compusa din continut si padding. In acest mod, padding este folosit deseori pentru a crea un cadru in jurul continutului. Adaugind border unui element inseamna a aplica o linie in afara suprafetei cu cintinut si padding. Aceste linie sunt de diferite stiluri: solid, dotted, dashed.
In afara border se afla suprafata creata de margin. Margin sunt transparente si nu pot fi vazute, in general sunt folosite pentru a manipula spatiile dintre elemente.