Stíluslap beágyazása
Az elkészült stíluslap bármennyi HTML oldalhoz használható egyidejűleg. Viszont ahhoz, hogy a stíluslap hatással legyen rá, össze kell kötni a HTML fájlt és a stíluslapot. Ezt háromféleképpen tehetjük meg:
1. Külső stíluslapok
Ha egy HTML fájlra alkalmazni kívánunk egy stíluslapot, akkor a fejrészbe (<head>...</head> ) kell írni a következőt, ha a két fájl azonos mappában van:
<head>
<link href="stiluslapneve.css" rel="stylesheet" type="text/css">
</head>
A rel és a type attribútumnak mindig ez kell hogy legyen az értéke, ha stíluslapot ágyazunk be, a href -nek pedig a stíluslap elérési útvonalát kell tartalmaznia a HTML fájlhoz képest. Ez a leggyakrabban alkalmazott megoldás a stíluslapok beágyazására, ezt a sort minden weboldalunk kódjába bemásolhatjuk a href -nek a megfelelő értéket adva.
2. Belső stíluslapok
Olyan stílusok megadásakor érdemes használni ezt a módszert, aminél tudjuk, hogy csak egyetlen weboldalhoz fogjuk felhasználni. Ugyanis ha egy stíluslapot már kettő, vagy több weboldalhoz is felhasználunk, akkor ajánlott külön stíluslapban tárolni őket, és a fenti 1. módszerrel társítani a weboldalhoz. A <head>...</head> részbe kell beírni a stíluslapot a <style>...</style> címkék közé.
<head>
<style type="text/css">
h1 {
color: red;
text-align: center;
}
h2 {
color: blue;
text-decoration: underline;
margin-bottom: 1em;
}
</style>
</head>
3. Szövegközi stílusok
A style attribútumot bármelyik címkén belül használhatjuk. Ezt akkor érdemes használni, ha egy stílus csak egyszer, vagy nagyon kevésszer fordul elő a weboldalon, és ezért nem akarjuk külön kiírni a külső stíluslapban.
Ha mondjuk alkalmaztuk a fenti egyszerű stíluslapot az oldalunkra, és minden címsor piros lett és középre igazított, de mi egyetlen címsornál azt szeretnénk, ha mégis kék és jobbra igazított lenne, akkor ezt így adhatjuk meg a kívánt címsornál (a szövegközi stílus felülbírálja az összes többi stílust, erről később szó lesz):
<h1 style="color: blue; text-align: right;">
|