Kako oblikovati spletno stran?

Kadarkoli brskalnik prebere obliko, bo oblikoval HTML dokument v skladu s podatki zapisanih v tej obliki. Poznamo tri oblikovne vrste, ki so napisane v spodnji tabeli.

Kako oblikovati spletno stran?
Oblika OPIS
External CSS (slo. Zunanji CSS) s tem slogom lahko spremenim videz celotnega spletnega mesta.
Internal CSS (slo. Notranji CSS) se lahko uporabi na eni HTML strani, če ima ta stran določeno obliko.
Inline CSS (slo. Vgrajeni CSS) se lahko uporabi za en element.

Celotni videz spletne strani lahko spremenimo z External CSS, tako da spremenimo samo eno datoteko. Vsaka HTML stran mora vsebovati sklic na zunanjo stilsko datoteko, ki se nahaja znotraj elementa <link>. Če delamo samo na eni spletni strani, lahko uporabimo Internal CSS, ki je določen znotraj stilskega atributa, prav tako tudi <heading>. Za Inline obliko se uporabi kar notranji slog, in če želimo uporabljati vgrajeni css, dodamo stilski atribut ustreznemu elementu. Stilski atribut lahko vsebuje katerokoli CSS lastnost.

Kar se tiče zunanjega (ang. External CSS) css-a, moramo napisati css datoteko v beležnici. Ni potrebno dodajati atributa <style>, samo napišemo celoten css, shranimo pod .css, in ga nato naložimo na naš strežnik. Povezavo, ki jo dobimo iz strežnika, samo prilepimo v <link>.

<link rel="stylesheet" type="text/css" href="mystyle.css">

Stvar deluje zelo dobro, in če delamo na večih straneh, je ta rešitev idealna. Zame osebno je še vedno najbolj uporaben notranji CSS (ang. Internal CSS), ker hočem posamezne strani oblikovati drugače, čeprav na koncu vse skupaj izpade podobno :). Vgrajeni (ang. Inline) CSS je tudi zelo uporaben, kadar potrebujemo spremeniti, samo enega ali dva elementa na celotni strani.

Za notranjo (ang. Internal) obliko moramo iti takoj pod </head>, kamor vpišemo <style> in nato dodamo stilsko obliko po naših željah, na koncu moramo obliko zapreti </style>.

    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <style>
            h4 {
                padding: 15px 15px;
                margin: auto;
                font-weight: 500;
            }
            p {
                padding: 10px 10px;
                font-weight: 600;
                border: 3px double yellow;
                border-radius: 6px;
            }
        </style>
        <body>

        </body>
        </html>
    

Vse kar je napisano v style se bo spremenilo, torej vsi <h4> in vsi <p> elementi bodo spremenjeni.

Primer za vgrajeni CSS: <p style="color: red">besedilo</p>, lahko tudi vpišem v glavo (ang. Heading), ali v katerikoli drug element. Tukaj sta potem še Multiple Style Sheets in Cascading order, ki spadata pod Inline CSS. S tem dvema slogoma se vgrajeni CSS približa zunanjemu. Deluje tako, da enako kot pri zunanjemu videzu napišemo obliko v beležnico, jo shranimo pod .css, in damo na strežnik. Potem samo uporabimo <link>.

<link rel="stylesheet" type="text/css" href="mystyle.css">

Izgled vgrajene (ang. Inline) oblike

    
        <kbd style="color: greenyellow; background-color: #2196F3; padding: 10px 10px; margin-left: 20px">
        Izgled vgrajene (ang. Inline) oblike</kbd>
    

Mogoče še lahko omenim Pseudo-class selector, ki spremeni slog elementa, ko gremo z miško čezenj. Naslednji je CSS Pseudo-elements pri katerem lahko spremenimo pisavo v samo velike črke, spremenimo samo prvo besedo v odstavku, prvo črko itn.