Codurile CSS pot fi scrise in interiorul paginii sau intr-un fisier extern cu extensia".css".
Codul CSS, ca forma generala, este alcatuit din: obiectul care va fi formatat. proprietatile acestuia si valoarea (sau atributele) fiecarei proprietati.
Cand este adaugat in documentul HTML, trebuie scris in cadrul unui tag <style> in sectiunea HEAD a documentului HTML, dupa cum se vede in formula generala de mai jos;

<html>
<head>
<title>Titlul</title>

<style>
.element {
 proprietate:valoare;
 alta_proprietate:valoare;
}
</style>
</head>
<body>
... Continut ...
</body>
</html>
- Observati sintaxa codului CSS. Perechile proprietate:valoare se scriu intre acoladele selector-ului CSS pe care-l definesc (aici .element), intre "proprietate" si "valoare" trebuie sa fie un caracter doua-puncte (:) iar la sfarsitul perechii se adauga un caracter punct-si-virgula (;)
- Cand este adaugat intr-un fisier extern ".css", codul CSS se scrie la fel, dar nu se mai adauga tag-ul <style>.

Obiectele (regulile) CSS

Exista trei tipuri principale de obiecte CSS: selector, clasa si identificator.

Selectorul HTML

Selectorul HTML se foloseste pentru a redefini modul de afisare a continutului etichetei HTML.
Un selector HTML reprezinta tipul etichetei HTML, numele tag-ului.
Definirea unui selector HTML in CSS are ca rezultat redefinirea stilului acelui tag HTML.
Iata un exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
p {
color:#0088fe;
font-size:16px;
}
</style>
</head>
<body>
<p>Un text oarecare in paragraf.</p>
<p>Alt paragraf. Tutorial css.</p>
</body>
</html>
- Aici selectorul este "p" (paragraf).

Clasa

Clasa este un obiect care poate fi aplicat oricarei etichete HTML.
O clasa trebuie creata in interiorul etichetei HTML inainte de a fi definita intr-un cod CSS. Crearea clasei in interiorul etichetei se face simplu, prin specificarea cuvantului class si numele clasei, ca in exemplu de mai jos:
<h3 class="nume_clasa"> Text </h3>
- "nume_clasa", poate fi orice nume dorim.
- Apoi in interiorul codului CSS, clasa trebuie definita prin adaugarea unui caracter punct (.) inaintea numelui clasei:
.nume_clasa { color:#0088fe; font-size:18px; }
Numele aceleasi clase poate fi atribuit mai multor etichete HTML din aceeasi pagina, si toate vor prelua acelasi stil css.
- Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
.cls_red {
color:#ee0000;
font-size:16px;
}
</style>
</head>
<body>
<p class='cls_red'>Un text oarecare in paragraf cu clasa 'cls_red'.</p>
<p>Alt paragraf, fara class.</p>
<div class='cls_red'>Un Div cu aceeasi clasa: cls_red.</div>
</body>
</html>

Identificator

Identificatorul (ID) este asemanator cu clasa. Poate fi aplicat oricarei etichete HTML, dar spre deosebire de clase, numele unui ID trebuie sa fie unic (dat unei singure etichete HTML dintr-o pagina), pentru alta eticheta se adauga un ID cu alt nume, diferit.
Ca si clasa, ID-ul trebuie intai creat in interiorul etichetei HTML. Modul de creare este simplu, prin specificarea cuvantului id si numele, ca in exemplu de mai jos:
<div id="nume_id"> Text </div>
- "nume_id", poate fi orice nume dorim.
In interiorul codului CSS, identificatorul este definit prin adaugarea unui caracter diez (#) inaintea numelui:
#nume_id { color:blue; font-size:1px; }

- Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlul</title>
<style>
#dv_id {
color:#1234ee;
text-align:center;
}
</style>
</head>
<body>
<div id='dv_id'>Div cu ID: dv_id.</div>
<div>Alt Div, fara ID.</div>
</body>
</html>

Componentele unui obiect CSS

Obiectele CSS, indiferent de tipul lor, au in componenta urmatoarele elemente:

Sintaxa generala a unei reguli CSS este urmatoarea: Proprietatile si valorile constituie definitia elementului CSS. Acestea sunt perechi (nume:valoare;), despartite de caracterul doua puncte ":", si terminate cu un caracter punct si virgula ";".

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Scriere cod CSS

Last accessed pages

  1. Verbe modale - SHALL, SHOULD, OUGHT TO, WILL, WOULD, USED TO, BE TO, DARE (15262)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (57687)
  3. Adjectivul in limba engleza - The adjective (11305)
  4. Sufixele -ful, -less si -ness - ful, less and ness suffixes (6229)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (43183)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3071)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2753)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (2654)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (2441)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1981)