CSS

Cascading Style Sheet (CSS) är ett formateringsspråk som hjälper till att beskriva hur informationen ska formateras och visas på exempelvis en skärm.

Det finns olika sätt att skriva css-kod:

I en extern fil, som man döper till filnamn.css
I en <style>-tagg. Som då oftast placeras i början (<head>) på en webbsida.
Som ett attribut inuti en formaterbar tagg (t.ex <em style="color: green;">) ger en grön text inom en <em>-tagg.

Efterssom formateringen av alla element på en sida tenderar att bli ganska omfattande så är metoden att lägga all css-kod i en extern fil att föredra. I html-dokumentet så kan vi då i <head> placera en länk till vårat css dokument med hjälp av <link href="css/cssfilen.css" type="text/css" rel="stylesheet" />

En css-fil är en textfil (med ändelsen .css) där man deklarerar hur olika element ska visas. Filen bör inledas med @charset "utf-8"; på den första raden för att definera vilken teckenkodning som används, men i övrigt så följer man en enkel mall för att göra varje elements formatering tydlig.

CSS har ett bestämt utseende för hur man väljer något som ska formateras och sedan hur detta ska formatteras. Ta en titt på följande:

p {
  color: yellow;
  background-color: blue;
}

Den är delen är det som kallas för Selector (väljare, Det som ska formateras) och kan ha en hel del komplicerade regler för att underlätta valet av område som ska påverkas.

Den här delen kallas för Declaration (formateringsregler som ska gälla) beskriver vilken typ av formatering som ska ske på det som valts.
I det här fallet så kommer alla paragrafer (p) att få gul text på en blå bakgrund.

Deklarationen delas in i två delar:
color: yellow; background-color: blue;

Där den här delen kallas Property (egenskap) och den här delen kallas Value (värde).

Det finns en mängd med olika selektorer, egenskaper och värden som man kan ange i CSS. Det finns dem som hanterar hur saker och ting ska se ut, men också egenskaper som hanterar var någonting ska finnas och vilken storlek de ska ha. Dessutom kan dessa kombineras på en mängd olika sätt beroende på vad man som skapare egentligen vill visa. Vi kommer att titta mer på en hel del av dessa egenskaper i de följande uppgifterna och varje uppgift kommer att försöka fokusera på en viss aspekt av CSS. Vi kommer att börja med att titta på färger, storlekar och teckensnitt i övningarna på den här sidan.

Här är ett exempel på hur en enkel CSS-fil kan se ut:

Exempel på css-fil


					  
						  @charset "utf-8";
						  /* Sätt grundformatering på alla blockelement */
						  * { 
							  margin: 0px;
							  padding: 0px;
						  }
						  body {
							  background-color: salmon;
							  margin: 300px;
						  }
						  /* Detta gör att alla dessa (h1-h3)taggar får samma font och färg */
						  h1, h2, h3 { 
							  font-family: Arial;
							  color: blue;

						  }

Bakgrunden blir laxrosa. Alla rubriker h1, h2, och h3 blir i Arial och blå. Samt att hela bodyn får en bred kant. Se ett exempel på ovanstående formatering.

För att välja vad som ska formateras så kan man antingen skriva taggens namn (I exemplet body och h1, h2, h3), eller använda sig av någon annan typ av selektor (Läs om selektorer på sid 237-238).

Jag har författat en (förhoppningsvis) enkel förklaring på de olika typerna av selektorer man kan använda sig av.

Läs kapitel 11 - Color (sid 247-262) och ta hjälp av internet för att besvara följande fråga om färger.

Färg på text sätts normalt med egenskapen color och bakgrundsfärger på blockelement sätts med background-color. Det finns även andra varianter på hur man sätter färg på element eller delar av olika element men vi kommer att titta på dessa i senare delar.

Här ska ni beskriva att ni kan en del om färger och hur man kan använda dem på olika sätt på en hemsida.

Beskriv vilka olika metoder (minst fyra stycken) man kan använda för att ange färger på en hemsida. Beskriv på vilka sätt de skiljer sig.
Förklara och ge exempel på vad saturation och lightness är och hur de påverkar färgen när man använder hsl eller hsla.
Vilka metoder finns det för att göra element och färger genomskinliga? Hur kan man göra för att se till att färgerna visas rätt även i webbläsare som inte stöder genomskinlighet?

Kapitel 12 (Sid 265-299) handlar om hur man kan byta teckensnitt (font) samt formatera text på olika vis. Dels hur man väljer teckensnitt och hur man modifierar detta teckensnitt. Ni ska också ta en titt på olika sätt att sätta storleken på ett teckensnitt. Dessa måttsystem kommer att påverka hur era sidlayouter kommer att fungera lite senare då vi börjar titta på det.

Undersök hur man använder olika typsnitt och hur man ändrar hur texten ska se ut på en hemsida. Undersök hur man kan använda Adobes fontgalleri för att sätta en font och hur man kan ladda ner en egen font till exempel från DaFont eller 1001Fonts.

Förklara begreppen serif, sans-serif och monospace. Samt underbegreppen weight och style då det gäller teckensnitt.(sid 265-270 och 279-280)
Vad är det för skillnad på font-family och font-face? (sid 271-273)
Hur kan man vara säker på att en text visas för alla användare på det sätt som man hade tänkt sig på en hemsida?
Visa exempel på hur man med CSS kan göra fet, kursiv understruken och överstruken text. Ge också exempel på andra effekter som man kan skapa i CSS t.ex. hur man gör ett helt ord i versaler eller hur man får första bokstaven i en paragraf att visas i en annan storlek. Beskriv vad du gör och hur.

Det räcker inte med att kunna byta teckensnitt, man måste också kunna variera storleken på sin text och andra element på en sida. För att kunna sätta dessa så finns det i CSS ett flertal olika måttsystem man kan använda sig av. En del av dessa är absoluta enheter vilket gör att storleken sätts till fasta värden på din hemsida. Andra måttenheter är relativa enheter som sätter storleken utifrån något annat element på din hemsida.

I följande fråga ska du undersöka några olika måttsystem för att få en känsla av hur dessa fungerar. Fundera på om dessa räknas som relativa enheter eller absoluta. Testa genom att ändra på storleken på webbläsaren och genom att zooma in och ut på din sida för att se om du ser någon skillnad.

Det finns ett antal olika sätt att bestämma teckenstorleken på en hemsida. Undersök (med hjälp av internet) hur följande måttenheter fungerar och vad de kan ha för för- och nackdelar.

px
%
em
rem
vw och vh
Nyckelord (keywords) t.ex. xx-small, large, larger och smaller

Nu ska du använda dina kunskaper om färger, teckensnitt och storlekar för att göra ditt egna utseende på en HTML-formaterad text. Försök att hålla dig till en palett av färger som gör att sidan blir lätt att läsa. Sätter du en mörk bakgrundsbild så bör du sätta en ljus text till exempel.

Ladda ner följande text om Älgar och skapa med hjälp av denna en HTML sida som ni sedan ska formatera med CSS. Skapa en extern CSS-fil som du länkar till i ditt html-dokument. Använd er av de olika selektorerna (CSS Selectors, Se sid 237-238) för att variera t.ex. olika sektioner eller paragrafer.
Ändra färger, teckensnitt och storlekar på olika element. Visa exempel på hur varje selector kan användas.

Du får ändra i HTML-koden om du behöver det.
Du får lägga till bilder på fina älgar också om du vill, det är valfritt (men spendera inte för mycket tid på detta).
Alla selektorer på sidan 238 ska ha exempel och funktionen på dessa ska beskrivas.
Lägg till ett område i slutet på sidan där ni beskriver vad du gjort för formatering på de olika elementen och vilka selektorer ni använt.

<<CSS - Teckensnitt, storlekar och färger>>

CSS