Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS - Coggle Diagram
CSS
01-Basics
1.1- Syntax
inline, internal, external, style tag, link tag, element selector
1.2-Color
RGB, HSL, Hex
1.3-Simple Selectors
Element name
Class selector
ID selector
Group selectors - elem, class or id
Universal selector - *
1.4-Background
background-image, url
background-repeat, no-repeat
background-attachment
fixed the image at one place even if you scroll
background-size, cover
image covers the entire container
background-position
used to keep important part of the image when re-sized
1.5-Borders
border-style
border-width
border-color
border-radius
1.6-Margins
margin-collapse
space outside borders
1.7-Padding
space inside borders
1.8-Box Model
content, padding, border, margin
box-sizing: border-box = border+padding+content_size = content width
1.9-Text
text-align
text-decoration
text-transform
text-indent
letter-spacing
line-height
direction
word-spacing
text-shadow
1.10-Fonts
serif & sans-serif
serif has lines at the bottom, used for novels. sans-serif is without these lines
font-family
font-style
font-size
font-weight
1.11-Links
text-decoration
state-> normal/link, visited, hover, active
pseudo classes-> a:link, a:visited, a:hover, a:active
1.12-Lists
list-style-type
list-style-position
list-style-type
1.13-Tables
border-collapse
1.14-Display
1.15-Position
static, relative, absolute, fixed, sticky
1.16-Overflow
03-Advanced
3.1-2D Transforms
translate, scale, rotate, skew, matrix
3.2-3D Transforms
translate3d, rotate3d, scale3d, perspective
3.3-Transition
delay, duration, property, timing function-cubic-bezier
3.4-Animations
3.5-CSS Functions
var, cubic-bezier, calc, hsl, linear-gradier, radial-gradient, repeating-linear-gradient, repeating-radial-gradient, rgb, rgba
3.6-CSS Image
3.7-Background Image
3.8-Multi Column
3.9-User Interface
resize, outline
3.10-Object fit
fill, contain, cover, none
3.11-Object position
3.12-Background blend mode
3.13-Mix blend
3.14- Filter
3.15-Clip path
02-Intermediate
2.1-Combinator Selectors
descendent (SPACE)
child (>)
adjacent sibling (+)
they should come after and not before
general (~)
2.2-Pseudo class selectors
states
link-->default
visited
hover
active-->when mousedown
:firstchild, :last-child
:disabled, :enabled
:checked
:first-of-type, :last-of-type
:invalid
:readonly
:required
:not(<elem>)
:only-child, :only-of-type, :nth-child(#), :nth-last-child(#), :nth-of-type(#), :nth-last-of-type(#)
2.3-transparency, rgba
2.4-Pseudo element selector
::first-letter, ::first-line
::before, ::after
::selection
2.5-Attribute selector
<elem>[<attr-name>], =, like ~=, starts with and followed by dashes |=
starts with ^=, ends with $=, contains *=
2.6-CSS Units
2.7-Specificity
2.8-Border
2.9-Box Shadow
2.10-Gradients