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
::first-line first line of element
::selection selected part of element

units

units
px a pixel
em percentage of parent font size
rem percentage of <html> font size
% percentage of width
fr fraction of available width
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 | ...
list-style-image url(...)

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
background: #fff url(img_tree.png) no-repeat right top; background-color: #fff;
background-image: url(img_tree.png);
background-repeat: no-repeat;
background-position: right top;

box model

margins, paddings, border
border: 2px solid #900; border-width: 2px;
border-style: solid;
border-color: #900;
border-color e.g. #ccc
border-radius e.g. 3px
border-style none | solid | dashed | dotted
border-width px, rem, em or %
margin: 10px
(same for padding)		 margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin: 5px 10px
(same for padding)		 margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
margin: 5px 10px 15px 20px
(same for padding)		 margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
dimensions (doesn't work on inline elements!)
box-sizing border-box | content-box
(include | exclude padding and border)
height px, rem, em or %
max-width px, rem, em or %
min-width px, rem, em or %
width px, rem, em, %, fit-content
other
box-shadow e.g. 10px 10px 5px #888;
(left, top, blur, color)

other

transitions
transition: background 0.3s; transition-property: background;
transition-duration: 0.3s;
transition-property all | css property
transition-duration number of seconds
animation
@keyframes 
@keyframes my-animation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#my-el {
  my-animation 3s infinite ease-in-out;
}
transform rotate, skew, scale, rotate...
e.g. rotate(8deg) skewY(15deg);
image editing
filter blur, hue, sepia, brightness, contrast...
e.g. grayscale(70%);
transform rotate, skew, scale, rotate...
e.g. rotate(8deg) skewY(15deg);
transforms
filter blur, hue, sepia, brightness, contrast...
e.g. grayscale(70%);
miscellaneous
cursor auto | pointer | help | not-allowed
calc() e.g. width: calc((100% - 250px) / 3)
var() 
:root {
   --primary-color: #655;
   --secondary-color: #855;
}
a {
   color: var(--secondary-color);
}
@media() 
@media (width >= 600px) {
   .mobile-only {
      display: none;
   }
}

layout

appearance
display none | inline | 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 none | left | right
clear none | left | right | both
flexbox
align-items flex-start | flex-end | center | stretch
(positioning items across flex direction)
gap, column-gap, row-gap px, rem, em or %
display: flex create flex container
flex-direction row | row-reverse | column | column-reverse
flex-wrap wrap | nowrap
flex-flow: row nowrap flex-direction: row;
flex-wrap: nowrap;
justify-content flex-start | flex-end | center | space-between
(positioning items along flex direction)
grid
align-items start | end | center | stretch
(positioning items vertically)
display: grid create grid container
grid-area e.g. grid-area: contentleft;
grid-column column span, e.g. 2 / 4
grid-row row span, e.g. 1 / 3
grid-template-columns e.g. 150px minmax(150px,650px) auto
grid-template-rows e.g. 50px auto
grid-template-areas e.g. grid-template-areas: "topleft . topright"
"contentleft bottom contentright";
justify-items start | end | center | stretch
(positioning items horizontally)