CSS (Cascading Style Sheets)

Utseende & styling

/ *____________ Tentastress ____________ */

Kunskapsmål:

Veta vad CSS är och varför det används.

Veta hur man kan få in CSS på en hemsida.

Antingen via ett separat CSS-dokument ( den övergripande stylingen )
Här rekommenderas så mycket som möjligt av stylingen att ligga.
<link rel="stylesheet"
href="my-web-styling.css"
>

inuti HTML-dokumentet med

<style>
#my-element {
background: red;
color:blue; /*text-färgen*/
</style>

eller direkt inuti HTML-elementet som overridear / överskrider annan css via
<div id=”my-element” style=” color:red;” >



Färdighetsmål:


Kunna påverka ett eller flera element med hjälp av dessa CSS-selectors:
#ID .klass element ( div, p)

#min-pryl {

/* påverkar specifikt elementet med ID min-pryl */

}

h1 {
/*påverkar ALLA h1-element */
}

Skilja på %, vw och vh.
10% = 0- 100% av storleken på elementet man ligger inuti. Ärver bredd eller höjd från elementet man ligger inuti.

10vw = 0-100 HELA bredden på själva hemsidefönstret. Ärver bredden från hela fönstret.

10vh = 0-100 HELA höjden på själva hemsidefönstret. Ärver höjden från hela fönstret.


Kunna påverka minst 1 inom vardera:
färg, storlek, margin / padding, text (font)
:state ( :hover & :active) & visibility/display

Kunna använda FLEX
För att få saker att ta jämnt fördelat utrymme i antingen “row” eller column”.

Kunskap kring hur Grid listar upp en vy
Förstå hur “grid” listar upp en vy med Kolumn och Rader.

/ *____________________________
_____________________________
____________________________
SLUT PÅ målen
____________________________
____________________________ */

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”

<div class=”min-klass”>

<span class=”min-klass-innuti”> </span>

</div>

.min-klass .min-klass-innuti {

}


E.x (Påverkar endast elements som har båda klasserna “min-klass” och “min andra klass”)
<div class=”min-klass 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)
padding-bottom: 15px; (extra-utrymme inom elementets nedre del)

Float

//Om du vill att ett element ska läggas / tryckas så mycket åt höger eller vänster det går kan du använda float.


#mitt-elemet {

float:left;

}

#mitt-andra-element {

float:right;

}


text (font)

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



Storlekar i förhållande till hela sidan och elementet ovan:


% , vw och vh.
10% = 0- 100% av storleken på elementet man ligger inuti. Ärver bredd eller höjd från elementet man ligger inuti.

10vw = 0-100 HELA bredden på själva hemsidefönstret. Ärver bredden från hela fönstret.

10vh = 0-100 HELA höjden på själva hemsidefönstret. Ärver höjden från hela fönstret.



em & rem (textstorlekar)
1em = 100% exakt samma textstorlek som är satt i elementet ovanför. Alltså det elementet som man ligger inuti.
(em = i relation till textstorleken i elementet man ligger inuti. Man “ärver” textstorlek från elementet man ligger i)


1.5rem = 150% exakt samma textstorlek som är satt för hela dokumentet.
(rem = i relation till textstorleken för hela elementet. Man “ärver” textstorlek från hela dokumentet)


state & visibility

display: none; ( Syns inte alls och försvinner från sidan)

display:inline; (Elementet kan lägga sig bredvid ett annat, men blir av med sin height & width.

display:inline-block; (Elementet kan lägga sig bredvid ett annat, behåller sin height & width.




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

a:hover ( Vad som ska ske i CSSn när du håller muspekaren över elementet)
a:active ( Vad som ska ske i CSSn när du trycker på elementet)



Flex


Lite mer info:
bild.png
bild.png

// Sätt elementet (tex “div” eller container ) som display:flex;. Dess innehåll får då möjligheten att bli flexibelt vad deet gäller storlek och position. Antingen som en “row” eller “column”. Den “lila” delen i bilden ovan

.my-container {

display:flex;

}

.my-container {
flex-direction: row;

/* Kan välja mellan flow-direction: tex. row eller column för att ha dragspelet längs med höjden eller bredden*/

}

// Sätt sedan så att alla element inuti containern har ett “flex”-värde. Så att den kan fördela sin bredd inuti flex-containern. De “orangea” delarna i bilden ovan.

// Flex 2 blir dubbelst så stor som flex 1 i det gemensamma utrymmet på bredden eller höjden.

.mitt-flixibla-element {

flex:1;

}

.mitt-andra-flixibla-element {

flex:2;

}


Grid

Grid använder du för mer helhets-layouts, i samma stil som i Figma.
Kan kombineras med “Flex”-elements som används i de mer specifika ytorna om man vill.
Det går även att med “Flex” få till likadana vyer men med en annan typ av kontroll.

Detta sätter du i det yttre elementet, på samma vis som med flex, men istället för att styra uppdelning av avstånd och hur mycket plats som ska tas av elements inne i varje element så gör man det från det stora, yttre elementet:


.mitt-yttre-grid-element {

/* Informera om att detta element ska vara ett GRID-element*/
display:grid;


/* Rita ut hur mycket plats varje kolumn ska ta och hur många kolumner ska finnas */

/* fr (fragment) är precis som "flex" , alltså hur stor andel av ytan som ska tas upp av varje ruta. Om en kolumn har 2fr och en annan kolumn har 1fr så tar den första upp dubbelt så mycket utrymme./*


/* Här nedan är 8 stycken kolumner som tar olika mycket utrymme i bredd*/
grid-template-columns:
2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

/* Rita ut hur mycket plats varje rad ska ta och hur många rader ska finnas */
/* fr (fragment) är precis som "flex" , alltså hur stor andel av ytan som ska tas upp av varje ruta. Om en rad/row har 3fr och en annan rad/row har 1fr så tar den första upp tre gånger så mycket utrymme./*

/* Här nedan är 3 stycken rader som tar olika mycket utrymme i höjd*/
grid-template-rows:
3fr /* kommer ta upp tre gånger så mycket som 1fr */
2fr /* kommer ta upp dubbelt så mycket som 1fr */
1fr;

/* Rita ut hur alla namngivna element ska ligga i rutnätet och hur många rutor de ska ta upp. OBS måste matcha rutnätet ovan och namnen ska vara "grid-area"-namnen */
grid-template-areas:
"ruta1 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2"
"ruta1 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2 ruta2"
"ruta1 KNAPPEN KNAPPEN botten botten botten botten botten";

}


Såhär namnger du de olika elementen som finns i “Grid”-elementet. OBS behöver ej vara samma som ID-namnet eller klass-namnet. Detta grid-area-namn används sedan ovan för “grid-template-areas:”
#ett-element-i-gridden {

grid-area: ruta2;

background-color: red;

}






Grid-info för desktop & mobile:

Grid-Info för grid i Figma
Loading…



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.