Cuprins

Lecția 3: CSS

Sintaxa CSS

Scurta introducere

Înainte să începem, haideți să dăm o mică definiție ( nu ca la școală :) ) pentru CSS și să vedem la ce ne este folositor.

CSS ( prescurtarea de la Cascading Style Sheets ) este un limbaj folosit în paralel cu HTML pentru a separa contentul de pe o pagină, de designul acesteia. Putem defini mărimea fontului folosit, ce background vom avea, ce dimensiuni au imaginile, etc.

Pe scurt, CSS decide cum este afișat contentul HTML.

Avem 3 modalități prin care putem aplica CSS într-un document:

* Internal ( când definim style-ul paginii, în <head> ) 

<head>
  <style>
    p {
      color:sienna;
      margin-left:20px;
    }
  </style>
</head> 
<body>
  <p> This is a paragraph </p>
</body>

2. Sintaxa CSS

Sintaxa CSS este, de fapt, un set de reguli de tipul selector { proprietate: valoare; } ce definește cum trebuie sa arate o pagină HTML.

Notă: Adăugarea tagului <style> este în scop demonstrativ pentru că intepretorul din această pagină să știe că este vorba de atribute CSS. Pe Codepen, voi nu va trebui să faceți asta.

Să luăm ca exemplu, următoarea sintaxă: 

<style>
p {
  color: sienna;
  border: 1px dotted #000;
}
</style>

Selectorul, în cazul nostru va fi p. Acesta specifică asupra cărui tag HTML se vor aplica proprietățile din interiorul acoladelor {}. Tagul „p“ se referă, în HTML, la un paragraf. Deci, pentru toate paragrafele din pagina noastra, culoarea va fi sienna, cu border negru, punctat și de 1 pixel dimensiune.

Să vedem un exemplu în Codepen.

Atenție!!! Codepen ne permite să scriem elemente de HTML, CSS și JS separat, interpretând totul automat. Chiar dacă aplicarea CSS-ului este External, nu mai trebuie să includem noi nimic în document.

See the Pen mjabC by Digital Kids (@digitalkids) on CodePen.

Observați faptul că doar culorile textului din paragraf sunt afectate, iar cele din afară nu.

Schimbați culoarea astfel încât textul să fie albastru.

CSS mai permite și enumerarea mai mult taguri HTML, pentru aceeași listă de proprietăți: 

<style>
h1, h2 {
  color: green;
}
</style>

Cum interpretați codul de mai sus? Introduceți în codepen-ul de mai sus selectorii h1, h2 urmați de proprietățile lor. Folosiți în block-ul HTML următorul cod: 

<h1> Acesta este un text mare </h1>
<h2> Acesta este un text mai micuț </h2>

Proprietăți de bază

Pentru alinierea textului vom folosi text-align. Pentru a schimba dimensiunea textului putem folosi font-size: dimensiune px. Pentru a schimba culoarea fontului, vom folosi color: culoare.

Urmăriți exemplul de mai jos ! Interpretați codul CSS scris împreună cu trainerii.

See the Pen FmlJq by Digital Kids (@digitalkids) on CodePen.

Clase de atribute

Pentru a nu fi nevoiți să modificăm fiecare tag în parte, CSS permite crearea de clase cu nume sugestive pentru a modifica mai ușor anumite zone dintr-o pagină HTML.

Putem, deasemenea defini proprietăți pentru diferite tag-uri HTML, în funcție de cerințe. De exemplu, vreau ca tag-ul <p> din primul exemplu să aibe o dată proprietatea border dar următoarea dată când îl apelez să nu-l aibă. Putem defini astfel o clasă:

O clasă în CSS începe cu un punct (.) ! 

<style>
.dotted-border {
  color: blue;
  border: 1px dotted #000000;
}
</style>

Apelarea se va face în felul următor: 

<p class="dotted-border"> Text cu margine punctată </p>

Astfel, îi spunem tagului <p> să „încarce“ proprietățile din clasa dotted-border.

Să vedem primul exemplu, ușor modificat:

See the Pen giAso by Digital Kids (@digitalkids) on CodePen.

După cum puteți observa, textul din al doilea paragraf nu este afectat, chiar dacă este tot definit de un tag <p>.

Id-uri de atribuire

Chiar dacă CSS permite modificarea anumitor tag-uri, elemente, bucăți de pagină utilizând clase a fost necesară și introducerea de Id-uri de atribuire. Acestea sunt proprietăți unice, ce pot fi folosite o singură dată într-o pagină HTML, făcându-le ideale pentru un meniu de navigare, de exemplu.

Dacă clasele în HTML sunt definite începând cu ., Id-urile vor începe cu diez (#). Putem defini un Id în HTML în felul următor: 

<style>
#dotted-border {
  color: blue;
  border: 1px dotted #000000;
}
</style>

Pentru apelare în pagina HTML: 

<p id="dotted-border"> Text </p>

Creați pe Codepen un text care să se folosească de id-ul declarat anterior în CSS. Definiți voi toate elementele.

Remember:

Folosind tot ceea ce am învățat până acum, haideti să creăm o clasă dreapta ce va avea următoarele proprietăți:

1. Definirea numelui clasei ( și a clasei implicit ): 

.dreapta {}

Pentru definirea poziției în pagină nu vom mai folosi align, ci o proprietate „specială“ numită float. După cum spune și numele, aceasta proprietate va face elementele să „plutească“ într-o direcție anume. Mai multe detalii, în lecția următoare când vom aprofunda elementele de CSS.

2. Alinierea, colorarea și re-dimensionarea clasei: 

.dreapta {
  float: right;
  width: 420px;
  background-color: #b0e0e6;
}

Exemplul de mai sus, pe codepen:

See the Pen ezHAI by Digital Kids (@digitalkids) on CodePen.

Înlănțuire de clase și id-uri

CSS ne oferă și mai multă flexibilitate, în sensul că putem să folosim aproape orice combinație de selectori.

În codepen-ul de mai jos sunt prezentate câteva astfel de combinații, iar în exerciții va trebui să folosiți și să descoperiți și voi alte combinații. Citiți cu atenție comentariile.

See the Pen nohgF by Digital Kids (@digitalkids) on CodePen.

Task

Luați o pagină HTML (de pe Wikipedia de exemplu) și adăugați CSS la ea pentru stilizare. Trebuie să folosiți minim:

Temă

Citiți de aici despre mai multe elemente CSS și pregătiți-vă pentru data viitoare: vom face echipe pentru a crea o pagină web cât mai frumoasă!