Mål: Förklara vad CSS är och varför det är viktigt, samt hur man kopplar det till HTML.
Dag 1 byggde vi skelettet till våra hemsidor med HTML. Vi skapade rubriker, texter och la in bilder. Men det såg kanske lite tråkigt ut. Idag ska vi ge vårt skelett kläder, färger och stil! Vi ska använda CSS."
"Om HTML är själva husets struktur - väggar, tak, fönster (alltså <h1>, <p>, <img>) - så är CSS inredningsarkitekten."
"CSS bestämmer vilken färg det ska vara på väggarna (background-color), vilken stil det ska vara på möblerna (typsnittet, font-family), hur mycket luft det ska vara mellan möblerna (margin), och vilka tavlor som hänger på väggen (border). HTML bygger, CSS stylar."
"HTML är som skelettet av en människa, CSS är kläder och makeup"
Titta på CSS Zen Garden. Det är samma "hus" (HTML) men varje sida har olika "inredningsarkitekter" (CSS)
Kom ihåg:
Använd webbläsarens utvecklarverktyg:
Förklaring: "Detta är som att tejpa en instruktion direkt på en möbel. Snabbt för en enstaka sak, men blir väldigt rörigt om man ska styla mycket."
Användningsområde: Bra för att snabbt testa något, men undviks i större projekt.
<h1 style="color: blue;">En blå rubrik</h1>
Förklaring: "Detta är som att skriva en lista med stilregler på ett papper och lägga den i 'hjärnan' (<head>) på vår HTML-sida. Reglerna gäller då för alla element på just den här sidan."
Användningsområde: Bra för enstaka sidor eller små projekt. Vi kommer börja här idag!
<head>
<title>Min stylade sida</title>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
Förklaring: "Detta är det proffsiga sättet. Vi skapar en helt egen fil som bara innehåller CSS-kod (t.ex. style.css). Sedan länkar vi till den från vår HTML-fil. Fördelen är att vi kan använda samma stil-fil för MÅNGA olika HTML-sidor. Ändrar vi i CSS-filen, ändras alla sidor samtidigt!"
Användningsområde: Standard för nästan alla webbplatser.
Exempel (i HTML-filens <head>):
<link rel="stylesheet" href="style.css">
Exempel (i style.css-filen):
h1 {
color: blue;
}
Selector { Property: Value; }
: mellan egenskap och värde; efter varje regel{} runt alla regler för en selektorVisa vanliga selectors: tagg (h1), klass (.min-klass), id (#mitt-id).
| Egenskap | Funktion | Exempel |
|---|---|---|
| color | Textfärg | color: green; |
| background-color | Bakgrundsfärg | background-color: yellow; |
| font-size | Textstorlek | font-size: 24px; |
| margin | Utrymme utanför element | margin: 10px; |
| padding | Utrymme inuti element | padding: 5px; |
Mål: Tillämpa grundläggande CSS på din sida från Dag 1.
Börja med att skapa en <style>-tagg i <head> på sin HTML-sida. Sedan kan du följa dessa steg:
Uppgift: "Ge hela din sida en bakgrundsfärg och ändra textfärgen för dina paragrafer."
body {
background-color: #f0f8ff; /* En ljusblå färg (AliceBlue) */
font-family: Arial, sans-serif; /* Ett rent och lättläst typsnitt */
}
h1 {
color: #4682b4; /* En mörkare blå färg (SteelBlue) */
}
p {
color: #2f4f4f; /* En mörkgrå färg (DarkSlateGray) */
font-size: 18px; /* Gör texten lite större än standard */
}
Tips: Man kan använda färgnamn (red, blue) eller HEX-koder (#ff0000). Här får du en så kallad "Color Picker", på samma site finns också en lista över olika namn på färger.
"Tänk på varje HTML-element som en tavla på en vägg."
Uppgift: "Ge din huvudrubrik en ram och lite luft inuti."
h1 {
border: 3px solid #4682b4; /* En 3px tjock, heldragen, blå ram */
padding: 20px; /* 20 pixlar luft inuti ramen */
background-color: white; /* Vit bakgrund för att se padding tydligt */
}
Extra utmaning (vad ändras?):
p {
background-color: lightgray;
margin: 10px 20px;
padding: 15px 25px;
border-radius: 10px;
}
Uppgift: "Centrera din huvudrubrik på sidan."
h1 {
/* Texten inuti centreras: */
text-align: center;
}
/* För att centrera ett helt block-element (som en div eller h1 med fast bredd): */
.container { /* Skapa en div med class="container" i din HTML */
width: 80%; /* Sätt en bredd som är mindre än 100% */
margin-left: auto;
margin-right: auto;
}
Uppgift: "Få dina länkar att byta färg när muspekaren hålls över dem."
Förklaring: "En pseudo-klass som :hover låter oss bestämma hur ett element ska se ut i ett speciellt tillstånd - som när musen är över det."
a {
color: #0077cc; /* Standardfärg för länken */
text-decoration: none; /* Ta bort understrykningen */
}
a:hover {
color: #ff6347; /* En röd-orange färg (Tomato) */
text-decoration: underline; /* Lägg till understrykning vid hover */
}
Mål: Introducera konceptet att webbplatser måste anpassa sig till olika skärmstorlekar.
"Har du tänkt på att t.ex. YouTube ser annorlunda ut på datorn jämfört med i mobilen? Varför är det så?"
"En datorskärm är bred (liggande/landskap), medan en mobilskärm är smal (stående/porträtt). Om en sida såg exakt likadan ut på mobilen skulle texten bli pytteliten och man skulle behöva zooma och scrolla i sidled hela tiden. Det är inte användarvänligt."
Responsiv design betyder att webbplatsens design "svarar" (responds) och anpassar sig efter skärmens storlek.
"Tänk på innehållet på din webbsida som vatten. Responsiv design ser till att vattnet (innehållet) kan flöda och anpassa sig oavsett om du häller det i ett brett akvarium (en datorskärm) eller i ett högt, smalt glas (en mobil)."
"Proffsen använder något som kallas Media Queries i CSS. Det är som att skriva en 'om'-sats: OM skärmen är smalare än 600 pixlar, DÅ ska rubriken bli mindre och menyknapparna ska lägga sig under varandra."
Genom att ändra webbläsarens storlek storleken på en responsiv sida (t.ex. Aftonbladet eller DN) kan man se hur innehållet flyttar på sig.
h1 {
transition: color 0.5s;
}
h1:hover {
color: rainbow;
transform: scale(1.1);
}
body {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
.box {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}