Skip to content

Fusklapp för CSS-stilar

CSS (Cascading Style Sheets) används för att styra layout och styling på webbsidor. Denna fusklapp täcker de vanligaste egenskaperna och selektorerna.

Selektorer

Typ Exempel Beskrivning
All * { } Matcha alla element
Type h1 { } Matcha specifik HTML-tagg
Class .header { } Matcha element med class=“header”
ID #main { } Matcha element med id=“main”
Descendant div p { } Matcha alla p inuti div
Pseudo a:hover { } Status vid hovring

Boxmodell 

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Inre marginal */
  border: 1px solid #ccc; /* Ram */
  margin: 20px;     /* Yttre marginal */
  box-sizing: border-box; /* Inkluderar ram och padding */
}

Typografi

Property Beskrivning Exempel
font-family Typsnittsfamilj font-family: Arial, sans-serif;
font-size Teckenstorlek font-size: 16px;
font-weight Teckenvikt font-weight: bold;
text-align Textjustering text-align: center;
line-height Radhöjd line-height: 1.5;
color Textfärg color: #333;

Färger & Bakgrunder

Property Beskrivning Exempel
background-color Bakgrundsfärg background-color: #f0f0f0;
background-image Bakgrundsbild background-image: url('bg.jpg');
background-size Bakgrundsstorlek background-size: cover;
opacity Opacitet opacity: 0.8;

Positionering

  • position: static; : Standardflödeslayout
  • position: relative; : Förskjutning relativt sin egen position
  • position: absolute; : Positionering relativt närmaste icke-statiska förfader
  • position: fixed; : Positionering relativt webbläsarfönstret
  • position: sticky; : Fäst vid scrollning till specifik position
  • z-index: 10; : Styr staplingsordning

Display & Layout

  • display: block; : Blockelement
  • display: inline; : Inline-element
  • display: inline-block; : Inline-block-element
  • display: flex; : Aktivera flex-layout
  • display: grid; : Aktivera grid-layout
  • display: none; : Dölj element utan att ta upp plats

Förkortade egenskaper

  • margin: 10px 5px 15px 20px; (Topp Höger Botten Vänster)
  • padding: 10px 5px; (Topp-Botten Höger-Vänster)
  • border: 1px dashed red; (Bredd Stil Färg)