Atunci cind folositi CSS este de preferat sa il utilizati intr-un fisier separat de pagina HTML. Plasarea CSS-ului intr-un fisier separat permite designerului sa diferentieze complet continutul (pagina HTML) de design (fisierul CSS). CSS-ul extern este de fapt un fisier ce contine doar cod CSS si are extensia “.CSS“. Fisierul CSS este apoi introdus in pagina HTML printr-o referinta, folosind <link> in loc de <style>. Vom parcurge in continuare intregul proces.

Creearea Fisierului

Vom incepe prin a creea fisierul CSS pe care il vom atasa paginii noastre web. Deschide notepad.exe sau orice alt editor text si tasteaza urmatorul cod:

Code
  1. body{ background-color: gray; }
  2. p { color: blue; }
  3. h3{ color: white; }

Acuma salveaza fisierul ca fisier CSS, folosind extensia .CSS. Asigura-te ca nu il salvezi ca fisier text (.txt) deoarece notepad are optiunea standard de a salva initial ca TXT. Denumiti fisierul stil.css. Acum creeati o pagina HTML noua si introduceti urmatorul cod:

Code
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="stil.css" />
  4. </head>
  5. <body>
  6. <h3> Header scris cu alb </h3>
  7. <p> Acest paragraf are fontul albastru.
  8. Culoarea de fundal a acestei pagini est gri deoarece am schimbat-o in interiorul CSS-ului! </p>
  9. </body>
  10. </html>

Apoi salvati fisierul ca index.html i nacelasi director in care se afla si fisierul nostru CSS. Acum deschideti in browserul web pagina HTML tocmai creeata si veti vedea ceva de genul:

Header scris cu alb

Acest paragraf are fontul albastru. Culoarea de fundal a acestei pagini este gri deoarece am schimbat-o in interiorul CSS-ului!

Felicitari!. Tocmai ati facut prima pagina care foloseste CSS extern. Acum sa incepem sa ne jucam cu CSS-ul.

De ce sa folosesti CSS extern?

  • pastreaza continutul si designul site-ului tau separat
  • este mult mai usor sa refolosesti codul CSS daca il ai intr-un fisier separat. n loc sa tastezi acelasi cod CSS prin toate paginile tale web, pur si simplu faci o referinta in toate aceste pagini catre fisierul CSS, folosind tagul <link>
  • poti efectua schimbari drastice cu niste modificari minore in fisierul de CSS
Optiuni pentru acest articol:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • RSS
  • StumbleUpon
  • Technorati
  • Faves
  • MySpace
  • Reddit
  • Twitter
  • email
  • Print
  • PDF

Related posts:

  1. Curs CSS – CSS Intern
  2. Curs CSS: Selectoare CSS
  3. Curs HTML: Introducerea de obiecte in pagina
  4. Testarea Scriptului PHP