Skip to content

CSS (Cascading Style Sheets)

Utseende & styling



CSS Selectors:


ID
# = Namnge ett ID i CSS
E.x
#mitt-id {

}


Klass
. = Namnge en klass i CSS
E.x (Påverkar alla element med klassen .min-klass)
.min-klass {

}


E.x (Påverkar endast elements som har klassen “min-klass-innuti” och som ligger i ett element med klassen “min-klass”


.min-klass .min-klass-innuti {

}


E.x (Påverkar endast elements som har båda klasserna “min-klass” och “min andra klass”)
.min-klass.min-andra-klass {

}


Element

= Namnge en elements-typ i CSS
E.x (påverkar ALLA “p”-element)
p {

}


E.x (påverkar alla “div”-element med klassen .klass2)
div.klass2 {

}


Styling

background-color
background-image: url("HÄR INNE SKRIVER DU ADRESSEN TILL BILDFILEN");

Påverkar bredden.
width: 10px;

Påverkar minsta möjliga bredden för elementet.
min-width: 10px;

Påverkar största möjliga bredden för elementet.
min-width: 10px;


Påverkar höjden.
height: 10px;

Påverkar minsta möjliga höjden för elementet.
min-height: 10px;

Påverkar största möjliga höjden för elementet.
min-height: 10px;


Tjockleken på “ramen” runt elementet
border: 1px;

Hur “rundade” kanter elementet ska ha
border-radius: 10px;

Centrerar text & element inuti elementet eller lägger det åt “left” eller “right”.
text-align: center;

Dölj elementet helt.
display: none;

Gör så att elementet kan ligga ovanpå/under andra element.
display:block;

Gör så att elementet kan ligga bredvid andra element.
display: inline;

Textfärg
color:red;

Typsnitt, textutseende.
font-family: arial;

Textens tjocklek (light, medium, bold)
font-weight: bold;

Textstorlek:
font-size: 12px;

Extrapålägg när man “trycker” på elementet.
:active
(tex a:active { } )

Extrapålägg när man håller musen över elementet.
:hover
(tex a:hover { } )


färg

color: red; (text-färgen)
background-color: #fffff; (bakgrundfärgen)


storlek

height: 100px;
width: 100px;

margin / ((padding))

margin: 10px; (utrymme runtom elementet. Upp, ner, höger, vänster)
margin-top: 15px; (utrymme ovanför elementet)
(( padding: 10px; (extra-utrymme inom elementet)))

text (font)

font-size: 10px;
font-weight: bold;



state & visibility

display: none;
visibility: hidden; (Gör elementet osynligt, men tar fortfarande upp samma yta och storlek som vanligt)

a:hover
a:active




Annat:

Generera Färg-Gradient:


Css generator:

CSS


CSS Centering:

Centrering med Flex:

CSS Margins (marginal runtomkring elementet):

CSS Padding (extrautrymme inuti elementet)

CSS Färger:

CSS Listor:

CSS Länkar:




Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.