Gallery

IHM Handbok Teknik

Huvudmoment

Resurser

Fullstack (Tech stack)

(EXTRA)

Explore

CSS

Egen Extra CSS i WP

(EXTRA) Flex & Grid

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:

Tips:

https://www.w3schools.com/cssref/css_selectors.asp⁠

⁠

https://www.youtube.com/watch?v=EeZKHmNJipE⁠

⁠

# = 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");

⁠

https://www.w3schools.com/cssref/pr_background-image.asp⁠

⁠

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:

⁠

https://cssgradient.io/⁠

⁠

Css generator:

⁠

https://css3generator.com/⁠

⁠

CSS

⁠

https://www.w3schools.com/css/default.asp⁠

⁠

CSS Centering:

⁠

https://www.youtube.com/watch?v=mVYgtzDLZfY⁠

⁠

Centrering med Flex:

⁠

https://www.youtube.com/watch?v=t2kpDpAl7y8⁠

⁠

CSS Margins (marginal runtomkring elementet):

⁠

https://www.w3schools.com/css/css_margin.asp⁠

⁠

CSS Padding (extrautrymme inuti elementet)

⁠

https://www.w3schools.com/css/css_padding.asp⁠

⁠

CSS Färger:

⁠

https://www.w3schools.com/css/css_colors.asp⁠

⁠

CSS Listor:

⁠

https://www.w3schools.com/css/css_list.asp⁠

⁠

CSS Länkar:

⁠

https://www.w3schools.com/css/css_link.asp⁠

⁠

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.