2.1 Grunderna i CSS 3

Externt länkad CSS-fil och dess fördelar

Fördelarna med externa style Sheets är att man kan applicera den till ett flertal sidor. En av de största fördelarna är att man ändra flera sidor genom att ändra ett style-sheet. Det enda som krävs är att man länkar sidan till style-sheet genom <link> taggarna. En annan fördel är att man kan skriva dessa css koder i alla typer av text redigerare.

(När man använder sig av en externt länkad CSS-fil så har man designen av en hemsida i en fil. Den externa CSS filen innehåller information om hur sidan skall se ut, tex bilder, färger etc. Fördelarna med att använda sig av en extern CSS-fil är att man kan använda samma fil på flera olika sidor och få ett sammanhängande utseende på de olika sidorna samt att man slipper tänka på designen i varje individuell sida.)

Arv

Arv syftar på att de egenskaper som ges av "parent" taggarna vilket syfter på de egenskaper som finns i de öveordnade taggarn följer med i de underordnade.
<div>
<h2>
</h2>
</div>


Betyder att CSS som påverkar en tagg även påverkar de taggar som finns inne i den första taggen. Om man anger en egenskap till taggen: <div> så kommer även andra taggar som finns i <div> taggen påverkas som exempelvis om det finns en <h1> i div taggen så kommer även den ärva från <div>.

Cascade

Cascade syftar på att olika stilar som defineras i CSS kan "falla" eller cascade fån en stil till en annan vilket gör det möjligt att ha flera style sheets som kan användas i ett HTML dokument.

(Betyder att stilar kan "falla" (cascade) från en "style-sheet" till ett annat, så att flera "style-sheets" kan användas på ett HTML-dokument. Om en stil appliceras på en tagg flera gånger i olika nivåer så kan det bli konflikter. Det är dessa konflikter som Cascade, genom att bestämma hur webbläsaren ska lösa konflikten, med bestämdas regler, definera vilken egenskap det är som "vinner".)

Selektorer

Tag-selektorn

Tag- selektorn används för att omdefinera redan befintliga HTML taggar. Genom att välja denna möjlighet kan man ändra förbestämda egenskaper hos taggar som ex h1 som har en förbestämd storlek.

Attribut-selektorn

Attribut selektorn används för att välja element med specifika attribut. exempel: Har man en länk som man vill ska öppna i ett nytt fönster. Kan man välja att färglägga dessa länkar specifikt i css koden genom att skriva

Target speciferar var länken skall öppna sig, blank gör att den öppnar sig i en tom flik.

Klass-selektorn

Klass selektorn väljer ett eller ett flertal element med en klass attribut. För att välja en specifik klass i css koden börjar man med en punkt och skriver klassnamnet efter punkt(.class).
exempel

ID-selektorn

Allt som tillhör ett viss ID påverkas av selektorn, tex om man har en div med id="blue" så kan man ha satt blue till att ha en blå färg. Med ID selektorn kan man välja ett element som ska påverkas.

Child-selektorn

Child-selektorn definerar att element som matchas av den andra selektorn måste vara de direkta barnen av elementen som matchas av den första selektorn. Child selektorn är placerad mellan två css selektorer vilket gör den till en Child-selektor. Element som matchas av den andra selektorn bör vara Child till den första

Enheter

Absoluta enheter är de enheter som har fasta värden i relation till en annan enhet.

Inte idealt att ha om man ska skriva ut på skämrar efters om skärmstorlekar ändras väldigt mycket. Den absoluta längden är fix och kommer att utformas exakt som den storlek som utlovats.

• In = inches. (1 in = 96 px = 2.54 cm).
• Cm = centimeter.
• Mm = millimeter.
• Pt = points (1 pt = 1/72 of 1 in).
• Pc = picas (1 pc = 12 pt).
• Px = pixlar (1 px = 1/96th of 1 in). Pixlar är relativ till den enhet som tittar.

Relativa enheter är de enheter som har i relation till en annan enhet har ett relativt värde.

• em Relativt till elementets teckensnittstorlek (2em betyder 2 gånger storleken på den aktuella teckensnittet)
• ex ex I förhållande till x-höjden på nuvarande teckensnitt (sällan används)
• % I förhållande till moderelementet

Hur ett CSS-dokument är uppbyggt

Syftet bakom CSS skapande var att man enkelt ska kunns redigera ett HTML dokument och dess utseende och främst slippa ändra om på varje HTML dokument om man skulle vilja ändra tex text färg. Med CSS kan man ha ett separat dokument där man kan rediger, fixa och länka till flera olika HTML dokument. CSS reglerna består av en selektor och ett deklarationsblock man skriver vad som ska declareras.
Det finns flera sätt att bygga upp ett CSS-dokument och det finns inget riktigt "rätt" sätt. Man kan ha en externt länkad CSS eller en intern. CSS står för Cascading Style Sheets och meningen med CSS är att och problemet den löste var att man ska slippa designa och formatera hemsidor i HTML.