Övningar CSS

Del 1 – Sätta upp din programmeringsmiljö med CSS

Nu skall vi se till så att vi anpassar vårt HTML dokument så att vi kan skriva CSS-koden. För att kunna göra det så kommer vi att behöva lägga till <style> och </style> mellan dessa taggar så skall all CSS kod skrivas. Du behöver klistra in <style></style> taggarna efter din <head> tag och innan din </head>. Det skall se ut som bilden till vänster.

För att testa att din setup verkligen fungerar så kan du skriva av samma kod som du ser på bilden till vänster dvs
p {
font-size: 50px;
}

Det sista du behöver göra för att se om din text verkligen blivit större är att öppna ditt HTML-dokument i browsern(T ex Google Chrome) precis som du gjort innan när du öppnat för att se hur dina HTML element ser ut.

Del 1.0 – CSS övningar – byta ut färger

Nu är det dags att testa på att skriva er första CSS-kod. Det viktigaste är att du skriver all din CSS kod mellan style-taggarna precis som bilden visar ovan.

1.1 Byt ut textfärgen på alla dina <p> element till röd.

1.2 – Byt bakgrundsfärgen till grön på alla dina <h1> element.

1.3 på ett valfritt HTML-element sätt att bakgrundsfärgen skall vara rosa och texten blå.

Del 2 – Byta ut typsnitt och ändra text.

2.1 – Byt ut storleken på dina <p>  gör dem större eller mindre, vi vill kunna se skillnad.

2.2 Testa att göra all din text (<p>) till stora bokstäver. Googla vilken kod du kommer behöva använda eller se hint längre ner på sidan.

2.3. Placera din kod i mitten på sidan. Om du inte vet hur du ska göra – Googla! Tips sök på “center text css”

2.4. Byt ut typsnittet på dina olika HTML element. Här finns en länk du kan använda för att se vilka du kan använda utan att behöva lägga till extra kod.

Del 3 – Centrera bilder

1. Det kan vara lite svårt att få sin bild centrerad på sidan. Kan du komma på hur? TIPS: googla “center image CSS. “


Del 4 – Redan färdig?

1. Googla “CSS attribute list” – då kommer du få upp massor av nya coola saker du kan göra med din kod – hittar du någon favorit?


Ledtråd övning 1.1
p {
  color: red;
}
Ledtråd övning 1.2
h1 {
  background-color: green;
}
Ledtråd övning 2.1
font-size: 20px;
 
Ledtråd övning 2.2
text-transform: uppercase;
 
Ledtråd övning 2.3
text-align: center;
Ledtråd övning 3
img {
  display: block;
  margin: 0 auto;
}

Redan klar? Extra uppgifter

1 – Google som verktyg är väldigt viktigt för utvecklare. Nu ska vi se hur bra ni är på att googla – Googla <style> taggen. Hur tror ni att vi kan använda den i vår kod? Vad används taggen till?

2 – Googla “HTML tags” så hittar ni en lista med olika HTML taggar. Testa på att använda dessa i din kod. Hittar du någon favorit?

Haja kod logo

OM OSS

HAJA KOD introducerar programmering och digitalt skapande för barn och vuxna.

KONTAKT

Ingenjörsgatan 9
411 19 Göteborg
[email protected]

Haja kod logo

© Copyright 2020