Külső stíluslap használata

Külső stíluslapok beillesztése

A stíluslapok használatával szétválik a tartalom és a forma.

A weboldalak tartalmi elemeit a HTML kód, míg a tartalom megjelenítésére vonatkozó stílusdeklarációkat a CSS kód tartalmazza egy-egy külön szöveges állományban. A HTML kódot tartalmazó fájl kiterjesztése .html, a CSS kódot tárolóé .css.

Különösen összetett webhelyek esetén hasznos a külső stíluslapok használata. Ekkor ugyanis csupán egyszer kell beállítanunk a webhely oldalain található HTML elemek stílusjellemzőit. Az elkészült CSS fájlt (stíluslapot) használva valamennyi weboldalon könnyen biztosítható az egységes megjelenés.

Ha egy stíluselemet kívánunk később módosítani a webhely valamennyi oldalán (mai lehet több száz vagy több ezer is.) elegendő egy helyen elvégezni a változtatást.

Példa:

HTML kód

 <!DOCTYPE html>
<html lang="hu"> 
     <head> 
            <title> EZ AZ OLDAL NEVE </title> 
            <meta charset="UTF-8">            
            <link rel="icon" type="image/gif" href="favicon.ico">             
            <link rel="stylesheet" type="text/css" href="f_5.css">  
     </head> 
     <body> 
            Külső CSS stíluslapot használunk. 
     </body> 
</html>

CSS kód


body {
  font-size: 34px;
  text-align: center;
}

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: html5_css_kulso.html