Izbirniki (ang. Selectors)

CSS Simple Selector prikazujejo vse osnovne selektorje, ki spadajo pod preproste. S Combinator Selector lahko izberemo posamezen HTML element za oblikovanje, lahko je to odstavek (ang. Paragraph) ali glava (ang. Heading). Naslednji izbirnik je Class Selector, kjer določimo razred atributa, in potem ta razred dodajamo v elemente.

Izbirniki (ang. Selectors)

V primeru bom ustvaril class center in ga dodal tako v glavo <h4>, kot tudi v element <span>. Tretja možnost pa je, da ne pišemo toliko kode, lahko enostavno slog (ang. Style) združimo v odstavek in glavo.

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS Selectors</title>
    </head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .center {
            text-align: center;
            color: firebrick;
        }

        h4, span {
            text-align: center;
            color: lime;
        }
        .p {
        background-color: red;
        color: yellow;
        font-size: 20px;
        font-family: "Calibri Light";
        }
    </style>
    <body>
        <h4>Zdravo Svet</h4>
        <span>Ker sem dodal span v slog, se mi bo vsak span element spremenil, kot je zapisano v slogu.</span>
        <p class="center">V katerikoli element dodam class="center" se m i bo oblikoval, kot je zapisano v
                          obliki.</p>
        <h5 class="center">Pozdravljen svet!</h5>
        <p class="p">Dodal sem še razred .p in to pomeni, da moram v vsak element vpisati ime tega razreda, kar je zelo dobro,
        ker če je kje napaka, samo popravim ta razred in ne celotne strani. Razred <mark>class p</mark> povozi vse druge
        izbirane sloge, pomeni, da tudi če imam izbran slog <mark>p</mark> ga po razred povozil.</p><br>
    </body>
    </html>
    

Zdravo Svet

Ker sem dodal span v slog, se mi bo vsak span element spremenil, kot je zapisano v slogu.

V katerikoli element dodam class="center" se mi bo oblikoval, kot je zapisano v obliki.

Pozdravljen svet!

Dodal sem še razred .p in to pomeni, da moram v vsak element vpisati ime tega razreda, kar je zelo dobro, ker če je kje napaka, samo popravim ta razred in ne celotne strani. Razred povozi vse druge izbirane sloge, pomeni, da tudi če imam izbran slog ga po razred povozil.

Najboljša možnost je, da vpišemo razred (ang. Class) v <style></style>, in ga potem dodajamo v vsak element, kjer to želimo. Naredimo lahko več razredov, kot za <span>, <div>, <p>, <h>, <textarea>, <code>, <var> itn. in potem samo dodajamo. Če želimo spremeniti slog vsakega elementa, ki ga uporabimo, potem ne dodajamo pike pred razred, ampak samo ime razreda.

Primer: <style>p {background-color: red}</style>, in s tem se nam bo vsak odstavek obarval v rdeče oziroma spremenil obliko, kot bomo napisali v <style>.

    
        <style>
            p.majhen {
                text-align: left;
                color: #f44336;
                background-color: #2196F3;
                padding: 10px 10px;
            }
            p.velik {
                font-size: 150%;
                color: red;
                font-style: italic;
            }
        </style>
    
Zdravo svet [glava h6]

Prikaz oblike [odstavek p]

Ko v <style> damo ime elementa pred razred, v mojem primeru <p> se bo spremenil samo odstavek, tudi če vpišemo ime razreda (ang. Class) v druge elemente. Lahko vpišemo <h3.majhen> in tudi, če bomo sedaj dali v odstavek <p class:"majhen"> se ta ne bo spremenil, spremenil se bo samo element <h3>.

    
        <style>
            * {
                text-align: center;
                color: skyblue;
                font-size: 20px;
            }
        </style>
    

V tem primeru, se bo spremenila celotna stran, vsi elementi. To je drugače podobno kot, če bi namesto zvezdice, uporabili <body>, tudi pri tem se spremeni celotna stran. Takšne stvari se običajno uporablja za box-sizing: border-box;, ki določa velikost polja. Določa širino (ang. Width) in višino (ang. Height) elementov oziroma bolje, kako se izračuna ta polje ali naj vključujeta položaje (ang. Padding) in okvirje (ang. Borders).

Če želimo enako spremembo za vse <h>, <p> in ostale elemente na strani, in nočemo v vsakega posebej pisati razreda (ang. Class). V tem primeru v <style> vpišemo vse elemente, ki jih želimo spremeniti v eno vrstico.

    
        <style>
            h1, h2, h3, p, kbd, mark {
                text-align: center;
                color: blue;
                font-size: 18px;
                marging: auto;
                padding: 15px 15px;
            }
        </style>