Introduksjon:

I denne seksjonen skal vi lære hvordan man kan style tekst med forskjellige skrifttyper, farger og størrelser. Vi vil også lære hvordan du legger til bakgrunnsfarger og pyntekanter. Vi skal bruke det samme prosjektet du jobbet med sist gang, så sørg for at du åpner index.html i Felix mappen.

Steg 1: Skrifttyper

Vi kan endre utseendet på teksten ved å endre skrifttypen (“font” på englesk). De mest vanlige skrifttypene heter:

Ikke alle skrifttyper finnes på alle datamaskiner, så vi trenger å oppgi en fall-back font (en skrifttype vi kan falle tilbake på om førstevalget vårt ikke finnes på datamaskinen) også. Disse er ganske generiske som “sans serif”, “serif”.

La oss prøve å endre skrifttype på overskriften ved hjelp av font-family-egenskapen.

h1 {
    color: red;
    background-color:black;
    font-size:72px;
    text-transform:uppercase;
    text-decoration:underline;
    text-decoration:blink;
    font-family:impact, sans-serif;
}

Og skriften i avsnittene…

p {
    font-family:georgia, 'times new roman', serif;
}

LAGRE filen og se på den i nettleseren

Prøv noen av de forskjellige skrifttypene for å se hvilken du liker best. Legg merke til hvordan vi skiller mellom hver skrifttype med et komma, og hvis skrifttypen har et navn med mer enn ett ord trenger vi å sette det i anførselstegn.

Hvilken av skrifttypene vi nevnte tror du ser best ut? Hvilken tror du er lettest å lese?

Har du andre skrifttyper på datamaskinen enn de som er nevnt? (det har du sannsynligvis). Prøv å åpne et program som Word eller Pages, alle skrifttypene som er lagret på datamaskinen kan vanligvis finnes der.

screenshot

Finn en skrifttype du liker og prøv den på websiden!

Du kan gjøre teksten fet, kursiv eller begge deler med font-style. La oss endre email teksten (husk den er inni en <a>-tag).

a {
    font-style:bold;
}

LAGRE filen og se på den i nettlerseren

Teksten har blitt fet! La oss se hvordan den ser ut i kursiv. Kursiv på engelsk er italic.

a {
    font-style:italic;
}

LAGRE filen og se på den i nettlerseren

Det finnes også en font-style-verdi som heter ‘oblique’. Hvordan ser den ut?

Vi kan til og med si hvor fet en tekst skal være ved å bruke egenskapen font-weight. Den tar verdiene normal, bold, bolder og lighter. Du kan også bruke tall, 100, 200, 300, 400, 500, 600, 700, 800 og 900, hvor 100 er den tynneste teksten og 900 er den tykkeste. Normal tekst er det samme som 400 og “bold” er det samme som 700. Men ikke alle skrifttypene har alle disse, så det er tryggere å bare bruke normal og bold. Overskrifter er normalt bold som standard. Hvis vi ikke ønsker at h2-overskiften vår skal være fet, må vi skrive:

h2 {
    font-weight:normal;
}

Prøv da vel!

Steg 2: Pyntekanter!

La oss legge til en ramme rundt bildet:

img {
    border-color:green;
    border-width:5px;
    border-style:solid;
}

LAGRE filen og se på den i nettlerseren

Prøv å endre fargen (border-color), bredden (border-width) og pyntekanten (border-style) til du er fornøyd. Noen verdier for border-style er dashed, dotted, double, groove, ridge, inset og outset.

Du kan sette kanter rundt alle typer elementer, hvorfor ikke prøve noen flere.

Steg 3: IDer og klasser

Vi ønsker å utheve kontakt-avsnittet. Vi kan ikke bruke <p>-taggen fordi det vil endre alle avsnittene. For å gjøre slik at en stil gjelder bare for ett element, bruker vi noe som kalles ID. Vi trenger å redigere HTML-filen slik:

<p id ="uthevet">Har du sett Felix? <em>Vennligst</em> kontakt eieren hans på <a href="mailto:[email protected]">[email protected]</a</p>

så kan vi style den IDen som så:

#uthevet {
    color:red;
}

LAGRE filen og se på den i nettlerseren

En ID er unik og kan bare brukes én gang per side. Så hva hvis vi ønsket at to av avsnittene skal ha en større tekststørrelse? Vi kan gjøre det ved hjelp av klasser. Først må vi gi klassenavn til de avsnittene vi ønsker å endre.

<p class="stor">Han forvant fra hagen i går.</p>
<p class="stor"><strong>Takk!</strong><p>

Vi styler en klasse sånn (med en . i stedet for #):

.stor {
    font-size:24px;
}

Ting du kan prøve

  • Hvordan ville du endret siden slik at den ser bedre ut? Hvorfor ikke prøve å bruke dine favorittfonter, farger osv.
  • Hvis du er tidlig ferdig kan du style sidene vi lagde i tidligere leksjoner.
  • Forresten, visste du at background-egenskapen ikke bare tar verdier som er farger, men også bilder?