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;
}

Olika typer av väljare

* { /* påverkar alla element utan undantag */ }
 
li { /* påverkar alla li-element */ }
 
.bordered { /* påverkar alla element med klassen "bordered".
    Du kan skapa vilka klasser du vill och ge dem speciella regler.
    När du sedan vill använda den anger du klassens namn i class-atributet */ }
 
.bordered li { /* påverkar alla li-element som ligger under ett element med klassen "bordered" */ }
 
#main-menu { /* påverkar det element som har id:t "main-menu" */ }
 
#main-menu li { /* påverkar alla li-element som ligger under elementet med id:t "main-menu" */ }
 
li:hover { /* påverkar alla li-element, men bara när man håller muspekaren över det */ }
 
[target=_blank] { /* påverkar alla element där attributet "target" är "_blank" */ }