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