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
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ä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
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
Länkar
Kodexempel
/* Kommentera i CSS */
p {
color:red;
}
Resultat
Teckenavstånd
letter-spacing
Information
Länkar
Kerning
Kodexempel
/* Teckenavstånd */
h3 {
letter-spacing:3px;
}
h4 {
letter-spacing:-3px;
}
Resultat
Radavståndet
line-height
Information
Kodexempel
/* Radavstånd */
p {
line-height:200%;
}
Resultat
Gemener & Versaler
text-transform
Information
Kodexempel
/* Text-transform */
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
h3 {text-transform:lowercase;}
Resultat
Textjustering
text-align
Information
Kodexempel & Resultat
Kodexempel
See the Pen text-align by malmskold (@malmskold) on CodePen.
Understruken text
text-decoration
Information
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
Kodexempel
/* Skugga på text */
h1 {
text-shadow: 3px 4px 9px red;
}
Resultat
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
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
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
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
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