HTML/CSS – et konkret eksempel

HTML og CSS er to språk det er en fordel å kjenne til når man skal jobbe med websider. Du MÅ absolutt ikke være en ekspert når du starter opp, men jo mer du lærer, jo friere står du til å designe websiden din og elementer du vil bruke selv.

HTML og CSS er to språk det er en fordel å kjenne til når man skal jobbe med websider. Du MÅ absolutt ikke være en ekspert når du starter opp, men jo mer du lærer, jo friere står du til å designe websiden din og elementer du vil bruke selv.

Nå skal vi lage en knapp, det kan jo være nyttig til så mye. La oss si at du ønsker å lage en “Klikk her” knapp, men link til en annen side. I stedet for å gå på jakt etter en “button plugin”, så fikser vi en selv.

For å definere hvordan knappen skal se ut, må vi opprette en “div class”. En div class kan du i prinsipp kalle hva som helst. Vi kaller den rett og slett knapp i dette tilfellet.

Husk at all HTML kode må legges inn under Tekst fanen for at den skal fungere.

Vi starter med dette utgangspunktet:

<div class="knapp">Klikk her</div>

For å få den til å se ut som en knapp, må vi legge inn litt CSS kode i stilarket. En div class beskrives med ett punktum foran selve navnet slik som det her:

.knapp { 
    background: #990000; 
    border-radius: 5px; 
    color: #fff; 
    max-width: 150px; 
    padding: 10px 30px; 
    text-align: center;  
}

Her har jeg lagt inn en mørk rød bakgrunnsfarge, en border-radius på 5px som gir avrundede hjørner, color: #fff gir hvit tekst, max-width på 150px begrenser bredden på knappen. Uten denne innstillingen ville knappen lagt seg i full bredde i innlegget her. Til slutt har jeg lagt inn litt padding for å få en grei størrelse på knappen og text-align: center for å sentrere teksten i knappen.

Nå har jeg lagt denne CSS koden inn i stilarket og jeg har lagt inn utgangspunktet i boksen over her, under Tekst fanen, og her har vi en fin rød knapp.(Du må forhåndsvise innlegget for å se hvordan den faktisk ser ut).

Klikk her

Men som du ser, så gjør den ikke mye nytte for seg enda. Vi mangler en link til siden den skal gå til, og det er jo ganske vesentlig. Vi linker den til Hjelp siden som har url: https://wpskolen.no/min-konto/hjelp/

Så vi justerer utgangspunktet til knappen ved å legge inn en html link:

<div class="knapp"><a href="https://wpskolen.no/min-konto/hjelp/">Klikk her</a></div>

NB! Hvis du vil kopiere koden over, så klikk på ikonet med de tre strekene slik at du får med deg hele koden:
Klikk her for å få med hele koden

Når den koden er lagt inn under tekst fanen, så får vi et resultat som ser slik ut:

Skjermbilde 2015-11-13 16.44.57

Og grunnen til det er at alle linker her på WP Skolen er forhåndsdefinert til å være røde, med en enda mørkere rødfarge + en prikkete linje under når man drar musa over.

Så her må det styles litt til.

Jeg vil at linken skal være hvit i utgangspunktet. Linken defineres med en “a”. Det gjør vi ved å legge til følgende CSS i stilarket:

.knapp a {
    color: #fff;
}

I tillegg vil jeg ha lys grå tekst når man drar musa over linken + en stiplet linje under:

.knapp a:hover {
    color: #f0f0f0;
    border-bottom: 1px dotted #f0f0f0;
}

Da har vi en knapp som ser fin ut! Og som du stolt kan si at du har laget selv 🙂

Målet med WP Basis kurset er ikke at du skal bli utlært i HTML/CSS, men jeg håper at noe av interessen for å lære mer våkner når du ser hvor enkelt du kan gjøre mange ting selv.
[progressally_objectives]