Uppgift på CSS

Din uppgift är att skapa ett externt CSS-dokument som formaterar ett på förhand givet HTML5-dokument.
Följande instruktioner gäller:

Filens namn ska vara “style.css”
CSS-filen “style.css” ska vara ett externt CSS
All formatering ska ske i filen “style.css”
HTML koden nedan skall använads och skall inte ändras, alla formatering ska ske via “style.css”.
Som hjälp för hur slutresultatet ska se ut finns en bild, som visar hur webbsidan ska se ut (visar hur webbsidan ser ut i webbläsaren Firefox).
Du ska skicka in “style.css”

Följande gäller för sidan och ingående delars layout: Allmänt

body - Bakgrundsfärgen skall vara #E5E5E5. Texten skall ha typsnittet “Trebuchet MS” och därefter Helvetica, Arial och sans-serif. Texten skall ha storleken 0.8 em och ha färgen #6C6C6C.
a - Skall inte vara understrukna i utgångsläget, men understrukna då muspekaren förs över.
ul - Skall ha en svart prickad ram på 1px, en marginal på 1em, en utfyllnad på 1em, listans punkter ska ligga innanför ramen, texten skall vara kursiv och textstorleken 0.8em

Sidans indelning

article - skall ha vit som bakgrundsfärg. Den skall ha bredden 800 pixlar och ha en heldragen ram som är 1 pixel bred och har färgen #666666. Elementet skall vara centrerat i sidan.
header - skall ha en utfyllnad på 10 pixlar, ha en marginal på 3 pixlar åt alla håll utom nedåt där marginalen skall vara 20 pixlar. Den skall vidare ha en prickad ram som är 2 pixlar tjock och har färgen #999999. Rubriker av typen h1 inom “header” skall ha färgen #FFAA01 och vara av storleken 2em. All text i sidhuvudet skall vara högerjusterad.
section - skall ha en utfyllnad som är 10 pixlar uppåt och nedåt samt 20 pixlar åt sidorna.
p - skall ha fonttypen Georgia, följt av times och serif.
table - tabellen skall ha kollapsande ramar, d.v.s ramarna mellan cellerna får inte ritas ut med dubbla streck utan ramarna för varje cell skall slås samman. Tabellen skall också ha en heldragen ram med tjockleken 3px i färgen #666666. Tabellen skall ha bredden 500 pixlar och vara centrerad.
td - tabellcellerna skall ha en utfyllnad på 3 pixlar, en heldragen ram som är 1 pixel tjock och har färgen #666666. Slutligen skall tabellcellerna ha bredden 100 pixlar.
th - tabellhuvudet skall ha klargul (#ff0), fet text mot svart bakgrund. Texten i dessa celler skall vara centrerad. I övrigt ska cellerna ha samma egenskaper som td.
tr:nth-child(even) - tabell rader med jämna nummer skall ha bakgrundsfärgen #ffffaa.
tr:nth-child(odd) - tabell rader med udda nummer skall ha bakgrundsfärgen #ffbbbb.
td.number - tabellceller med siffor skall ha högerjusterad text.
footer - skall ha en heldragen ram med bredden 1 pixel och färgen #999999. Den skall ha en marginal på 3 pixlar runt om. Texten skall vara 0.8em stor, vara kursiverad och centrerad i sidfoten. Länkfärgen i “footer” skall vara #1292FF.

Förutom detta ska ingen annan formatering göras.

Betyg
Denna uppgift bedöms med betyget E eller F.
Lycka till!

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>CSS-uppgift</title>
    </head>
    <body>
        <article>
            <header>
                <h1>En liten sida om Cascading Stylesheets</h1>
            </header>
            <section>
                <h2>Vad är CSS?</h2>
                <p>CSS är ett språk som tillåter formatering av webbsidor med avseende på:</p>
                <ul>
                    <li>Typsnitt</li>
                    <li>Färg</li>
                    <li>Positionerna av en sidas olika delar</li>
                    <li>och mycket annat</li>
                </ul>
            </section>
            <section>
                <h2>Något om färghantering i CSS</h2>
                <p>När man skall ange färgen för ett element används vanligtvis hexadecimala siffror. Nedan följer en kort översättning av några vanliga färgvärden från dess decimala representation till motsvarande hexadecimala representation.</p>
                <table>
                    <tr>
                        <th>Färgnamn</th>
                        <th>Decimalt (R, G, B)</th>
                        <th>Hexadecimalt (RGB)</th>
                    </tr>
                    <tr>
                        <td>Röd</td>
                        <td class="number">255, 0, 0</td>
                        <td class="number">ff0000</td>
                    </tr>
                    <tr>
                        <td>Blå</td>
                        <td class="number">0, 0, 255</td>
                        <td class="number">0000ff</td>
                    </tr>
                    <tr>
                        <td>Svart</td>
                        <td class="number">0, 0, 0</td>
                        <td class="number">000000</td>
                    </tr>
                    <tr>
                        <td>Vit</td>
                        <td class="number">255, 255, 255</td>
                        <td class="number">ffffff</td>
                    </tr>
                </table>
            </section>
            <section>
                <h2>Vad är Lorem Ipsum?</h2>
                <p>Lorem ipsum är en textmassa som har använts av typsättare sedan boktryckarkonstens utvecklades. Syftet med denna text är att kunna göra bedömningar av layout utan att påverkas av textinnehållet. Denna textmassa har överlevt genom århundranden och fått en renässans i och med webbens tillkomst. Nedan följer ett exempel på denna textmassa. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consectetur enim a urna luctus et scelerisque urna congue. Aenean laoreet enim ac odio commodo sit amet varius arcu elementum. Nam vehicula odio in lorem dictum fringilla. Cras eget lorem risus. Integer accumsan semper justo vitae imperdiet. In fringilla, odio a accumsan luctus, dui turpis volutpat tortor, eget ullamcorper ipsum velit non turpis. Aliquam venenatis, libero eu auctor dignissim, tellus lorem placerat nisi, a tempus urna odio id tellus. Morbi sit amet leo quis nunc lobortis ultrices in blandit turpis. Mauris mattis, arcu id gravida eleifend, purus nibh posuere dolor, vitae aliquam lacus ligula ac ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis nec facilisis ligula. Phasellus metus velit, ultricies vel pellentesque ac, lacinia ac turpis. Aliquam scelerisque mauris at metus tempor et facilisis enim aliquam. Cras volutpat justo ut tellus eleifend nec mollis ipsum porttitor.</p>
            </section>
            <footer>
                <p>Validator för <a href ="http://jigsaw.w3.org/css-validator/">CSS</a></p>
            </footer>
        </article>
    </body>
</html>

Uppgift på CSS

HTML kod