Course Summary: CSS Bootcamp - Master CSS
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, ifparent: 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] (border-box, content- etc)
- 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)