CSS (Cascading Style Sheets)

Utseende & styling

Nivå:

#ID .klass element ( div, p)
Ett eller flera element

Minst 1 inom vardera:

Kunna justera färg, storlek,, margin / padding, text (font)
:state ( :hover & :active) & visibility:hidden eller display:none



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.
max-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.
max-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.