Egenskaper
NÄr du legger til en egenskap, som f. Eks color, med en verdi, som i color: green; sÄ lager du en sÄkalt declaration, og det er altsÄ CSS, og ikke HTML. Et eksempel pÄ det kan vÊre f. eks:
<h1 style="color: green;">Fargerike blomster</h1>
NÄr du har valgt egenskapen du vil ha mÄ du huske Ä avslutte med en kolon (color:), for Ä legge opp til verdien som skal brukes. Etter verdien mÄ du legge til en semikolon (color: green;) for Ä avslutte deklarasjonen.
Muligheter
Det er mange egenskaper der ute, eller CSS properties, som de heter. Om du vil endre pÄ bakgrunnen til et element kan du f. eks bruke background-color. Legg merke til at det brukes bindestrek mellom to ord.
Det kan da se sÄnn ut:
<h1 style="background-color: darkGreen;">GrĂžnn bakgrunn</h1>
SÄ lenge du avslutter med en semikolon, etter du har gitt en verdi til en spesifikk egenskap, sÄ kan du ogsÄ legge til flere, om du vil det. Som for eksempel:
<h1 style="color: hot-pink; background-color: darkGreen;">Rosa skrift pÄ grÞnn bakgrunn</h1>
Du kan legge til egenskaper pÄ alle(?) slags elementer. Ikke bare overskrifter som jeg har brukt i det tilfellet her. Dersom du har skikkelig lyst pÄ grÞnn tekst kan du f. Eks skriver:
<p style="color: green;">Denne teksten vil da vĂŠre grĂžnn</p>
Om du bÄde vil at teksten skal vÊre grÞnn, men at den ogsÄ skal stÄ i kursiv sÄ kan du skrive det i samme setning:
<p style=«color: green; font-style: italics;»>Denne teksten er bÄde grÞnn og kursiv</p>
Hvordan du slipper Ă„ gjĂžre samme endring mange ganger
I et html-dokument har du en tag som heter <head>. Mellom den introduserende og avsluttende head-tagen kan du legge en <style>-tag:
<head>
<style>
</style>
</head>
PÄ den mÄten dekker du bordet for de elementene som du vil pÄvirke. Det er som Ä si at «Jeg har tenkt til Ä endre utseendet pÄ fÞlgende elementer», ogsÄ mÄ du bare definere innafor de to.. tagene (?) hva som faktisk skal pÄvirkes. For eksempel vanlige tekstavsnitt vil da se sÄnn her ut:
<head>
<style>
p {
font-family: cursive;
}
</style>
</head>
Da gjelder de samme reglene som med egenskaper og verdier, som vi var innom tidligere, hvor du mĂ„ si hva du vil endre pĂ„ â font-family: og pĂ„peke hva endringen skal vĂŠre â font-family: cursive;.
PĂ„ den mĂ„ten lager du en sĂ„kalt css rule, som betyr at den pĂ„virker alle de omrĂ„dene hvor du benytter deg av et tekstelement som er definert som en paragraf â <p>.
Du kan sÄklart legge til flere deklarasjoner, som det heter, sÄ lenge de ligger pÄ hver sin linje, som for eksempel:
<head>
<style>
h2 {
background-color: blue;
color: white;
font-weight: bold;
font-family: Arial;
}
I tilfellet over kan vi si at h2 er en selector, fordi vi mÄ si i fra hva stilendringene skal pÄvirke. Stilendringene kalles deklarasjoner, mens elementet de pÄvirker kalles for selectors, hvis jeg har forstÄtt riktig..
Jobb smartere
Du kan altsÄ bake inn all stilendringene dine i en html-fil, men da blir det fort rotete. Det er derfor man pleier Ä skille de fra hverandre, og heller referere til en fil som oftest heter styles.css, som du linker til i html-fila.
Grunnleggende
FÞrst mÄ vi tenke pÄ plasseringa. css hÞrer hjemme mellom <head>-tags i en html-fil.
<html>
<head>
<style>
p {
background-color: teal;
}
</style>
<head>
<body>
</body>
</html>
Der kan du fint plassere alt av bakgrunnsfarger, stÞrrelser, og valg av skrifttyper ogsÄ videre, men for Ä gjÞre det ryddigere bruker vi heller en referanse til en egen fil hvor du skiller ut all cssen. Som oftest kalles den fila style.css.
«Jobb smartere»-Þyeblikk
Det du gjÞr da er at du lager en spesifikk fil kun for stylinga av sida, som kalles et style sheet. CSS er nemlig forkorta fra «Cascading Style Sheet». Hvor «Cascading»-biten av begrepet handler om at alle stilvalgene dine, (eller «deklarasjonene», som de sÄ fint kalles) kommer én etter én.
I praksis vil HTML-fila di da se sÄnn ut:
<html>
<head>
<link rel=«stylesheet» href=«style.css»>
</head>
<body>
<h1>Hello world</h1>
<p>Se pÄ meg du! Lager style sheets uten problemer<p>
</body>
</html>
Det du gjĂžr da er Ă„ si til koden din «Hei du! Husk at du skal ha med deg et stylesheet, du finner det her borte». Da bruker vi <link>-tagen for Ă„ peke i riktig retning, samtidig som vi definerer relasjon den fila har, nemlig at den er en stylesheet â âŠrel=«stylesheet»..
Klasser
Det her er tett knytta til det jeg nevnte tidligere om hvordan du slipper Ă„ gjĂžre samme endring mange ganger. Den eneste forskjellen er at du kan vĂŠre mer selektiv.
Hvis du lager en punktliste f. Eks (en «ordered list» altsÄ, som forkortes til <ol>) sÄ kunne du sagt at hvert punkt som defineres med <li> skal ha gul bakgrunn. Da kunne du definert det pÄ denne mÄten:
<head>
<style>
ol {
background-color: yellow;
}
</style>
</head>
<body>
<ol>Handleliste>
<li>Wraps</li>
<li>Mango</li>
<li>Koriander</li>
<li>Chili</li>
<li>Lime</li>
</ol>
</body>
Hvis du ville hatt mer kontroll over den, og heller fargelagt annenhvert punkt, sÄ kunne du skrivd det sÄnn her:
<head>
<style>
.yellow-element {
background-color: yellow;
}
</style>
</head>
<body>
<ol>Handleliste>
<li class=«yellow-element»>Wraps</li>
<li>Mango</li>
<li class=«yellow-element»>Koriander</li>
<li>Chili</li>
<li class=«yellow-element»>Lime</li>
</ol>
</body>
Ikke det mest sexy eksempelet akkurat, men poenget er bare at du har mer kontroll, og kan style spesifikke elementer, i stedet for Ä dra alle over en kam. Feilmeldinger kunne nok vÊrt et bedre eksempel. Da kunne jeg formidla pÄ en eller annen kodemÄte at «Hvis man trykker pÄ en ikke-eksisterende link skal du fÄ en rÞd feilmelding som sier at det har skjedd noe feil. Om du derimot har meldt deg pÄ nyhetsbrevet f. Eks sÄ skal jeg bekrefte at alt er i sin skjÞnneste orden, og informere om at det gikk bra.»
MĂ„ten du lager en klasse pĂ„ er at du starter med et punktum og fĂžlger opp med hva den «klassen» skal hete â .yellow-element, etterfulgt av en egenskap og en verdi:
.yellow-element {
color: yellow;
}
En klasse kalles ogsÄ en «selector», siden vi aktivt peker ut hvilke elementer som skal pÄvirkes av et stilvalg.
SpÞrsmÄl
Hva er forskjellen mellom en tag selector, ID selector, og en class selector? For jeg har sett at det er noen som defineres ved Ă„ skrive
body {}og andre som.yellow-elementog andre igjen som#capital-letter
ID selector
For Ă„ gjĂžre endringer pĂ„ veldige spesifikke ting sĂ„ kan du bruke en ID selector. I CSS-fila di da definerer du hva slags stilendring det skal vĂŠre, og hva den regelen skal hete. I dette tilfellet kunne jeg tenke meg Ă„ gjĂžre tekstfargen blĂ„ der hvor bandet âEiffel 65â stĂ„r nevnt (i HTML-fila). Da skriver jeg det her:
.text {
color: blue;
}
I HTML-fila mi mÄ jeg da spesifisere at den setningen skal hente stilendringene fra regelen som heter .text:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="text">Eiffel 65</p>
</body>
</html>
Og voilå! SÄ har du blÄ tekst.
Tag vs attribute
Hva er forskjellen mellom en
style tagog enstyle attribute? Og nÄr er det du vil bruke den ene framfor den andre?
NĂ„r bruker du en
h1tag selectorframfor en.h1`class selector?NĂ„r du vil velge alle
h1-elementene pÄ en side bruker du en tag selector. En «class selector» brukes heller for Ä definere en spesifikk type stilendring du skal bruke i ny og ne.
Border
I designverden snakker vi ofte om «stroke» eller «outline». I kodeverden derimot sÄ kalles det «border». MÄten du gjÞr en ramme synlig pÄ er Ä skrive solid, gjerne etterfulgt av antall pixler for Ä definere hvor tjukk den skal vÊre.
Du kan ogsÄ gjÞre flere stilendringer pÄ en ramme i samma slengen, uten Ä ha behovet for Ä separere dem pÄ noen mÄte, som i dette eksempelet:
border: solid 3px aquamarine;
Forskjellen mellom margin og padding
- Marginer er the space outside an elements border which defines how far it is from another element
- Padding derimot er «the space between the content and the border of an element»
- Padding kan defineres pÄ en forkorta mÄte hvor du ramser opp Þnsket padding pÄ alle fire sidene (topp, hÞyre, bunn, venstre), i den spesifikke retningen, siden det gÄr med klokka og starter pÄ toppen rundt en firkant.
- NÄr du skriver det forkorta pÄ den mÄten trenger du ikke definere pixler som mÄleenhet, men kan heller skrive:
h3 {
padding: 4 16 4 16;
}
Samme tilnÊrminga fungerer ogsÄ med margins:
button {
margin: 4 16 4 2;
}