CSS este un standard pentru formatarea elementelor unui document. Avantajele folosirii sunt definirea stilurilor de prezentare intr-un singur loc, modificare foarte usoara si pozitionarea continutului cu mare precizie.

Comentariile in CSS se scriu intre /* si */
/* acesta este un comentariu CSS */

Ca sa introducem cod CSS in pagina, avem doua solutii:
1. direct in sectiunea <head></head> a paginii, adaugand:
<style type="text/css">
/* aici se scrie codul CSS */
</style>

2. apeland un fisier extern, tot in sectiunea <head></head> a paginii:
<link rel="stylesheet" href="adresa fisierului *.css" type="text/css" />

Sintaxa CSS este formata din trei parti: un selector, o proprietate si o valoare.
selector {proprietate: valoare}

Selectorul poate fi:

1. un tag
Cand selectorul e un tag, vom scrie direct numele tagului, astfel:
body {color: blue} /* va face textul din pagina albastru*/
p{text-align:center;
color:red;
} /* in toate paragrafele din pagina (deci oriunde va gasi tagul p) va alinia textul la centru si il va face rosu */

2. o clasa
Putem grupa mai multe elemente intr-o clasa, pentru a le da aceleasi proprietati. Ca sa marcam faptul ca acele elemente apartin unei clase, vom adauga in taguri atributul class:
<p class="textAlbastru">....</p>
<h2 class="textAlbastru">...</h2>
<input type="text" class="textAlbastru"/>
In css vom scrie clasa cu punct inaintea numelui, deci:
.textAlbastru{
color:blue;
}

3. un id
ID-ul este unic, iar atunci cand selectorul va fi un id, inseamna ca aplicam un anume stil unui singur element de pe pagina.
<h1 id="titluRosu">...</h1>
In css, id-ul il vom nota cu diez (#) inaintea numelui. Vom avea:
#titluRosu{
color:red;
}
Celelalte elemente h1 de pe pagina nu vor avea textul rosu.

Selectorii se pot grupa cu virgula :
h1,h2,h3,h4,h5,h6 { color: green }

Pseudoselectorii sunt selectori speciali care se aplica anumitor elemente, se exemplu linkurile:
A:link {color:blue;}
A:hover {color:red;}

In plus, putem sa adaugam stiluri CSS si in codul HTML, direct in declaratia tagurilor, folosind atributul style:
<div style='font-size:10px;color:red;'>….</div> <!—declaratie inline-->

Stiluri utilizate cel mai des:

Font & Text

font-family: tip font;
font-size: dimensiune font;
font-style: italic, normal, oblique;
font-weight: bold, bolder, normal;
text-align: left, right, center, justify;
text -decoration: underline, overline, line-through;

Border

border-color: /*setam culoarea, fie cu denumire, fie cu cod*/;
border-style:none,solid, dotted, dashed;
border-top-color
border-top-style
border-bottom-color
border-bottom-style
border-left-color
border-left-style
border-right-color
border-right-style
Sau, pur si simplu:
border: dimensiune tip culoare;
border: 1px solid black;

Proprietati diverse

width: -auto sau definit de utilizator
height:-auto sau definit de utilizator
float: -left, right, none
clear: -all, both, left, right, none
position:-absolute, fixed, relative, static
cursor: – hand, crosshair

Margin & Padding

margin-bottom
margin-left
margin-right
margin-top
margin: top right bottom left;
margin: 5px 3px 5px 3px; padding-bottom
padding -left
padding -right
padding -top
padding: top right bottom left;
padding: 10px 5px 8 px 5 px;

Background

background-color
background-image: url(“cale imagine”)
background-position
background-repeat: repeat-x, repeat-y, no-repeat, repeat

Exercitii

1. Pagina va avea fundalul verde, textul galben, de dimensiune 12px, fontul va fi Arial
body{
background-color:green;
color:yellow;
font-size:12px;
font-family:Arial;
}

2. Textul din headinguri va fi subliniat, bold si italic
h1, h2, h3, h4, h5{
text-decoration:underline;
font-weight:bold;
font-style:italic;
}

3. Pe fundalul paginii se va vedea o imagine care va fi centrata orizontal si vertical
body{
background-image:url(adresapoza.jpg);
background-repeat:no-repeat;
background-position:middle center;
}

4. Pe pagina sunt 5 tabele. Doar pentru unul dintre ele, care are id-ul TabelSpecial, toate celulele vor avea border roz, dublu, de 2 pixeli
#TabelSpecial td { /* se refera la toate tagurile td care se gasesc in tabelul cu id-ul TabelSpecial*/
border:2px double pink;
}

5. Linkurile nu vor fi subliniate si vor fi scrise cu rosu. Cand se va trece cu mouseul peste ele, culoarea de fundal a linkului va fi rosie, iar textul galben. Distanta de la text la marginile linkului va fi, in toate partile, de 10 px
a{
text-decoration:none;
color:red;
padding:10px; /*10 px in toate partile distanta de la text la marginile imaginare ale linkului*/
}
a:hover{/* cand trecem cu mouseul peste link */
color:yellow;
background-color:red;
} /*nu mai punem alte proprietati, deci le mosteneste pe cele definite mai sus, la a */

6. Vom face un div care va avea o imagine de dimensiune 600px x 10px, care se repeta pe verticala
<div style="background-image:url(imagini/imagine.png); background-repeat:repeat-y;">...</div>

Tema

1. un fisier care se numeste cv.html si in care faceti CV-ul propriu
2. un  fisier stil.css in care aplicati stiluri pentru cv.html
3. pozele referite in CV

CV-ul va avea un bacground: o imagine degrade, care se repeta pe orizontala, va fi scris cu gri inchis, cu font de 10, Verdana. Paragrafele vor avea distanta de la text la conturul imaginar de 10px. Se va face un link de trimitere email pe adresa de email. Linkul va fi verde si fara subliniere, iar la trecerea mouseului peste, va fi rosu si subliniat.

4. stilizati formularul din tema trecuta, astfel incat casutele de text vor avea background gri deschis, textul va fi albastru si fontul va fi Comics.