Övningar CSS del 2

Övningar CSS del 2

 Arbeta med klasser i CSS
Nu har du hunnit testa på din första CSS kod och ganska snabbt brukar många inse att man vill skilja på HTML element t ex att två paragrafer skall se olika ut. För att kunna göra detta så kommer vi arbeta med klasser i CSS! Det kan vara lite klurigt i börja men när ni gjort det några gånger kommer ni tycka att det är så bra!
Del 1 – Övningar med klasser
1. Skapa en klass som heter blue på den av dina HTML element. Om du är osäker på hur man gör finns det en ledtråd nedan.
1.2 Lägg nu till CSS kod så att HTML elementet som fått klassen “blue” skall nu bli blå i vår browser.
Del 2 – Ge alla dina paragrafer olika färger
2.1 Skapa 4 olika paragrafer(<p>) med olika innehåll i din HTML fil2.2 Ge alla <p> en klass som heter “red” och se till att alla paragrafer med klassen röd blir röda i din browser.2.3 Ändra nu din kod så att alla <p> får olika färger i browsern.
Del 3 – Skapa en färgglad box
Försök nu att skapa en färgglad box genom att använda <div> elementet som du testade på att använda när du jobbade med HTML koden.3.1 Börja med att skapa en tom <div> i din HTML kod.3.2 Lägg till en unik klass till ditt <div> element i HTML koden.3.3 I CSSen lägg till en bakgrundsfärg för den klassen du skapat.3.4 Bestäm storleken på din <div> med höjd och bredd (i vår CSS-fil blir allt på engelska så tänk height and width).3.5 Skapa tre boxar i samma storlek men olika färg.

<h1 class=”blue”>My name</h1>

.blue {
color: blue;
}

.color-box {
background-color: pink;
}

.color-box {
background-color: pink;
height: 100px;
width: 100px;
}

{ border: 1px black solid}

text-decoration: none;

Redan klar? Extra uppgifter
1. Testa att använda något som kallas för padding på en av dina färgglada boxar. Testa att addera padding: 10px – ser du någon skillnad sedan innan?2. Testa att lägga till en ram (border) på något av dina HTML element.
3. När du skapar länkar blir de automatiskt blåa och med ett streck under dem. Kan du ändra stylingen på dina <a>? Ta bort linjen under dina <a> och ändra färg till något annat än blå!
4. Det finns en häftig grej som kallas för border-radius, om du adderar det till en av dina färgglada boxar – händer det något kul?
5. Det finns något i CSS som heter Hover-effekter, det innebär att något skall hända med våra HTML-element när vi tar musen över dem. Tex att något ändrar färg eller storlek. Försök att lägga till några sådana effekter på sin sida tex att din länk skall byta färg när du tar musen över den. Du kan hitta mer info om hover och hur du använder det här. Du kan också trycka på play på videon till höger och se hur se har gjort!
6. Googla “CSS attributes” och testa några av dessa i din kod – hittar du något coolt element som du gillar?

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