CSS stílusok felépítése

CSS elhelyezése HTML állományokban
Szövegközi stílusok (inline style)
A CSS stílusokat egy HTML elem style tulajdonságában elhelyezve csak arra az egy elemre fognak vonatkozni. A következő példában egy bekezdés, vagyis egy p elem szövegszínét és betűméretét állítjuk be:
1
<p style="color: blue; font-size: 1.5em;">Lorem ipsum dolor sit amet</p>
Copied!
Beágyazott stíluslapok
A CSS stílusokat elhelyezhetjük egy HTML állomány fejlécében egy style elemben.
A style elemben CSS nyelvi szabályok lesznek érvényesek.
1
<style>
2
    p {
3
        font-size: 1.5em;
4
    }
5
    
6
    p.blue {
7
        color: blue;
8
    }
9
</style>
Copied!
Külső stíluslapok
A CSS definícióinkat elhelyezhetünk CSS állományokban (rendszerint a HTML állomány mellett elhelyezve), ezeket az állományokat link elemmel kapcsolhatjuk a HTML állományunkba (link elemről bővebben).
1
<link rel="stylesheet" type="text/css" href="style.css">
Copied!
A külső CSS állomány kiterjesztése .css lehet.
A link elemeket minden esetben a HTML állomány fejlécében, a head elemben kell elhelyezni: 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <title>Document</title>
5
    <link rel="stylesheet" href="style.css">
6
</head>
7
<body>
8
...
Copied!
A külső CSS állomány nagy előnye, hogy több HTML oldalba is be lehet kötni ugyan azt a CSS állományt, így csökken a letöltendő adatmennyiség, és a stílusokat egy központi helyen tudjuk kezelni.
CSS importálása
Egy CSS állományba behívhatunk egy másik CSS állományt @import segítségével.
1
@import url('style.css');
Copied!
Megjegyzések
Megjegyzés (comment) /*  */ jelek használatával hozható létre CSS-ben
A /* és a */ karaktersorozatok közötti részt a böngésző figyelmen kívül hagyja.
1
/*
2
    Ez egy megjegyzés.
3
*/
Copied!
Stílusok felépítése
CSS stílus (CSS rule)
A kijelölő célozza be az elemeinket a HTML struktúrának megfelelően (úgy kell elképzelni mint egy címzést, ami egy, vagy több elemre hivatkozik).

A meghatározásblokk tartalmazza a kijelölt elemekre vonatkozó tulajdonságokat.
Kijelölők (selector)
A kijelölő a kapcsos zárójel előtt helyezkedik el, és tipusától függően hivatkozik egy vagy több HTML elemre. A következő példában az összes h1 (főcím) elem szövegszínét állítjuk be vörösre:
1
h1 {
2
    color: red;
3
}
Copied!
A kijelölőket lehet csoportosítani vesszővel elválasztva több elemre is vonatkoztathatjuk ugyan azt a szabályt. A következő példában már nem csak a h1 elem szöveg színét állítjuk be, a h2 h3 h4 HTML elemek szövegszínét is vörösre állítjuk:
1
h1,
2
h2,
3
h3,
4
h4 {
5
    color: red;
6
}
Copied!
A kijelölő szűrhet bizonyos elemkombinációkra, ekkor a szülőkön keresztül célozzuk meg az adott elemet. A következő példában a h1 elemekben lévő span elemek szövegszínét kékre állítjuk:
1
h1 span {
2
    color: blue;
3
}
Copied!
Kijelölők
Meghatározások
A meghatározásokat a kijelölő utáni kapcsos zárójelben helyezzük el, egymástól pontosvesszővel elválasztva. Az utolsó meghatározás, vagy CSS szabály után nem kell pontosvessző (általában ki szoktuk tenni).
1
p {
2
    color: #323232;
3
    font-size: 1.25em;
4
    line-height: 1.125em
5
}
Copied!
Egy meghatározás kulcsszóból, vagy névből, és a hozzá tartozó értékből áll, kettősponttal elválasztva. 
Léteznek gyorsírásos szabályok, amikben több értéket is megadhatunk. Ebben az esetben az értékeket szóközzel kell elválasztani.
1
p {
2
    margin: 10px auto 15px auto;
3
    padding: 0px 5px;
4
    font: small-caps italic bold 16px Helvetica;
5
}
Copied!