2. Vi stylar vår sida (CSS)

  • CSS med style-attributet
  • Formatering av text och länkar
  • Färger, bakgrundsfärger och hur man tolkar färgkoder
  • Styling av <img>-element
  • Användning av <span>-element

CSS går hand i hand med HTML, och möjliggör full kontroll av layout och design på en websida. T.ex. kan man kontrollera typsnitt på text, rubriker och länkar, färger och bakgrundsfärger, storlek och positionering av element som bilder och textrutor mm.

Det finns tre olika sätt att inkludera CSS på en sida.

CSS med style-attributet

Det första sättet är att använda sig av style-attributet. Det kan läggas till som attribut i nästan vilket HTML-element som helst. Exempel:

..
<p style="font-size: 20px;"></p>

Formatering av text och länkar

Text, stycken, rubriker, länkar etc. kan formateras med font-attribut och med color-attribut.
Några exempel:

En rubrik med typsnittet ”Arial”.

...
<h1 style="font-family: arial;">Rubriken</h1>

Ett stycke som är färgat blått.

...
<p style="color:blue;">Blått stycke</p>

En länk som inte är blå (som standard länkar), utan svart:

...
<a style="font-family: arial;" href="#">Länken</a>

Pröva style attributen ovan på din sida.

Färger, bakgrundsfärger och hur man tolkar färgkoder

Vi såg redan att man kan använda style="color:red;" attributet för att färga text.

Man kan också göra bakgrundsfärger med CSS. T.ex. <body>-elementet (hela sidan) går att ändra bakgrunden på.

...
<body style="background-color:yellow;">
...

</body>
...

Ändra bakgrundsfärgen på din sida.

Att specificera färgen på engelska är opraktiskt, inte minst för att antalet färger är begränsat (det finns 147 specificerade färgnamn). Istället specificerar man vanligen färger med hjälp av RBG-koden: background-color:#RRGGBB;
där RR, GG och BB är hexadecimala tal mellan 00 och ff (256).

Exempel: Ljusblå bakgrund:

...
<body style="background-color:#a0a0dd;">
...

</body>
...

Försök åstadkomma följande färger med RGB-kod: svart, vit, ljusgrå, lila, gul, orange, brun.
Du kan pröva styla både text och bakgrundsfärger.

Styling av <img>-element

Bildernas layout är naturligtvis viktig, eftersom det är viktigt att kunna bestämma storlek och position etc. Detta görs med height och width egenskaperna:

...
<img src="bild.jpg width=400px">
...

</body>
...

Lägg in en bild som tar upp halva skärmens bredd. Försök göra samma sak både genom att specificera bredden i pixlar (px) och i procent (%).

Vad händer om du specificerar både bredden (width) och höjden (height) för en bild? Varför kan det vara problematiskt?

Användning av <span>-element

Då du vill styla en bit av text som inte är ett stycke eller en rubrik kan du använda <span>-elementet. Exempel:

...
<p>Det här är ett stycke med en <span style="color:red;">röd</span> del.
..

This entry was posted in Tutorial. Bookmark the permalink.

Comments are closed.