3.2 Box Modell

I denne aktiviteten skal du opprette et nytt HTML dokument, hvor du skal legge inn 3 <p> tager med valgfri tekst. Legg så de 3 <p> tagene inn i en <div id> tag. Lagre filen med valgfritt navn. Med et nytt CSS styling dokument legger du inn følgende egenskaper og verdier på <p> tag.
– Margin: 15 px
– Padding: 5 px
– Background-color: #999
– Border: thin, solid, #000
Lag print screens og skriv inn box modellens innhold.

Først opprettet jeg et nytt HTML dokument, la til tittel, la til 3 <p> tager, og skrev inn informasjon om denne oppgaven. Deretter lagret jeg dokumentet, og åpnet et nytt CSS dokument. Først gikk jeg tilbake til HTML dokumentet, og linket CSS dokumentet opp til HTML dokumentet. Deretter gikk jeg tilbake til CSS dokumentet, laget en New CSS rule, valgte class og <p> tag. Deretter fylte jeg inn de detaljene som oppgaven spør etter, med margin, padding, bakgrunnsfarge og border.
Tilslutt gikk jeg tilbake til HTML dokumentet, gikk under Properties menyen nederst til venstre og valgte class, deretter fant jeg p valget jeg hadde opprettet. Valgte denne og dermed forandret/stylet alle <p> tagene seg etter det jeg ønsket.

Printscreens av HTML dokumentet (code-view), HTML dokumentet (design-view), CSS dokumentet, test i en nettleser og antall pixler som viser innholdet i boksen.

Jeg laget en ekstra illustrasjon i Illustrator for å vise hvor margin, border, padding og innholdet i boksen er, og antall pixler. Håper jeg har fått til det oppgaven ba om, og at det ble korrekt.
Ps: Denne oppgaven skulle egentlig vært postet før gårsdagsen innlegg, men det som betyr noe er at jeg utførte de i riktig rekkefølge 🙂

– Annette B. D.

Advertisements

One thought on “3.2 Box Modell

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s