Hemsidor för nybörjare - del 3: CSS

Välkommen tillbaka till denna artikelserie. Idag kommer jag att gå igenom grunderna i CSS, språket som används för att sätta stil på hemsidor.

CSS står för Cascading Stylesheets, vilket på svenska skulle kunna översättas till överlappande stilmallar, vilket det rent faktiskt är när man tänker efter.

CSS används för att förklara för en klient hur en HTML-sidas element ska se ut. Det kan vara till exempel en webbläsare på skärmen, en utskrift eller en mobil webbläsare.

Fördelen med CSS är att all information lagras i en egen fil, som kan laddas från flera sidor. På så sätt behöver besökaren bara ladda hem stilmallen en gång, eftersom den cachas i webbläsaren.

Ladda stilmallen

En stilmall kan laddas på flera olika sätt. Ett enkelt sätt att ge ett element olika CSS-egenskaper är att använda attributet style (men detta bör undvikas eftersom det är svårt att seperera stilar från olika medier, det vill säga skärmen eller en utskrift).

Man kan också använda sig utav elementet <style>. Denna metod kan vara användbar ifall man vill ange stilinformation som bara ska användas på en sida, på så sätt behöver inte besökaren ladda stilinformation som denne kanske inte behöver. Detta element lägger man i <head>, och kan se ut ungefär såhär:

<style type="text/css" media="screen"> /* CSS */ </style>

Som du ser i exemplet ovan så använder vi attributet media. Detta attribut anger i vilket media denna CSS ska gälla. För en vanlig webbläsare använder man screen, ska man göra en stilmall för utskrift använder man print. Du kan läsa mer om dessa på W3Cs hemsida.

Det tredje sättet som man oftast använder är <link>, som kan användas till CSS, RSS och en mängd andra filformat. För detta behövs fyra attribut, type som du kanske också noterade i exemplet, som berättar att det är en CSS-fil vi hämtar, rel som kommer att berätta att det är en stilmall vi använder, href som innehåller adressen till stilmallen och media som jag nämnde tidigare. Även detta element placeras i <head>

<link type="text/css" rel="stylesheet" href="" media="screen" />

CSS

Att koda i CSS är faktiskt väldigt enkelt, så länge man förstår skillnaden mellan HTML och CSS. Snabbt sammanfattat kan man säga att HTML innehåller informationen medan CSS:en innehåller designen och layouten.

Vi kommer att utgå ifrån HTML-filen vi skapade i förra delen i den här artikel-serien, med mina Swooping Hawks. Vi kommer med väldigt enkel CSS göra hemsidan något snyggare (inte så jätteavancerat dock). Vi skapar en fil som vi döper till screen.css, där vi kommer att ha all CSS som har med mediet screen att göra. Vår HTML-kod kommer alltså att se ut ungefär såhär:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rules for Swooping Hawks, from the old Codex</title> <link type="text/css" rel="stylesheet" href="screen.css" media="screen" /> </head> <body> <h1>Swooping Hawks</h1> <p>Swooping Hawks specialise in bringing death to anyone, no matter who they are. Their wings allow them to swiftly move to anywhere on the battlefield, picking off the enemy with a hail of energy bolts.</p> <table width="100%" border="1"> <caption>Swooping Hawks</caption> <tr> <th></th> <th>Points/Model</th> <th>WS</th> <th>BS</th> <th>S</th> <th>T</th> <th>W</th> <th>I</th> <th>A</th> <th>Ld</th> <th>Sv</th> </tr> <tr> <td>Swooping Hawk</td> <td>21</td> <td>4</td> <td>4</td> <td>3</td> <td>3</td> <td>1</td> <td>5</td> <td>1</td> <td>9</td> <td>4+</td> </tr> <tr> <td>Exarch</td> <td>+12</td> <td>5</td> <td>5</td> <td>3</td> <td>3</td> <td>1</td> <td>6</td> <td>2</td> <td>9</td> <td>3+</td> </tr> </table> <p>The squad consists of between 5 or 10 Swooping Hawks.</p> <p><strong>Weapons:</strong> Lasblaster, Plasma grenades, Swooping Hawk grenade pack.</p> <h2>Special rules</h2> <p>Swooping Hawk Wings: See the Wargear section.</p> </body> </html>

Notera att vi inte ändrar något för utskrift, eftersom i detta dokument duger originalstilen på alla element för utskrift. Har man en mer avancerad design kan man dock behöva göra lite ändringar, men det tar vi i nästa del.

Vi kommer att börja med att ändra teckensnitt, eftersom sans-serifa teckensnitt är lättare att läsa på skärmen. Koden för detta ser ut såhär:

body { font-family: Arial, Helvetica, sans-serif; }

Hur läser man av detta då? På svenska skulle man kunna säga att denna kod betyder att alla teckensnitt inom <body> kommer att använda teckensnitts-familjen Arial, Helvetica eller sans-serif. Alltså:

html-element { egenskap: värde; }

Ett HTML-element kan ha flera egenskaper, allt ifrån färg och text till storlek, position och allt sånt.

Lite kuriosa angående font-family: Man kan ange flera teckensnitt. Webbläsaren kommer att ladda det första teckensnittet ifall det finns installerat på datorn, annars försöker den med nästa, finns inte det så fortsätter den med tredje och så vidare. Det sista teckensnittet bör vara sans-serif eller serif, eftersom detta är ett samlingsnamn för alla sans-serifa eller serifa teckensnitt på datorn.

Rubrikerna på sidan vill vi dock använda en serif på, eftersom jag personligen tycker det är snyggare, samt att det passar in perfekt i pedagogiskt syfte. Då använder vi ungefär samma kod, men vi har två typer av rubriker och därför måste vi göra nån typ av kombination. Det är ganska lätt, allt man behöver göra att att separera HTML-elementen med ett komma-tecken:

h1, h2 { font-family: Georgia, Times, serif; }

Nu ser teckensnitten bra ut i alla fall. Nu är det dags att ändra stilen på brödtexten. Själv har jag gått en minikurs i typografi så jag vet att genom att ha ungefär 55-65 tecken per rad och en rad-höjd på omkring 140-160% brukar göra texten mycket mer behaglig att läsa. Båda dessa saker går att fixa ganska enkelt med CSS:

p { color: #444; line-height: 140%; width: 35em; }

Notera att jag använder en enhet som heter em. Varje em är lika bred som ett M i samma teckensnitt. Dock är M ganska bred jämfört med andra tecken så därför minskar jag talet så det är ungefär hälften av vad jag skrev i förra stycket. Jag ändrade också textfärgen med HEX så kontrasten inte är så kraftig.

Klasser och ID

Nu ska vi ge lite stil åt vår tabell, men för att göra detta så snyggt som möjligt måste vi göra lite ändringar i HTML-koden. Varannan rad i tabellen ska ha en annorlunda bakgrundsfärg så därför ger vi varannan rad en egen klass.

<tr class="odd"> <th></th> <th>Points/Model</th> <th>WS</th> <th>BS</th> <th>S</th> <th>T</th> <th>W</th> <th>I</th> <th>A</th> <th>Ld</th> <th>Sv</th> </tr> <tr class="even"> <td>Swooping Hawk</td> <td>21</td> <td>4</td> <td>4</td> <td>3</td> <td>3</td> <td>1</td> <td>5</td> <td>1</td> <td>9</td> <td>4+</td> </tr> <tr class="odd"> <td>Exarch</td> <td>+12</td> <td>5</td> <td>5</td> <td>3</td> <td>3</td> <td>1</td> <td>6</td> <td>2</td> <td>9</td> <td>3+</td> </tr>

Flera HTML-element på samma sida kan använda sig utav samma klasser, vilket är utmärkt i detta fall. Det finns även ett attribut som heter id, varje HTML-element kan få sitt unika ID, men mer om detta i nästa artikel.

När man ska styla klasser i CSS gör man på samma sätt som med vanliga HTML-element, fast man lägger till en punkt i början.

Du kommer kanske ihåg att man sätter samma egenskaper på flera element med hjälp av kommatecken? Ifall du bara använder ett mellanslag, exempelvis h1 span, så innebär det att det att alla <span> inom en <h1> ska få den här egenskapen.

table { width: 35em; background-color: #eee; border-color: #ccc; border-style: solid; border-width: 0 0 1px 0; border-collapse: collapse; border-spacing: 0; } table th, table td { border-width: 1px 0 0 0; padding: 0.25em; text-align: left; } table .even td { background-color: #fff; } caption { color: #ddd; padding-bottom: 10px; }

En kort sammanfattning av denna hög kod är kanske uppskattat? Till att börja med gör vi tabellen ungefär lika bred som text-styckena på sidan, sedan ändrar vi bakgrunden till ljusgrå. Sedan tar vi bort alla vanliga kantlinjer (border-collapse och border-spacing behövs i vanliga fall inte, men för tabeller använder man de för att ta bort mellanrummet som tabeller vanligtvis har) och lägger en grå kantlinje i botten.

Sedan ändrar vi alla celler så de har en kantlinje i toppen, samt att vi vänsterjusterar texten och lägger in lite luft. Efter det gör vi så att varannan rad har en vit bakgrund istället för en grå. Till sist gör vi om tabellen titel så den får en ljusgrå textfärg och lite avstånd från själva tabellen.

Nu har vi fått en någorlunda vacker layout i alla fall. Den är lättläst och det var inte alls så svårt att skapa den.