Introduktion till CSS

Designa HTML med CSS

CSS är ett språk inom webbdesign som används för att ge HTML-element olika stilar, så som storlek, färg, typsnitt, form med mera. Om du vill designa din hemsida så är det CSS du behöver.

Intoduktion till CSS

  • CSS är en förkortning för Cascading Style Sheets.
  • används för att styra utseendet på webbsidan
  • på svenska kallar vi det för stilmallar.

Webbläsarna har inbyggd CSS-kod Därför ser <h1> annorlunda ut jämfört med <p>

CSS video

CSS-övningar

Ni ska skapa en en extern css-fil som ska länkas in i html-dokumentet. Följ instruktionen.

  1. Skapa ett nytt dokument döp det till style.css Spara css-dokumentet i samma mapp som ditt html-dokument.
  2. I ditt html-dokument klistrar du in följande inom <head>:
    <link rel="stylesheet" href="style.css">
  3. Öppna style.css och skriv vilket HTML-element du vill ändra designen på. Vi börjar med rubriken.

    h1
    

    Därefter skriver vi så kallade måsvingar {}. Om du har Mac så trycker du Alt Shift 8 / 9 för att skriva en måsvinge. Det som skrivs inom dessa vingar kommer att appliceras på HTML-elementet som de tillhör.

    h1 {}
    

    Nu har vi möjligheten att ge elementet olika stilar/attribut. Det finns en mängd olika att välja på, men vi börjar med något enkelt – färgen.

    h1 {
      color: darkblue;
    }
    

     

     

CSS kan även skrivas in direkt i HTML-koden för att styra utseendet på en speciell del av sidan, som inte följer huvudfilens formgivning. Här vill jag t.ex. ha lite text med rosa bakgrund. Den kan jag skapa mitt i HTML-koden, så här:

<span style="background-color:pink">Rosa text</span>

Mer CSS

Här kommer några fler css-exempel testa att göra dessa på din webbsida:

border-radius = runda hörn!

#exempel {border-radius:30px 30px 30px 0;}

Ett tal för varje hörn, i ordningen: upp, höger, ner, vänster.

rgba-inställningar för bättre kontroll av genomskinlighet

#exempel {background: rgba(255, 168, 216, 0.45);}

De tre första värdena är röd-, grön- och blåvärdena. Ta reda på dessa värden med hjälp av t.ex. detta verktyg. Det sista värdet är genomskinligheten. 1 = ingen genomskinlighet, 0 = osynligt.

text-shadow= go figure…

#exempel {text-shadow: 2px, 2px, #CCC;}

Första värdet är y-axeln, andra värdet är x-axeln, och det tredje är färgen.

box-shadow = för att lägga skuggor bakom block-element, som t.ex. <div>-boxar

#example1 {
         box-shadow: 10px 10px 5px #888;
         }

Första värdet är y-axeln, andra värdet är x-axeln och det tredje är suddigheten. Fjärde värdet är färgen.

Exempel!

Text-shadow, border-radius, rgba-genomskinlighet och box-shadow i underbar symbios!

 

 

Vill du läsa mer om CSS finns en ypperlig sida här: webbkoda.se