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.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.