Ce este css-ul ? – Introducere in CSS – Tutoriale css

Ce este CSS-ul?

Css-ul este un limbaj de stilizare al elementelor html, al tagurilor html. Denumirea CSS provine din expresia Cascading Style Sheets. In Web Design-ul modern, pentru stilizarea paginilor web se foloseste numai CSS. Acest lucru inseamna ca de la culoarea literelor si a backgroundului pana si la pozitionarea elementelor de pe o pagina web, totul este stilizat prin CSS. Stilurile folosite pe o pagina pot fi incorporate in pagina respectiva sau pot fi chemate din fisiere externe, fisiere css.

Introducere in CSS – Tutorial CSS

Pentru folosirea (css-ului), acestui limbaj de stilizare, neaparat trebuie sa cunoasteti limbajul html. Daca limbajul html nu va este familiar atunci va sfatuiesc sa urmati aceste tutoriale html.
Cum arata un stil CSS?

p {
font-family:Arial;
font-size:14px;
color:#003300;
}

Acest stil definit mai sus, rezulta intr-un stil care arata asa:
Acestui text a fost aplicat stilul de mai sus.

Unde definim stilurile CSS ?

Stilurile pentru o pagina pot fi definite in partea de Head a documentului html, pot fi definite intr-un fisier css extern, pe care putem chema tot din partea de head a paginii, sau putem aplica un stil diferit in partea Body a fisierului html, la fiecare tag html in parte.

Stil css definit in HEAD

Exemplu

<head>
<title>Stil definit in head</title>
<style type=”text/css”>
p {
font-family:Arial;
font-size:14px;
color:#003300;
}
</style>
</head>
<body>

Paragraf la care se va aplica stilul definit mai sus!

</body>

Dupa cum vedeti stilurile se definesc in partea head a documentului cu ajutorul tagurilor <style type=”text/css”> si </style>. In acest exemplu am definit cu css un stil pentru toate paragrafele din pagina respectiva, adaugand un stil la tagul <p>.
Haideti sa vedem cum am putea suprascrie in pagina un stil definit deja.

Stil css in partea BODY ( css inline )

In partea body a fisierului html, putem adauga un stil diferit la fiecare tag html, ba chiar putem si suprascrie un stil definit in partea head.
Exemplu

<body>
<p style=”font-family:Arial; color:#478600;font-size:14px;”>
Paragraf care a fost stilizat in interiorul tagului p! </p>

</body>

Reulta in:

Paragraf care a fost stilizat in interiorul tagului p!

In acest exemplu am folosit Css inline pentru a adauga un stil. Cu aceasta metoda putem adauga un stil cu css la orice tag html, si putem suprascrie stilul definit in partea head. Pentru a adauga un stil diferit fata de restul documentului, am folosit atributul style pentru a redefini, a adauga stilul respectiv. Parametri ca si in cazul stilurilor definite in head, sunt separate prin (;) punct si virgula.

Forma: tag-html style=”….” >

Definirea stilurilor cu un fisier extern

Pentru a tine toate stilurile intr-un fisier extern, tot ce trebuie sa facem, este sa definim stilurile intr-un fisier cu extensia css. exemplu: stiluri.css pe care putem invoca, chema din partea de head a documentului.
Exemplu:

<head>
<link rel=”stylesheet” href=”stiluri.css”/>
</head>

Esenta Css-ului
In ce consta puterea – Tutorial Css

Cu ajutorul stilurilor CSS putem sa stilizam situri intregi dintr-un singur fisier. Asta rezulta in mai put in cod, care va face paginile sa se incarce mai repede. Daca in viitor vrem sa facem o modificare pe site, nu va trebui sa editam fiecare pagina, articol in parte, ci vom modifica un singur fisier, fisierul css extern.
Css-ul ne da libertatea sa suprascriem un stil deja definit, pentru ca lucreaza cu o anumita ierarhie, adica:
1: – Prima data va fi luat in considerare stilul definit in fisierul extern, dupa care urmeaza 2: stilul definit in partea head, iar ultima data 3: cu css-ul inline, adica stilul definit intr-un tag html cu ajutorul atributului style putem suprascrie orice stil definit anterior.