Elementele id si class
id si
class sunt comenzi care dau unei formatari un nume. Se folosesc atunci cand dorim sa aplicam un style de formatare unei anume zone.
Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasandu-se un
nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.
Exemplu folosind ID:
HTML Code:
<html>
<head>
<title>Exemplu folosind ID</title>
<style type="text/css">
<!-- #albastru{color: #0000FF;}-->
</style>
</head>
<body>
<p id="albastru">Text albastru</p>
Elementul class se similar cu
id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la
id necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern.
HTML Code:
<html>
<head>
<title>Exemplu folosing class</title>
<style type="text/css">
<!-- .rosu{color: #FF0000;}-->
</style>
</head>
<body>
<p class="rosu">Text rosu</p>
</body>
</html>
Fonturi in CSS
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in care le recunoaste. Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre ghilimele duble pentru ca browserul sa le interpreteze impreuna.
HTML Code:
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!-- p{font-family: font1,font2,arial;}-->
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
<p>Text scris cu cu fontul Arial</p>
</body>
</html>
Acelasi exemplu dar CSS introdus in eticheta
p din HTML
HTML Code:
<html>
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
Text negru
<p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
</body>
</html>
font-size este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau procente.
HTML Code:
<html>
<head>
<title>Exemplu</title>
<style type="text/css">
<!-- p{font-size: 20px;}-->
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
</body>
</html>
Dimensiunea exprimata prin
keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.
CSS keywordnumar FONT size xx-small1 x-small2 small3 medium4 large5 x-large6 xx-large7
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.
HTML Code:
<style type="text/css">
<!-- p{font-style: italic;}-->
</style>
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
HTML Code:
<style type="text/css">
<!-- p{font-weight: 700;}-->
</style>
Tutorial CSS
Linear Mode
