Tutorial CSS – Invata in 10 minute

Download link: primapagina_2.html
Download link: style.css

Buna ziua si bine v-am regasit, continuam seria noastra “invata in 10 minute” cu un nou video in care vom discuta despre CSS.

Ce este CSS?

HTML este folosit pentru a definii structura si continutul unei pagini web, in timp ce CSS (Cascading Style Sheets) este folosit pentru a definii stilul acelui website si a-l face sa arate mai prietenos. Prima oara trebuie sa definim design-ul paginii noastre web, pentru a putea lucra ulterior pe acesta.

Structurarea paginii web in HTML

Observam ca designul paginii web este impartita in 3 sectiuni

• In prima sectiune se afla titlul paginii web
• In a doua sectiune se afla doua coloane
  • Prima coloana contine meniul de navigare
  • A doua coloana cuprinde continutul efectiv al paginii web
• In a treia sectiune se afla bara de copyright

In HTML fiecare dreptunghi pe care il vedeti va fi un div (deci vom avea 6 div-uri in total – trebuie sa numaram si dreptunghiurile colorate).

Important: In HTML este necesar mai intai sa definim liniile (sectiunile pe orizontala) mai intai, iar mai apoi sa spargem liniile in coloane (cum am facut de exemplu in a doua sectiune).

O sa denumim sectiuniile dupa cum urmeaza:

1. Container – dreptunghiul albastru
2. Header – dreptunghiul cu titlul paginii
3. Content – dreptunghiul rosu
4. Navbar – dreptunghiul cu navigarea
5. Main – dreptunghiul cu continutul efectiv al paginii
6. Footer – dreptunghiul cu copyright

Syntaxa CSS

Selectorul intotdeauna trebuie sa acceseze un element HTML ce doriti sa il personalizati. Dupa care, in trebuie sa declarati ce proprietati doriti sa modificati si ce valori vreti sa ii atribuiti. De exemplu, in imaginea de mai sus, toate headerele H1 din cadrul unei pagini web vor fi de marimea 12px si colorate albastru.

Fiecare declaratie trebuie sa includa o proprietate CSS si o valoare, separate prin cate un “;” (exact ca in C++). De asemenea, orice declaratie in CSS incepe si se incheie cu cate o acolada.

Selectoarele in CSS

Selectoarele in CSS sunt folosite pentru a gasii (sau a selecta) elemente HTML bazandu-se pe denumirea acestora, pe id-ul lor, clasa lor, s.a.m.d.

Selectorul bazat pe element

Selectorul bazat pe element va selecta toate elementele de baza HTML din cadrul unei pagini si le va atribuii proprietatile mentionate de noi.

In exemplul de mai jos toate elementele de tip <p> vor fi centrate in mijloc si vor avea culoarea rosie:

p {
    color: red;
    text-align: center;
}

Selectorul bazat pe id

Selectorul bazat pe ID va selecta toate elementele din cadrul unei pagini HTML ce contin ID-ul specificat de noi. ID-ul este de preferat sa fie unic in cadrul unei pagini.

Pentru a selecta un element cu un ID specific, trebuie sa incepem cu caracterul #, urmat de ID-ul elementului. Nota: Un ID NU poate sa inceapa cu un numar.

#idulmeu {
    text-align: center;
    color: red;
}

Codul de mai sus va face elementul cu ID-ul “idulmeu” rosu si centrat pe mijloc.

Selectorul bazat pe clasa

Selectorul bazat pe clasa va selecta toate elementele din cadrul unei pagini HTML ce contin clasa specificata de noi.

Pentru a selecta un element cu o clasa specifica, trebuie sa incepem cu caracterul punct (.), urmat de numele clasei noastre. Nota: O clasa NU poate sa inceapa cu un numar.

.center {
    text-align: center;
    color: blue;
}

Codul de mai sus va face ca toate elementele cu clasa “center” sa fie albastre si centrate pe mijloc.

De asemenea, puteti sa combinati doua selectoare, in exemplul de mai jos, doar elementele de tip <p> ce contin clasa “center” vor fi colorate albastru si centrate pe mijloc.

p.center {
    text-align: center;
    color: blue;
}

Gruparea selectoarelor

Daca aveti de exemplu mai multe elemente ce contin aceleasi proprietati:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

Totul poate fi redus la:

h1, h2, p {
    text-align: center;
    color: red;
}

Comentariile in CSS

Comentariile sunt folosite pentru a explica bucati din cod si te pot ajuta mai tarziu sa iti dai seama ce ai vrut sa codezi. Exact ca si in cazul HTML, comentariile sunt ignorate de browser. Orice comentariu in CSS incepe cu /* si se termina cu */ (exact ca in C++).

/* Exemplu de comentariu */

Inserarea codului CSS

Cea mai populara metoda pentru inserarea unui cod CSS este creearea unui fisier separat, dupa care includerea fisierului CSS in pagina HTML.

<head>
    <link rel="stylesheet" type="text/css" href="fisierul_meu.css">
</head>

Inserarea codului CSS in cadrul paginii HTML (metoda 2)

Exista cazuri in care dorim sa modificam elementele HTML doar in cadrul unei pagini web, asadar putem definii de exemplu codul direct in pagina HTML.

<head>
    <style>
        body {
            background-color: red;
        }
        h1 {
            color: blue;
            margin: 40px;
        } 
    </style>
</head>

Construirea paginii noastre

Dupa ce am stabilit cateva notiuni introductive, haideti sa trecem la treaba. Sa recapitulam mai intai cum dorim sa arate pagina noastra. Mai intai creeam un fisier numit style.css pe care il vom include in header-ul paginii noastre.

• Dorim ca header-ul nostru sa aibe culoarea de background albastru – cu un text alb – centrat pe mijloc.
• Dorim ca background-ul paginii sa fie gri
• Dorim ca pagina efectiva sa fie alba si sa ocupe 800px – centrat pe mijloc
• Dorim ca navigatia sa fie 180px lata – in partea stanga
• Dorim ca partea cu continutul sa fie 600px lata – in partea dreapta
• Dorim ca footer-ul sa apara jos de tot

body{
    background-color: #EEE;
}

a{
    text-decoration: none;
    color: red;
}

h1{
    margin: 0px;
}

#container{
    background-color: white;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#header{
    background-color: #66CCFF;
    color: white;
    text-align: center;
}

#content{
    padding: 10px;
}

#nav{
    width: 180px;
    float: left;
}

#nav ul{
    list-style-type: none;
    padding: 0px;
}

#nav.selected{
    font-weight: bold;
}

#main{
    width: 600px;
    float: right;
}

#footer{
    clear: both;
    padding: 10px;
    background-color: #999999;
    color: white;
    text-align: right;
}