În tutorialul CSS pentru începători am observat şi învăţat selectorii HTML - reprezentând practic tag-urile HTML. Dar şi tu îţi poţi creea în documentul CSS proprii tăi selectori, folosindu-te de CLASS şi ID. Avantajele ar fi că poţi avea acelaşi element HTML de mai multe ori, şi folosindu-te de selectoarele class şi id, vei putea să le diferenţiezi între ele.

În codul CSS un selector “class” este precedat de punct ( . ), iar selectorul ID este precedat de “diez” (#).

#top {

background-color: #ccc;

padding: 1em

}

.intro {

color: red;

font-weight: bold;

}

Legăturile de cod catre CSS,din documentul HTML, ar putea arăta aşa :

<div id=“top“>

<h1>Chocolate curry</h1>

<p class=“intro“>Asta este replica mea atunci când gust biscuiţi de casă, cu ciocolată!</p>

<p class=“intro“>Mmm mm mmmmm</p>

</div>

Diferenţa dintre selectorul ID si CLASS e următoare : selectorul ID poate fi folosit pentru un singur element, pe când selectorul CLASS poate fi folosit pentru mai multe elemente.

Mai poţi face o mică şmecherie, de exemplu pentru un anume tag din codul HTML poţi să îi dai proprietăţile unui selector, iar în codul CSS asta ar fi scrisă “p.jump { valorile }” , in cazul ăsta tag-ul “p” va avea selectorul “jump” cu proprietăţile descrise.