Course Summary: CSS Bootcamp - Master CSS
Apr 11, 2019
4 minute read

CSS Bootcamp - Master in CSS including CSS-Grid and -Flexbox

CSS Basics

CSS Selectors

  • by tag name: <div>
  • by class name: .my-div
  • by id name: #my-div
  • # > . > tag-name

CSS Combinators

  • Descendant (space)
  • Child (>)
  • Adjacent sibling (+)
  • General sibling (~)

Colors

  • 140 predefined colors by name
  • rgb(red, green, blue)
  • rgba(red, green, blue, opacity)
  • hexadecimal (#ff0000 - red)
  • red grabs user’s attention
  • green is restful for user’s eyes
  • blue relaxes, refreshes
  • choose right dominant color, perfect color scheme, right background color, color on correct places

Inheritance

  • children inheritent from closest parent all css

Text formatting

  • do not use pixels
  • font-size
  • text-align: center, left … justify (take what you need, block level)
  • display: inline; (take what you need)f
  • Fonts - Generic (Family) like Serif, Sans-Serif, Cursive, Monospace (all letters same sizes) - Font (Name) like Times New Roman - Comma separated font families - font-family: Helvetica, …;
  • fonts.google.com
  • font-weight: thickness of font
  • font-style: italic;

Box Model

  • Margin > Border > Padding > Content
  • border: [width][color] [style]
  • padding: [top][ right] [bottom][left]
  • margin: [top][ right] [bottom][left]
  • padding/margin: [top&bottom][right&left]
  • width/height
  • box-sizing: content-box or border-box (padding and border in total width and height)
  • margin: 100px auto; -> centered

Pseudo Classes and Elements

  • pseudo classes (a:hover) -> state of an element - a:link { … } before visiting, text-decoration: none; -> no underline - a:visited { … } after visited - a:hover {…} on mouse over - a:active {…} while clicked

    .dropdown-content a {
    	display: none;
    }
    
    .dropdown:hover .dropdown-content a {
    	display: block;
    }
    
    <div class="dropdown">
    	<a href="#">Items</a>
    	<div class="dropdown-content">
    		<a href="#">item 1</a>
    		<a href="#">item 2</a>
    		<a href="#">item 3</a>
    	</div>
    </div>
    
  • ul { list-style: none…}

  • ul li:first-child

  • ul li:last-child

  • ul li:nth-child(n) | nth-lastchild

  • pseudo elements (h1::after) -> style for specific part of an element

    <h1>Heading</h1>
    
    h1::first-letter {
    	font-size: 70px;
    	font-style: italic;
    	color: goldenrod;
    }
    
  • h1::before { content: “This is ” }

  • h1::after { content: “ of Website” }

Measurement Units

  • Absolute vs Relative - absolute: px, cm, mm, in, pt, pc - relative: em, rem, vw, vh, %
  • rem will we a multiple of the font-size of html tag
  • % relative to parent
  • 100vh 100% of view height

Positions

  • static, relative, absolute, fixed, sticky
  • absolute elements without moving other elements
  • parent to position: relative|absolute and child to absolute -> child will stay inside element, if parent: static child would move out of the parent
  • z-index: xxx -> draw on top/below others
  • fixed -> same even if scrolled
  • sticky -> child is visible until parent is out of sight when scrolling

Overflow

  • visible, hidden, auto, scroll
  • visible is default, hidden -> don’t show the overflow content
  • auto -> scrollbar
  • scroll -> scrollbars, vertical or horizontal

Floats

  • float: right|left
  • when all children of parent are floats, parent will not get rendered - fix by - overflow: auto - div class=clear and clear { clear: both } - parent container with new class clearfix and css: .clearfix::after { content: ""; display: block; clear:both; }

Backgrounds

  • background image: url(..)
  • background-repeat: if div is greater than img itself
  • background-size: cover (full space), contain
  • background-position and -attachment (paralax effect)
  • backgound-origin box-sizing
  • backgound-clip: [box-sizing]
  • background: [color][img] [repeat][position] [attachment][size]

Gradient

  • background-image: linear-gradient(to [left/top], colors)
  • background: linear-gradient(…), url(…[like above an image])

Shadows

  • text-shadow: 3px 3px 10px #888;
  • box-shadow
  • combination with :hover for profit

Transitions

  • transition-property: [eg. width]
  • transition-duration: 1s
  • ”“-delay: 1s
  • cubic-bezier.com

Flexbox

Why not floats

  • less popular
  • inconvenient way
  • needs much effort

What is Flexbox

  • improves way of layout
  • fully supported in all modern browsers
  • CSS flexible Layout Module

Concepts

  • display: flex || inline-flex
  • Flex Container, Flex Items, Main Axis, Cross Axis
  • Flex Container - flex-direction: row | row-verse | column | column-reverse - flex-wrap: row wrap - flex-flow: row wrap - justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly - align-items: stretch | flex-start | flex-end | center | baseline - align-content: stretch || flex-start | flex-end | center | space-between | space-around
  • Flex Items: - order: 0 | number - align-self: auto || stretch | flex-start | flex-end | center | baseline - flex-grow: 0 | number - flex-basis: auto | length - flex-shrink: 1 | number - flex: 0 1 auto
  • space-around -> same size on both sides
  • space-evenly -> space between all items is same
  • baseline -> aligns items on the same height where their content starts
  • align-self -> move one item where you want in the box
  • flex-grow: 1 -> take as much place as possible
  • wrap does not allow items to shrink
  • flex-basis -> change length of items
  • flex: 0 1 auto; (grow, shrink, basis)

Grid

  • one dimensional vs two (flex vs grid)
  • display: grid;
  • grid-template-rows/-columns: 1fr 1fr 1fr (3x columns/rows)
  • grid-gap / grid-row/-column-gap
  • grid-column: 1 / span 2; (span from column 1 till 2)