CSS Flashcards
Hva står CSS for?
Cascading Style Sheets
Hvordan henvise til et CSS-script?
link href=”style.css” rel=”stylesheet”
Hvordan inkludere inline CSS?
style=”xxx”. f.eks. style=”color:blue;”
hvordan ser p style=”color:blue” ut i normal CSS?
p {
color: blue;
}
Hva er en CSS-selektor?
The beginning of the ruleset used to target the element that will be styled.
hva er ulempen med inline styling?
Da må du repetere style for hvert element hvor du skal bruke det
hvor plasserer du et internt stylesheet?
Inne i head-taggen
hvilken tagg brukes for å linke til en ekstern CSS?
link-taggen
hvilket attributt i link-taggen brukes for å si at dette er et stylesheet?
link rel=”stylesheet”
Hva gjør CSS-selektoren * (stjerne) ?
Velger absolutt alt. F.eks. setter teksten for alle elementer
hvordan lager du en CSS-selektor for en klasse?
.navn {
}
Hvordan kan man henvise til flere CSS-klasser fra samme class-attributt?
med mellomrom mellom hvert navn. F.eks. p class=”a b c”
.a {
}
.b {
}
.c {
}
hvordan lager du en CSS-selektor for en id?
navn {
}
hvordan lage en selektor for f.eks. attributtet href?
[href] {
}
Hvordan lage en CSS-selektor for alle attributter som har ordet “winter” i seg?
img[src*=’summer’] {
height: 100px;
}
Hva er en CSS pseudo-klasse?
En klasse som referer til en handling (f.eks. mouseover). Du bruker kolon for å henvise til dem. f.eks. p:hover {
}
Hva er best practice for å style elementer med CSS?
Begynne med stylingen som har minst spesifisitet, slik at det er lettere å endre
hvilken CSS-selektor velges hvis det er flere i konflikt?
den mest spesifikke. F.eks. en id-selektor vinner over en klasse-selektor
hvordan henvise til H1 med klassen “special” spesifikt?
h1.special {
}
CSS, hvordan vise til descendant fra “li” under klassen “main-list” ?
.main-list li {
}
Hvordan kan du skreddersy tekst med CSS?
font-family, font-size, font-weight, text-align
Hva er font-weight?
Hvor tykk teksten er. f.eks. font-weight: bold
Hva gjør denne:
.caption {
}
css-selektor for en klasse som heter “caption”
Hvordan styre gjennomsiktighet?
opacity: 0.75 (setter gjennomsiktigheten til 75 %)
hvordan velge at en setting i en selektor skal overstyre alt annet?
!important. F.eks. p {
color: blue !important;
}
hvordan sette størrelsen på et bilde?
img {
height:150px;
}
fargelegg alle p-elementer av klassen “time”
p.time {
color: red;
}
Hva viser styles-tabben?
Den viser all CSS-koden som gjelder for det valgte elementet
Hvordan kan man inspisere et element uten å klikke på linker, interaktivitet, etc..
Velge bildet av musepekekeren i dev-konsollen
Hvordan kan du teste javascript direkte?
skrive inn koden i “console” i devtools
Hvordan finner du ubrukt kode?
CTRL+SHIFT+P når du er inne i devtools. skriv Coverage. Trykk på “stop recording coverage” når du er ferdig
Hvor kan du se og manipulere cookies i devtools?
Gå til applications-cookies
Hvorfor bør man bruke f.eks. VS Code og ikke bare notepad++?
fordi VS Code har autocompletion og egenskaper som gjør det mye raskere å utvikle kode
Hva bør man helst gjøre hvis man skal fargelegge en farge som gjelder for et enkelt element?
For ryddighetens skyld - ikke bruke inline css med style=…, men legge inn en id=xxx, og henvise til den med #id { … } fra CSS-filen
hva er negativt her? div class=article. Når behøver du å gjøre noe sånt?
det finnes en semantisk tagg allerede som heter article. Du behøver å gjøre dette hvis du har flere artikler på samme side med forskjellig stil.
Hva er forskjellen på semantisk og ikke-semantisk CSS?
Ikke-semantisk formidler ikke hva klassen egentlig beskriver F.eks. “grid row” er ikke-semantisk. “product” er semantisk.
Hvordan gjøre noe mer semantisk?
- Ord istedenfor forkortelser
- Du skal umidellbart kunne lese hva som skjer. Ikke måtte nøste opp CSS for å se det.
- Det skal være klart hva som beskrives. F.eks. bakgrunnen til et element
- Du bør prøve å ha enkel og kort HTML som ikke er lang på grunn av komplekse CSs-navn og sammensetninger.
Hvorfor bruke semantisk CSS?
Lettere å teste med automatisk regresjonstesting, mindre vedlikehold, lettere debugging, i tråd med standarder, tilstander kan styles lettere, lettere å lese, lettere å lage en responsiv side, lettere å finne ting
Hva sier heksadesimalen som beskriver en farge i CSS?
Rød + Blå + grønn
f.eks. #8FBC8F
hvordan kan du definere noe som RGB istedenfor hex?
h1 {
color: rgb(23, 45, 23);
}
hvor mange farger kan RGB representere?
256 * 256 * 256 = 16,777,216
hva er HSL?
hue saturation-lightness
gi et eksempel på hue saturation-lightness, og forklar hvordan det fungerer
color: hsl(120, 60%, 70%);
120 - antall grader på et fargehjul.
60 % - hvor intens fargen er
70 %: Hvor lys fargen er
forklar color: hsl(120, 60%, 70%);
120 - antall grader på et fargehjul.
60 % - hvor intens fargen er
70 %: Hvor lys fargen er
hvorfor bruke HSL istedenfor RGB?
Fordi det er lettere å justere lys og intensitet
hvordan styre gjennomsiktigheten til hsl?
hsla(… , tall mellom 0 og 1)
hva er ekvivalent til gjennomsiktig bakgrunn, eller rgba(0, 0, 0, 0)
color: transparent;
rgba(0, 0, 0, x) - hva er x?
alpha, eller transparens. Mellom 0 og 1
Hvordan kan du gjøre en tekst på et bilde gjennomsiktig, sånn at du ser bildet i bakgrunnen litt mer?
f.eks. color: rgba(0,0,0,0.7) gir 70 % transparent med svart tekst.
hva betyr f.eks. header:before eller footer:before?
legger til styling før elementer. Du kan også bruke after. Et eksempel er hvis du vil legge et hjerte foran alle linker: a:before { content: “heart”; }
Hva peker “.reds .base-color” egentlig på?
det som ligger under class=”reds” og class=”base-color”
Hvilken font er blitt brukt i skriftlig materiale i årevis?
Serif
Hva er spesielt med Serif?
Serif er en samling med fonter med samme karakteristika.
Serif har detaljer ved begynnelsen og slutten på hver bokstav. Det har ikke sans-serif.
F.eks. en A har streker under hver linje mot neste bokstav. I sans-serif, ser du ikke disse linjene.
Hvordan setter vi fonten i CSS?
font-family
hvordan angir du fallback font Times New Roman hvis Arial ikke er tilgjengelig?
font-family: ‘Arial’, ‘Times New Roman’;
hva kan man gjøre med fallback-font hvis man skal sikre serif?
Legge til nøkkelordet “serif” som den siste fallback-fonten.
gi eksempel på to serif-fonter
Casion, Georgia, Times New Roman
hvilke verdier kan font-weight ha?
lightest, bold, normal, lighter, bolder, boldest. Kan også ha et tall fra 1 (lightest) til 1000 (boldest). 700 er det same som bold
hvordan sette noe i kursiv?
font-style: italic;
Hvorfor har man behov for å sette elementer i uppercase/lowercase med CSS?
F.eks. for nyheter hvor man vil style viss tekst til store bokstaver.
Hvordan sette en klasse til store bokstaver?
.minklasse {
text-transform: uppercase;
}
når trenger du word-spacing og letter-spacing?
Når du f.eks. skal pynte på titler, og trenger å vise mellomrom mellom ordene
hvordan angir du word-spacing og letter-spacing?
i antall pixler eller i antall enheter. word-spacing: 2px;
eller 0.3em. Det anbefalte er enheter.
hvorfor er em anbefalt istedenfor pixler? f.eks. word-spacing: 0.3em; ?
størrelsen kan settes basert på størresen på fonten
Hva er text-align: justify?
Det betyr at du får avsnitt hvor teksten blir helt rett i kantene. Det er ikke noe tekst som blir ujevn på enkelte linjer. Den blir strukket og komprimert sånn at alle linjer er like lange. Du ser dette i vitenskapelige tekster.
Hva kan man bruke for å inkludere en ekstern font?
@font-face
gi et eksempel på @font-face hvor du har lastet ned din egen font og vil bruke den på siden din
@font-face {
font-family: ‘GlegooBanner’;
src: url(‘../fonts/Glegoo-Regular.woff2’) format(‘woff2’),
url(‘../fonts/Glegoo-Regular.woff’) format(‘woff’),
url(‘../fonts/Glegoo-Regular.ttf’) format(‘truetype’);
}
gi en oppsummering av hva du kan gjøre med CSS og typografi
font-family for å velge font (serif vs. ikke serif),
@font-face som lar deg inkludere eksterne fonter. Du kan også med link for å ålinke til kule google-fonter.
word-spacing, letter-spacing og text-align for å styre mellomrom. F.eks. når du skal lage en tydelig tittel.
text-align, hvor text-align justify strekker og komprimerer teksten så alt passer inn
font-style som lar deg sette f.eks. tekst i kursiv. font-weight for å sette hvor bold en tekst skal være,
de store forbokstavene du ser i forfattertekster - hvordan ble den lagt inn med CSS?
line-height: 0.87;
padding-right: 1.4rem;
ble satt for egen klasse for en forbokstav
Hvordan lage en sirkel av et bilde?
border-radius: 60 % (viser bare 60 % av radiusen)
hvordan lage en zoome-effekt med CSS og java-script?
endre på border-radius dynamisk
Hvordan lager du en sirkel med CSS?
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
opacity: 0.5;
}si at du har en sirkel som har id=”red”. Hvordan setter du posisjonen på denne sirkelen?
#red {
background-color: rgb(255, 0, 0);
position: absolute;
left: 50px;
top: 100px;
}legge 100px pustemargin foran en boks?
margin-left: 100px;
Hva består boksmodellen til CSS av?
border, margin, padding, width og height
Hva er padding i boksmodellen?
Pusterommet mellom innholdet i boksen og boksens grenser
hva er margin i boksmodellen?
pusterommet mellom det som er utenfor boksen og andre elementer
hvilke to settinger definerer “boksen” til et element?
height og width
Hvilke tre ting definerer grensa til en boks? Gi et eksempel
bredde, tykkelse og farge. BTF
p {
border: 3px solid coral;
}
Gi et eksempel på border-tykkelse solid
p {
border: 3px solid coral;
}
hva er default border-setting?
border: medium none default_farge;
hvordan lage en stiplet kantlinje rundt et p-element?
p {
border: 1px dotted black;
}
hva er forskjellen på border-radius 50 % og border-radius 15 px?
15px vil bare lage en firkant med litt runde kanter. 50 % vil lage en perfekt sirkel
Hvilke typer padding har du?
padding-top
padding-right
padding-bottom
padding-left
Hvordan få en boks til å likne på en knapp?
padding: 14px; (lager pusterom mellom teksten og utkanten)
border-radius: 3px;
hvordan kan du spesifisere padding top, right, bottom og left på samme linje?
p.content-header {
padding: 6px 11px 4px 9px;
}
hva gjør følgende CSS?
p.content-header {
padding: 5px 10px 20px;
}
setter padding i midten (høyre og venstre) til 10. 5 på toppen, og 20 nederst
hvordan bare sette padding for høyre og venstre?
p.content-header {
padding: 5px 10px;
}
hva gjør padding: 20px 30px;
setter top/bottom og left/right
hva gjør margin: 0 auto; ?
setter top og bottom margin til 0px, og justerer innholdet til å bli i midten automatisk
#img-one {
margin-right: 20px;
}
#img-two {
margin-left: 20px;
}
hva er totalt pusterom mellom img-one og img-two?
hva hadde skjedd hvis vi hadde hatt følgende?
#img-one {
margin-bottom: 30px;
}
#img-two {
margin-top: 20px;
}
40
med margin-bottom og top til 30px vs. 20px, vil pusterommet mellom boksene være 30px, fordi det ikke fungerer likt vertikalt (det “kollapser”).
Hva gjør overflow?
kontrollerer hva som skjer med det som går ut av boksen
hvilke overflow-attributter har man?
hidden: skjuler det som går ut
scroll: legger til scrollbar
visible: default - vil bare gjøre at teksten går ut over boksen.
(HSV)
hva er user agent stylesheet?
default stylesheet som brukes av nettleseren
hvordan sette til user agent stylesheet for margin og padding?
margin: 0;
padding: 0;
hvordan styre synlighet?
visibility - enten hidden, visible eller collapse
Hva skjer med height i dette eksempelet?
h1 {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
}
den faktiske height er 222px (200 + padding2 + border2)
hva er box-sizing? Hva er default box-sizing?
en property i CSS for å styre hvordan boksmodellen oppfører seg. Default er content-box.
Hva er alternativet til default content-box?
å sette box-sizing til border-box. For eksempel sånn her:
* {
box-sizing: border-box
}
bilde: To bjørner
det vil gjøre at width og height alltid blir det samme
Hvor kan du undersøke boksmodellen i devtools?
ctrl+shift+j, velg elements->computed
hvis du sender to pixel-argumenter til margin….
sender du vertikalt (top og bottom) og så horisontalt (left og right). Dvs. margin 30px 40px gjør marginen 30px over og under, og 40px på høyre og venstre side
Hvilke fem verdier kan position ha?
absolute, static, sticky, relative, , fixed (ASSREF)
hvilken verdi for position er default?
static
hvis man har satt position: relative, hva kan man ytterligere gjøre?
top: xx, left: xx, bottom: xxx, right: xxxx
hva gjør position: absolute?
Alle de andre elementene på siden vil oppføre seg som om elementet ikke er der.
la oss si at du skal lage en meldingsboks som skal ha samme posisjon alltid. Hvilken position-setting må du bruke?
position: absolute
vi kan bruke position: fixed hvis vi vil at meldingsboksen skal bevege seg etter brukeren når han/hun scroller
hva er forskjellen på “fixed” og “absolute” for position?
“fixed” vil gjøre at elementet beveger seg når vi scroller. “absolute” vil la elementet stå et fikset sted.
hvordan oppfører position. sticky seg?
når man setter et element til position: sticky, vil det stå stille, helt til man scroller ned til en annen del av siden. Da vil det gradvis glide vekk. F.eks. spørsmål viser på samme sted til vi har scrollet ned
hva er z-indeks?
kan brukes for å kontrollere hvor langt fremme et element skal ligge i forhold til andre. Hvis man bruker z-indeks på et element, kan man unngå at det gjemmer seg bak andre elementer.
er I et inline element?
Ja, fordi elementet som blir kursiv ligger pås amme linje med annen tekst, så det kan dele linje med andre elementer.
hva er block-level -elementer. Gi noen eksempler
elementer som har en blokk rundt seg. De legges ikke direkte inn i linjen, men forholder seg til en blokk. Eksempler er h1, p og div.
hva er display: inline-block?
kombinerer både inline og block. f.eks. tre diver ved siden av hverandre som både er en linje og en blokk!
tre diver ved siden av hverandre som både er en linje og en blokk! Hva er dette?
display: inline-block
hva gjør display: inline-block med et li-element?
Legger alle li-elementene ved siden av hverandre på samme linje
hva gjør float right og left?
Flytter elementer så langt til venstre eller høyre som mulig
Hvordan flytte elementer så langt til venstre eller høyre som mulig?
float: left eller float:right
hva er det float-elementer må ha?
width. Ellers vil det ikke fungere. f.eks. width: 50 %
hvordan styrer du elementer som kan bumpe inni hverandre når du bruker float?
clear
clear: left, right, both eller none
forklar clear: right;
høyre siden av elementet, kan ikke kollidere med samme type element.
Hva er forskjellen på inline-block og inline?
inline-block lar deg også sette width
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
width: 100%;
}
footeren nekter å vise seg. forklar hva som mangler her for at footeren skal vises statisk på bunn
bottom: 0px;
Hva er formålet med fargehjulet?
et verktøy brukt av designere for å visualisere sammenhengen mellom farger
hvilke tre fargegrupper har fargehjulet?
primær, sekundær og tertiær
Hvilke er primærfargene i fargehjulet?
rød, blå og gul
hvilke tre farger former alle de andre fargene i fargehjulet?
rød, blå og gul
hvordan er sekundærfarger laget?
ved å mikse to primærfarger
hvordan lages tertiærfargene?
ved å mikse primære og sekundære farger
Hvorfor er HSL den riktige måten å sette farger på ?
- CSS sine nøkkelord gir oss bare noen få farger
- RGB og heksadesimaler er ikke intuitive nok. For eksempel hvis du skal gjøre en farge lysere
- HSLA er et semantisk system, og fokuserer på meningen med justeringene du gjør.
Hva er H i HSL?
Hue. Er antall grader rundt fargehjulet
Hva er S i HSL?
Saturation, eller metning (renhet). 0 % metning er en gråskala. 100 % metning er selve fargen.
hva er L i HSL? Hva er 0 % L, og 100 % L?
Lys. 0 % L er svart. 100 % er hvitt.
Hva er en varm farge?
En farge som varierer mellomm gul og rød (oransje er noe mellom). Varme farger kan kommunisere en form for aggresjon
Hvilke grader på fargehjulet varierer varme farger mellom?
0 (rød) og 60 (gul)
Hva er kalde farger?
farger som varierer mellom blå, lilla og grønn. Gråfarger faller også inn i denne kategorien.
Hva kalles fenomenet som skjer når hvit brukes på en farge?
“tint”. Lysheten på en hue blir endret.
hva skjer når svart tilføres en farge?
skygge
desto høyere L i HSL, hva skjer da?
desto mer lys
Hva er fargekontrast?
Farger som er lengre unna hverandre på fargehjulet, har større kontrast enn farger som er nærme hverandre på fargehjulet.
Hvorfor ønsker du høy kontrast?
Tekst er lettere å lese
hvilke color schemes har du?
monokromatisk, triadisk, analoge og komplementære
komplementær: Motsatte sider av fargehjulet - hvis man trekker en rett linje gjennom. F.eks. oransje og blå.
triadisk: tre farger som består av en 45 graders trekant i fargehjulet.
monokromatisk: Ulike variasjoner av samme farge
analogt: Farger som ligger ved hverandre på fargehjulet.
hva er viktig for et monokromatisk fargescheme?
det er viktig å velge mye lysere og mørkere skygge av hovedfargen, slik at du får høy kontrast.
Ulike variasjoner av samme farge. Hvilket color scheme er dette?
monokromatisk
hva er harmoni i fargeteori?
Å være konsistent på hvilke farger vi bruker
Hvilke farger bør vi tildele ulike seksjoner av innholdet?
ulike farger, sånn at vi ser hvordan de er grupper.
Hvor er komplementære farger normale å bruke?
I logoer og drakter. F.eks. Minnesota Vikings er gule og lilla. Hvis det er en seksjon du ønsker at brukeren skal fokusere på, bør du bruke komplementære farger
hva er best practices for fargelegging?
- vær sparsom på neon
- unngå vibrerende farger - to komplementære farger som har høy metning. Det ser du f.eks. når du ser rød og grønn på
julekort. For å unngå er det normalt å legge et hvitt kort i mellom. - unngå kombinasjoner som ikke har kontrasst (f.eks. noe veldig lyst på toppen av noe veldig lyst)
hvilke tilstander farger du for en knkapp?
mouseover og når knappen er skrudd av
hvilke farger brukes for sletting og når noe går galt?
rødt
hva er ulempen med svart tekst på hvit bakgrunn?
kontrasten kan bli så stor at øynene blir slitne av å konsentrere seg. Prøv noe annet, f.eks. hvit tekst på svart bakgrunn, eller gråere tekst på hvit bakgrunn
Hva er nøytrale farger?
Farger med lav lysstyrke og metning
hvordan benytter google seg av whitespace?
de lager masse rom mellom alt, sånn at alt fokuset er på søkeboksen
hvordan kan du innføre mer whitespace?
ved å innføre mer padding
hva slags fargeblindhet kan man oppleve?
rød/grønn, blå/gul, monokromatisk (kan ikke se farger i det hele tatt)
hvordan håndterer du rød/grønn for fargeblinde?
hvis brukt for feilmelding, bruk symbolet “x”, og et sjekkmerke for suksess istednefor grønn
Hva oppdaget du at du måtte gjøre når ekstern CSS ikke refreshet seg i jinja-prosjekt?
bruke ctrl+shift+r for hard refresh i nettleseren.
Hva er anbefalingene for UI-design?
Select a dominant brand color and supporting accent colors
Use contrast to define sections and differentiate actions
Use semantic colors for error and success messages
Incorporate default colors for text and backgrounds where needed
Neutral colors can provide good contrast
Keep users in mind when selecting color
hva slags bakgrunn er anbefalt på en webside?
en nøytral bakgrunn
hvordan skiller man mellom primære og sekundære knapper i fargelegging?
de sekundære fargene har farge-themen (f.eks. nyanser av oransje), mens de primære gjerne har lysegrønn - noe som skiller dem ut fra alt andre og forteller at dette er distinkte ting man bør ha fokus på.
hvilken side kan hjelpe deg med valg av fargetheme?
cloud.cloudfare.design
gi et eksempel på hvordan plassere tekst midt på et bilde
lag to nøstede diver, hvor den ytterste peker på klassen “locationcontainer”, og de innerste itemene peker på klassen “location” (kan være flere av dem).
.location-container {
position:relative;
}
.location {
top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); background-color: black;
}
