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 (;)Exista trei tipuri principale de obiecte CSS: selector, clasa si identificator.
<!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>
<!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>
<!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>
Obiectele CSS, indiferent de tipul lor, au in componenta urmatoarele elemente:
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id { overflow: auto; }
document.getElementById("id").onmouseover = function(){ document.write("Sa ai Viata Buna"); }
if(isset($_GET["id"])) { echo $_GET["id"]; }
Marc is the boy who won the prize. - Marc e baiatul care a castigat premiul.
Voy a ver al pintor de quien les hablé ayer. - Ma duc sa vad pictorul despre care ti-am vorbit ieri.