CSS ÖVNINGAR

Del 1 – Sätta upp din programmeringsmiljö – nu även för CSS

Om du har kvar ditt fönster uppe sedan innan lunch så har du bara HTML rutan uppe i Codepen -men nu behöver vi även lägga till möjligheten att skriva CSS.
1. Det gör vi genom att trycka på CSS som står nästan längst bort till höger och dra ut den så att den blir lika stor som din HTML ruta. Titta på bilden till höger om du är osäker.
2. Ett redskap som kan vara bra att ha när vi jobbar med färg är något som kallas för er färgväljare. Här hjälper datorn oss att översätta färger till Hex och RGB värden som vi kommer att behöva använda oss av! För att hitta den kan du klicka HÄR!
3. Snyggt jobbat! Nu är det bara scrolla ner till del 2 – Din första CSS-kod!

Del 2 – Din första CSS kod

1. Byt ut textfärgen på alla dina <p> taggar till en valfri färg som du tycker om.

Kod exempel för att byta textfärgen på en paragraf

//Det här exemplet visar en textfärg som är lila.
p {
color: #be03fc;
}

2. Byt ut bakgrundsfärgen till en valfri färg på ditt <h1> element. Blir det snyggt? Om du inte är nöjd med resultatet så kanske vi ska använda oss av lite transparans i färgen. Ledtråd finns till höger!
3. Välj ett valfritt HTML-element och sätt bakgrundsfärgen till en valfri färg och sätt textfärgen till valfri men inte samma färg som bakgrundsfärgen.

Kodexempel för att lägga till tranparens på en bakgrundsfärg

//Kodexempel för att lägga till tranparens på en bakgrundsfärg
h1 {
background-color: rgba(252, 3, 119, 0.5);
}

4. Byt ut storleken på dina <p> testa att göra dem till 30px. Blir det för stort eller för litet, då kan du välja en storlek som du tycker passar till den hemsida.

Exempel för att ändra storleken på texten

//Det här exemplet visar hur man ändrar text storlek
h3 {
font-size: 42px;
}

5. Nu vill vi att du testar att ange färger på olika sätt. Kommer du ihåg när vi gick igenom olika sätt att skriva färger i presentationen -n u ska ni få testa själva. Byt textfärg på ditt <h3> element först genom att
– Skriva färgen grön(green)
– Ange färgen i ett hex värde: #3e8247
– Ange färgen i RGB: 62, 130, 71
– Ange färgen i RGBA 62, 130, 71, 0.5
6. Fortsätt med storleken på texten. Tycker du att dina rubriker eller länkar behöver bli större? Byt ut storleken på texten på alla dina HTML-element.

7. Testa nu att byta ut typsnittet på dina länkar. Nedan listar jag dem som ni kan använda.
Arial
Helvetica
Times New Roman
Times
Courier New
Palatino
Garamond
Verdana
Georgia
Comic Sans MS
Trebuchet MS
Arial Black
Impact

Kodexempel för att byta typsnitt

//Det här exemplet visar hur man byter typsnitt
h3 {
font-family: comic sans ms;
}

8.Vill du byta färg på hela bakgrunden så går det genom att använda <body> som selektor. Till höger i kodexemplet kan du se ett exempel på när vi byter bakgrund på hela vår HTML sida samt testar att använda en bakgrundsbild.

Kodexempel för att byta bakgrund på hela sidan

//Det här exemplet visar hur man byter till en annan bakgrundsfärg
body {
background-color: #9c2452;
}

//Det här exemplet visar hur du byter bakgrund till en bild

body {
background-image: url("https://www.cutedog.com/cutedog.jpg");
background-position: center;
}

9. Testa att göra all din text i dina <p> taggar till stora bokstäver. Se ledtråd till höger!

Kodexempel för att göra text till stora bokstäver

//Det här exemplet visar hur man gör alla h3or till stora bokstäver
h3 {
text-transform: uppercase;
}

Del 3 – Positionering

1. Testa att lägga till ram på en av dina bilder dvs på <img> taggen – kom ihåg att attributet border har tre stycken värden. Är du osäker kan du titta på kodexemplet till höger.

Kodexempel för att lägga till border

//Det här exemplet visar hur man lägger till en ram på en bild
img {
border: 5px solid black;
}

2. På samma bild dvs på din <img> tagg, testa att lägga till 20px padding.
3. På samma bild för en tredje gång dvs på din <img> tagg, testa att lägga till 30px margin. Ser du någon skillnad på margin och padding?
4. Om man inte vill lägga till margin, padding eller border på alla sidor så kan man bestämma att det ska finnas på t ex en specifik sida te x vänster. För att göra det så behöver man skriva t ex margin-left eller padding-left.
Testa på en länk att bara lägga till border på höger sida. Hur ser det ut då?

Kodexempel för att lägga till margin och padding

//Det här exemplet visar hur man lägger till 
margin och padding på en bild
img {
margin: 10px;
padding: 20px;
}

5. Centrera text! Finns det någon av texterna du har på din sida du skulle vilja ha i mitten istället? Testa att centrera din text och kommer du inte ihåg hur koden ser ut kan du spana på exemplet till höger!

Kodexempel för att centrera text

//Det här exemplet visar hur man centrerar text
p {
text-align:center;
}

6. Centrera en bild! Att centrera en bild är inte fullt lika enkelt som att centrera text. Här behöver vi använda oss av två olika attribut, display och margin. Om du är osäker kolla på kodexemplet för att komma vidare!

TIPS! När man skriver margin: 0 auto så betyder det att datorn sätter 0px i margin uppe och nere på bilden men att den till höger och vänster automatiskt räknar ut rätt avstånd så att bilden skall hamna i mitten.

Kodexempel för att centrera en bild

//Det här exemplet visar hur man centrerar en bild
img {
display:block;
margin: 0 auto;
}

7. 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?
8. Extra Extra Allt handlar om placering på en webbsida, om du vill lära dig mer så gå in på Flexbox Froggy

Del 4 – Klasser och Google Fonts

1. Skapa en klass för en av dina paragrafer. Du kan döpa den till .newcolor . Efter att du lagt in klassen i HTML så behöver du skriva CSS kod och för att ha en klass som en selector är det viktigt att man inte glömmer . före klassnamnet. Se ett exempel till höger! Välj nu en valfri textfärg och en valfri bakgrundsfärg (inte samma som du haft när du valt färger till dina paragrafer innan)!
2. Testa nu att lägga till en till klass på valfritt HTML-element. Kanske på en bild eller på en av dina rubriker? Du väljer själv vad du vill skapa för CSS. Kanske vill du lägga till en border eller centrera texten?!

Kodexempel för att lägga till en klass

//Det här exemplet visar hur man lägger till en klass i HTML och 
hur man lägger till Styling i Cssen

HTML
<p class="newcolor">Hej jag heter Haja Kod</p>

CSS
.newcolor{
color: #6f2ba6;
background-color:#b32e73;
}

2. Nu är det dags att testa lite nya typsnitt! De som finns som standard är helt OK, men om du vill göra din sida ännu roligare kan vi hitta massor av typsnitt på något som heter Google Fonts. Länk hittar du HÄR För att lägga in en Google Font på din hemsida behöver du gå igenom ett par steg

– När du gått in på Google Fonts på länken ovan välj ut ett typsnitt som du vill använda, det gör du genom att trycka på det

– När du tryckt på det typsnitt du vill använda så kommer du till en ny sida och där trycker du på “Select Style”.Se bild

-Då kommer du få upp en ruta till höger och där behöver du klicka på Embed. Se bild

-Nu behöver du klicka på @import. Se bild!

-Nu är du nästan klar! Nu skall du kopiera allt som är mellan style taggarna och lägga högst upp i din css.Se bild!

-Som sista steg behöver du nu kopiera det som står i den andra grå rutan dvs font-family och ett värde.Se bild!

-FÄRDIG!!!

Del 5 – Gör din hemsida precis som du vill!

1. Nu har du lärt dig massor av saker! WOW vad ni är duktiga som arbetat så hårt. Nu är det upp till er och styla er hemsida så att den ser ut som ni vill! STORT LYCKA TILL!

Här är ett exempel på en annan elevs hemsida. Hur ser er ut?

OM OSS

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

KONTAKT

CSS ÖVNINGAR

OM OSS

KONTAKT