Designa sidans utseende med CSSLektion fem

Snyggt jobbat! Vi börjar nu närma oss slutet i denna grundkurs. Visst vore det tråkigt om vi inte kan använda färg och andra designelement för att göra vår webbsida lite roligare att titta på? 

Vanligtvis använder man tekniken CSS, Cascading Style Sheets, för att åstadkomma detta. Det finns tre tekniken för att koppla ihop dessa designinstruktioner med själva sidinnehållet som definieras av HTML-koden. Vi ska i denna korta lektion endast fokusera på så kallad extern CSS.

Om man stänger av CSS-instruktionerna på en webbsida blir webben en rätt torftig upplevelse. Så här ser till exempel Digiteket ut utan påkopplad CSS: 

Skärmdump Digiteket utan grafiska element.

Koppla CSS

För att skapa din CSS-fil så skapar du en ny tom fil i Anteckningar som du döper till styles.css. Denna ska placeras i samma mapp som sida_ett.html.

Lättast är att gå till din mapp i Utforskaren och högerklicka och välja Nytt ->Textdokument.

 

Högerklick i Utforskaren, skapa nytt textdokument.

Döp det till styles.css.

Styles.css

 

För att koppla ihop layouten med själva HTML-filen behöver vi skriva lite kod. Öppna sida_ett.html och ange koden nedan inom och dess avslutningstagg . Observera att du redan har angett sidans titel där, du kan ha flera saker inom samma head:

Du har nu angett att webbläsaren ska titta i styles.css-filen för att hitta instruktioner för hur din webbsida ska visas. Filen är ju dock tom, men det ska vi ändra på nu!

Det finns enorma mängder layoutmöjligheter med CSS och vi ska bara som lättast skrapa på ytan här. 

Bakgrundsfärg

För att ange en bakgrundsfärg till min sida använder jag koden nedan i CSS-filen styles.css.

body { background-color: #F333FF; }

När webbläsaren sen ska tolka HTML-koden ser den att en CSS-fil är länkad, läser den och ser där att body, det vill säga allt det vi ser på skärmen, ska ha en bakgrundsfärg som är #F333FF

Detta är en så kallad hexadecimal färgkod. Hitta din egen genom att dra i reglaget på tjänsten htmlcolorcodes

Stort färgfält som skiftar mellan svart och lila där man kan dra markören för at få färgkoder till olika frger.

Övning

Kopiera färgkoden och ange en bakgrundsfärg för din sida genom att använda koden ovan. Vill du dubbelkolla mot facit?

Uppgift

Du har nu nått fram till den avslutande uppgiften i denna kurs! Snyggt jobbat! Vill du jobba vidare med webbdesign och kod finns det en uppsjö resurser att titta på om man vill jobba vidare. Nästa steg är kanske att bekanta sig med den så kallade boxmodellen som tjänar lite som utgångspunkt för allt layoutskapande med CSS.

Du ska nu genom att använda taggarna nedan stajla dina h1, h2 och p-taggar genom att ange CSS-kod som styr deras färg, storlek, typsnitt och placering på skärmen. Se exemplet med body ovan.

Taggar att använda, i parentes står exempel på olika alternativ att experimentera med:

font-size (100%, 300%, 50%)

text-align (center, left, right)

font-family (verdana, courier, times)

color (testa blue, red osv. eller hexadecimal färgkoder som innan)

Fastnar du och vill se exempel där dessa taggar används?

Om du loggar in kan du spara dina framsteg och få personligt rekommenderade kurser.

Författare: Ola Nilsson

Publicerad:

Reviderad: