This is an old revision of the document!

Genomgång - Exempel på CSS

Länkar

- På W3Schools om CSS hittar du mycket bra övningar

Koppla din css till en sida

<head>
    <meta charset="UTF-8">
    <title>Allmänt om internetutvecklingen</title>
    <link rel="stylesheet" href="style.css">
    /* Detta länkar till en fil som heter "style.css" i samma mapp som html-filen */
</head>

Vanliga egenskaper

p {
    margin: 1rem; /* anger marginalen runt elementet */
    border: 0.1rem solid grey; /* skapar en kontur runt elementet */
    padding: 1rem; /* anger marginalen mellan konturen och innehållet */
    color: blue; /* anger textens färg */
    background-color: white; /* anger elementets bakgrundsfärg */
    font-size: 1.2rem; /* anger textens storlek */
    font-family: "Times New Roman", serif; /* anger textens typsnitt */
    width: 100%; /* anger elementets bredd */
}

Exempel på hur CSS kan se ut

/* HTML-elementet ska ha bakgrundsfärgen ”whitesmoke”, typsnittet ”Helvetica” och 1,6 i radavstånd */
 
html {
    background-color: whitesmoke;
    font-family: Helvetica, Arial, sans-serif;
}
 
/* Body-elementet ska vara 100%, men bara om skärmen är smalare än 50rem. Marginalen runt ska vara 3rem uppåt och nedåt, men justeras automatiskt åt sidorna beroende på skärmens bredd. Utfyllnaden inuti ska vara 3rem, bakgrundsfärgen ska vara vit och utfyllnaden ska räknas med i bredden */
 
body {
    width: 100%;
    max-width: 50rem;
    margin: 3rem auto;
    padding: 3rem;
    background-color: white;
}
 
/* Alla rubriker ska ha topp-marginal på 2em, högermarginal på 0, botten-marginal på 1em och vänstermarginal på 0, samt ha färgen ”dodgerblue” */
 
h1, h2, h3, h4, h5 {
    margin: 2em 0 1em 0;
    color: dodgerblue;
}