logo-css

CSS Grunder

Vi kommer de här två veckorna att lära oss grunderna i CSS.

 

CSS var du skriver det

inline style

styletag

link

HTML tags. (inline och block)

<style>, <div>, <span>,<haeder>,<footer>,<article>

CSS attribut.

color, background, font-family, font-size, ! important, border,

Företräden i kaskaden ( ! important)

 

DOM och företräden med CSS

! important 

inline style

style tag

link

 

 

 

 

 

 

 

Uppgift Åkes Fisk och Asfalt

fisk

Din uppgift är att skapa en enkel hemsida till Åkes firma. "Åkes fisk och asfalt". Åke har ingen aning om vad

som ser snyggt ut på en sida. Däremot vet han exakt hur det ska se ut.

 

Så här vill han ha det.

Default typsnitt ska vara Helvetica.

Default padding och marign ska vara 0. (reset)

Det ska stå "Åke" med 300% storlek, rubrik 1 överst på sidan. I headern. Headern ska ha svart bakgrundsfärg.

På sidans content (dvs i article) vill han ha en till rubrik 1. Där ska det stå "Bästa fisken".

Det ska finnas en paragraftext med sample latin. Ett ord i löptexten ska ha blå bakgrund.

Det ska finnas en bild på en fisk. Bilden ska ha en border på 3px. Svart heldragen. 

 

Validera css och html och rätta till eventuella fel.

 

uppgift

 

 

 

Lite svårare

Ta reda på hur margin och padding funkar.

Snygga sedan till sidan så att inte article är direkt till vänster (ser fult ut)

lägg till margin så att det blir luft runt rubrikerna

 

 

Färger och mått med CSS

color

Färger med namn 

RGB (red, green, blue)

Hexadecimal färg

HSA färg (hue, saturation, lightness)

 

Färger med opacity

Opcity = genomskinlighet

 

Mått (de vanligaste)

px = pixlar

em = 1 em är defautl font-size 2 em är dubbel font-size.

% = procent av något annat 

 

 

 Uppgift Göstas Värdshus

gostas2

Utgå från lektionerna vecka 14 om mått och färger. Skapa en hemsida åt 
Gösta.

Det här är Göstas specifikationer för en enklare sida.

Göstas värdshus ska vara i rubrik 1. Färgen ska vara "ovanlig", dvs du använder
något annat än "red". Kolla på cssfärgnamn.

Den vita bakgrundsfärgen ska vara skriven med rgb- färgkod och med transparens.

"HTML Ipsum Presents" ska vara rubrik stil 2. Använd em och skapa en stil som är en och 
en halv gång större än defaultstilen.

Bakgrunden till "HTML Ipsum Presents" ska vara kodad med hsl och en blå, grå färg.

 

Det här är Göstas specifikation för en lite mer avancerad sida.

Du ska ha rundade hörn på bakgrunden till texten. Det ska vara border.

Du har lagt lite avstånd mellan elementen på sidan genom att använda olika fomer av margin.

Bakgrunden till header ska vara en transparent png.

Texten på sidan ska inte ligga för nära någon kant eftersom det ser fult ut. Inget element ska sticka ut.

Du bygger en sitewrap den sitewrap placerar sida på mitten av skärmen alltid *

 

Det här är Göstas specifikation för en mycket mer avancerad sida.

Du lägger en skugga inuti textboxen. *

Copyright info ska inte ligge nära logotype i footer.

 

Bilder till uppgiften

curve

Pngbild av moln (header pic). 

Bakgrundsbild av moln

 

Här är sidan som jag skapade

Högerklicka på sidan och välj att visa källa så ser du hur jag har gjort.

Tutorial