n00b pro

07. CSS samenvatting

Dit hoofdstuk is onderdeel van de cursus CSS. Andere cursussen in dezelfde reeks: HTML, Javascript, C#, Ontwikkelomgeving.

Selectors

basic selectors
* all elements
div <div>
#itemid element with id "itemid"
.class elements with class "­cla­ss"
div.class <div> with class "­cla­ss"
div#itemid <div> with id "itemid"
combinatie selectors
div span <span> within <div>
div, span <span> and <div>
div + span <span> after <div>
div > span <span> with parent <div>
attribuut selectors
a[attr] <a> with attribute "attr"
a[attr=x] <a> when "attr" is "x"
a[attr*=x] <a> when "attr" contains "x"
a[attr^=x] <a> when "attr" starts with "x"
a[attr$=x] <a> when "attr" ends with "x"
pseudo class selectors
a:active <a> when pressed
a:focus <a> when focussed
a:hover <a> when hovered
:first-child first child element
:last-child last child element
tr:nth-child(3n+1) <tr> 1, 4, 7...
tr:nth-child(odd) <tr> 1, 3, 5...
input:checked checked input
input:disabled disabled input
input:enabled enabled input
input:invalid invalid input
input:required required input
input:valid valid input
pseudo element selectors
::after insert content after element
::before insert content before element
::first-letter first letter of element
::selection selected part of element
::first-line first line of element

units

units
px a pixel
em percentage of parent font size
% percentage of width
fr fraction of available width
rem percentage of <html> font size
vw/vh viewport width / viewport height

text

fonts
color text color, e.g. #9c6
font-family e.g. Helvetica, Arial, sans-serif
font-size px, rem, em or %
small, smaller, large, larger
font-style italic | normal
font-weight bold | normal
100, 200, ..., 900
styling & spacing
letter-spacing extra letter spacing, e.g. 2px
line-height e.g. 1.4
text-align hor. alig: left | center | right
text-decoration none | underline
text-transform uppercase | lowercase | capitalize
white-space nowrap | pre
word-spacing extra word spacing, e.g. 2px
lists
list-style none | disc | square | decimal | ...

colors & backgrounds

colors
#36f97c hex color: R=36, G=f9, B=7c
#5c9 shorthand for #55cc99
#36f97c8d hex color with transparency 8d
rgb(54 249 124) RGB notation
rgb(54 249 124 / 70%) RGB notation, opacity 0.7
mnemonic e.g. Maroon, Coral... (don't use)
backgrounds & images
background-color e.g. #fff
background-image e.g. url(img/bg.png)
e.g. linear-gradient(#0000, #0003);
background-position e.g. center, top left...
background-repeat no-repeat | repeat | repeat-x | repeat-y
background-size % | cover | contain
transitions
transition e.g. background 0.3s, color 0.5s;
filters
filter blur, hue, sepia, brightness, contrast...
e.g. grayscale(70%);

box model

margins, paddings, border
border

also: border-top, border-right, border-bottom, border-left 		e.g; 2px solid #900
border-radius e.g. 3px
margin

also: margin-top, margin-right, margin-bottom, margin-left 		e.g. 10px; /* all sides */
e.g. 5px 10px; /* vertical-horizontal */
e.g. 5px 10px 15px 20px; /* top-right-bottom-left */
padding

also: padding-top, padding-right, padding-bottom, padding-left 		e.g. 10px; /* all sides */
e.g. 5px 10px; /* vertical-horizontal */
e.g. 5px 10px 15px 20px; /* top-right-bottom-left */
dimensions (doesn't work on inline elements!)
box-sizing border-box | content-box
(include | exclude padding and border)
height, width px, rem, em or %
max-width, min-width px, rem, em or %
other
box-shadow e.g. 10px 10px 5px #888;
(left, top, blur, color)

layout

appearance
display none | inline | inline-block | block | flex | grid
opacity e.g. 0.7 (70% opaque)
visibility hidden | visible
overflow, overflow-x, overflow-y hidden | visible | scroll | auto
positioning (position element based on coordinates)
position absolute | relative | fixed | sticky
top, right, bottom, left px, rem, em or %
z-index any number (higher is on top)
floating
float left | right
clear left | right | both
flexbox, container
align-items start | end | center | stretch
align all items vertically
display: flex create flex container
flex-direction row | row-reverse | column | column-reverse
flex-wrap wrap | nowrap
gap px, rem, em or %
justify-content start | end | center | space-between
distribute all items horizontally
flexbox, item
align-self start | end | center | stretch
align individual item vertically
flex e.g. 1 1 0, 0 0 200px...
item width
grid, container
display: grid create grid container
gap px, rem, em or %
grid-template-columns e.g. 150px minmax(150px,650px) auto
grid-template-rows e.g. 50px auto
align-items start | end | center | stretch
(positioning items vertically)
justify-items start | end | center | stretch
(positioning items horizontally)
grid, item
align-self start | end | center | stretch
(positioning individual item)
grid-column column span, e.g. 2 / 4
grid-row row span, e.g. 1 / 3
justify-self start | end | center | stretch
(positioning items horizontally)

responsive

media queries
@media() 
@media (width >= 600px) {
   .mobile-only {
      display: none;
   }
}

pro

CSS variables
var() 
:root {
   --primary-color: #655;
   --secondary-color: #855;
}
a {
   color: var(--secondary-color);
}