Webbkoda - CSS

CSS är HTMLs bästa vän. Det är först när du själv kan styra utseendet på de olika html-elementen som kraften i webben kommer till sin rätt.

Cascading Style Sheets

CSS är en förkortning för Cascading Style Sheets och om man skall översätta det lite kursivt så kan man kalla det för stilmallar.

Om man göra en skillnad på HTML och CSS så kan den se ut så här. Din hemsida innehåller fler olika typer av i form av text, bilder, länkar, videoklipp och kanske musik. Det är i HTML som du deklarerar vilket typ av innehåll du skall ha på hemsidan. CSS där emot styr hur innehållet visas upp.

Om vi tar exemplet med en rubrik så skriver du in i HTML vilken text skall stå i rubriken och ramar in den med en rubriktagg i detta fallet <h1> Det utseende som din rubrik har idag styrs från HTML men vill du förändra den så deklarerar man detta i CSS.

Selektorer

En selektor är den indikator i HTML dokumentet som vi vill förändra. Det kan vara en tagg utan vinkelparanteser. Selektorn kan förutom taggnamnet vara en Id eller en Class från HTML dokumentet. Om man vill sätta regler för en Id så sätter man ett # tecken före elektornamnet (hashtag, brädgård). Om man vill styra ett HTML-element med hjälp av en class så sätter men en punkt innan selektornamnet.

Engenskaper

De egenskaper man vill förändra hos ett HTML dokument sätter man upp mellan ”måsvingarna { }” Det kan vara allt från bakgrundsfärg, till typsnittsstorlek, radavstånd och mycket mer. Du avslutar en egenskap med ett kolon innan du sätter

Läs mer om olika egenskaper i css

Värde

Värdet är den enhet man fyller egenskap med. Om vill ändra färg på texten så är egenskap i detta fall ”color” och då är värdet ”red” för röd. Värdet varierar beroende på vilken egenskap man har.

Deklarationer

Hela uppsättningen med egenskap och värde blir tillsammans en deklaration.

f

Färger

Färgsystem, textfärg och bakgrundsfärg.

Färdsystem för webbsidor

Additiv färgblandning

Bra länkar

http://hex.colorrrs.com/

RGB värde

RGB är förkortning på engelskans Red, Green och Blue för Rött, Grönt och Blått. Genom att ange hur mycket av varje färg som skall blandas så kan man skapa alla nyanser man vill. Varje färg kan anges från 0 till 255 eller i procent.
Om man tillexempel skall ha en röd text så sätter man värdena (255, 0, 0). Eller om man vill (100%, 0, 0).

Hexadecimal

Att använda Hexadecimal som en metod för att sätta färger på webbsidan kommer ursprungligen från HTML när vi inte hade några möjligheter att sätta färger med någon annan teknik. En färg börjar med # sedan 6st täcken som kan bestå av siffrorna 1-10 och bokstäverna A-F.

Läs mer om Hexadecimal tal på Wikipedia

HTML-namn

Bakgrundsfärg

background-color

Typsnittsfärg

color

h

Text & Typografi

Arbeta med textens utseende för att höja användarupplevelsen

Typsnittsstorlek

font-size

Information

Giam fugitisquo ilit, sed que lacia sequuntinim volupta doluptate peribusdam atio tem hitaerum aut abo. Excerum simet faciis ut molupta et volorrovita ium fuga. Elitae omnime eum a vellenihil ius utempor maionem dolora quidele cuptatendis vidus nonsequis simoleseque volecum

Kodexempel

Resultat

Textfärg

color

Information

Med hjälp av css deklarationen color kan vi andra färger på texten på webbsidan. Man kan använda flera olika typer av värde för att ange färgen. Färgnamn, Hexan, RGB och RGBA.

Länkar

Flat UI colors
HTML Color Picker

Kodexempel

/* Kommentera i CSS */
p {
   color:red;
}

Resultat

Teckenavstånd

letter-spacing

Information

Om man vill ökar eller minskar utrymmet mellan tecken i en text på en webbsida så använder man deklarationen letter-spacing. Detta kallas för Kerning inom typografi.

Länkar
Kerning

Kodexempel

/* Teckenavstånd */
h3 {  
  letter-spacing:3px;
}
h4 {
  letter-spacing:-3px;
}

Resultat

Radavståndet

line-height

Information

För att öka läsbarheten kan det vara en bra idé att öka radavståndet på texten. Man kan både öka och minska radavståndet.

Kodexempel

/* Radavstånd */
p {  
  line-height:200%;
}

Resultat

Gemener & Versaler

text-transform

Information

Om du vill förändra hur så vida texten visas upp med gemener eller versaler så kan du ändra det med text-transform. Du kan sätta så att du får första bokstaven till versal.

Kodexempel

/* Text-transform */
h1 {text-transform:uppercase;}

h2 {text-transform:capitalize;}

h3 {text-transform:lowercase;}

Resultat

Textjustering

text-align

Information

Text på webbsidor är som standard vänsterjusterad, men vi kan också centrera eller högerjustera texten. Vi kan även marginaljustera texten så du får texten att både linjera mot vänster och högermarginal. Avståndet mellan orden blir då olika men du får raka spalter.

Kodexempel & Resultat

Kodexempel

See the Pen text-align by malmskold (@malmskold) on CodePen.

Understruken text

text-decoration

Information

Du kan på olika sätt dekorera texten för att betona och belysa text som du har i din text.

Ett vanligt användningsområde för denna deklaration är att man vill ta bort text-decoration i form av understrykningen som finns under länkar.

Kodexempel & Resultat

Kodexempel

See the Pen CSS: text-decoration by Webbkoda (@webbkoda) on CodePen.

Skugga på text

text-shadow

Information

Om du vill skapa en skuggeffekt på text på webbsidan så kan du använda sig av deklarationen text-shadow. Man kan ställa in skuggans egenskaper genom att flytta skuggan i X och Y led samt ställa spridningen och vilken färg skuggan har.

Kodexempel

/* Skugga på text */
h1 {
    text-shadow: 3px 4px 9px red;
}

Resultat

V

Block och Boxar

Skapa struktur med hjälp av block och boxar.

Bredd

width

Om man vill ökar eller minskar utrymmet mellan tecken i en text på en webbsida så använder man deklarationen letter-spacing. Detta kallas för Kerning inom typografi.

Länkar
Kerning

Resultat / Kodexempel

See the Pen doZrrp by Webbkoda (@webbkoda) on CodePen.

Höjd

height

Om man vill ökar eller minskar utrymmet mellan tecken i en text på en webbsida så använder man deklarationen letter-spacing. Detta kallas för Kerning inom typografi.

Länkar
Kerning

Resultat / Kodexempel

See the Pen doZrrp by Webbkoda (@webbkoda) on CodePen.

Boxmodellen

Ta fram innehållet med hjälp av boxmodellen

Vaddering

padding

Om man vill ökar eller minskar utrymmet mellan tecken i en text på en webbsida så använder man deklarationen letter-spacing. Detta kallas för Kerning inom typografi.

Länkar
Kerning

Resultat / Kodexempel

See the Pen doZrrp by Webbkoda (@webbkoda) on CodePen.

Ramlinje

border

Om man vill ökar eller minskar utrymmet mellan tecken i en text på en webbsida så använder man deklarationen letter-spacing. Detta kallas för Kerning inom typografi.

Länkar
Kerning

Resultat / Kodexempel

See the Pen ZGaPZN by Webbkoda (@webbkoda) on CodePen.

Marginal

margin

Om man vill ökar eller minskar utrymmet mellan tecken i en text på en webbsida så använder man deklarationen letter-spacing. Detta kallas för Kerning inom typografi.

Länkar
Kerning

Resultat / Kodexempel

See the Pen doZrEO by Webbkoda (@webbkoda) on CodePen.

Layout

Skapa en användbar layout för ditt innehåll

Layout

background

Med hjälp av CSS har du stora möjligheter att ställa in egenskaperna för bakgrundsbilden på din webbsida. Så filmen ovan för en genomgång.

Länkar
Övningsfiler för bakgrunder

Resultat / Kodexempel

See the Pen Webbkoda – Layout HTML5 by Webbkoda (@webbkoda) on CodePen.

Bilder och bakgrundsbilder

Använd CSS för att styra utseendet på bilder och bakgrundsbilder

Bakgrunder

background

Med hjälp av CSS har du stora möjligheter att ställa in egenskaperna för bakgrundsbilden på din webbsida. Så filmen ovan för en genomgång.

Länkar
Övningsfiler för bakgrunder

Resultat / Kodexempel

See the Pen Webbkoda – CSS bakgrunder by Webbkoda (@webbkoda) on CodePen.