JavaScript Required
We’re sorry, but Coda doesn’t work properly without JavaScript enabled.
Skip to content
STI Intro lathund
CSS
HTML
Javascript (Js)
Sammankopplande
Resurser
Inlämningen
More
Share
Explore
CSS
FP
Francisco Padilla
CSS (Cascading Style Sheets)
Utseende & styling
CSS Selectors:
Tips:
https://www.w3schools.com/cssref/css_selectors.asp
https://www.youtube.com/watch?v=EeZKHmNJipE
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");
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.
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:
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
Related Docs
$10k Work: How to increase your productivity using the magic of leverage
Khe Hy
Two-way writeups: Coda’s secret to shipping fast
Lane Shackleton
Peloton Analytics Tool for Workout Stats [+Template]
Al Chen
Mental Health Awareness Month
Jamie Forseth
Four Myths of Bundling
Shishir Mehrotra
OTF Planner (otfplanner.com)
Kenny
Random Quote Generator
Mark Davis
SpotRacer Database
kev null
1:1 & Career Development Template
Eric Glick
The Inbox-Zero Challenge: How long can you keep up your streak?
Shishir Mehrotra
Hiring List Template
SiNing Chan
BlockSplit Info
Block Split
Easy RSVP Tracker with the Gmail Pack
Kay Diaz-Ferrigno
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
Ctrl
P
) instead.