CSS SELECTORS

SIMPLE SELECTORS

Element Selectors
Id Selectors (#)
Class Selectors (.)
Group Selectors (,)
Universal Selector (*)

COMBINATOR SELECTORS

Descendant Combinator (space)
Child Combinator (>)
Next Sibling Combinator (+)
Subsequent-Sibling Combinator (~)

ATTRIBUTE SELECTORS

Selector[Attribute]
Selector[Attribute = "Value"]
Selector[Attribute ~= "Value"]
Selector[Attribute |= "Value"]
Selector[Attribute ^= "Value"]
Selector[Attribute $= "Value"]
Selector[Attribute *= "Value"]

BOX MODEL

My Contents!
The width property sets the width of an element
Related Value(s)
width: CSS Global Values;
width: CSS Length Values;
width: auto;
width: min-content;
width: fit-content;
width: max-content;
The min-width property defines the minimum width of an element
Related Value(s)
min-width: CSS Global Values;
min-width: CSS Length Values;
min-width: auto;
min-width: min-content;
min-width: fit-content;
min-width: max-content;
The max-width property defines the maximum width of an element
Related Value(s)
max-width: CSS Global Values;
max-width: CSS Length Values;
max-width: none;
max-width: min-content;
max-width: fit-content;
max-width: max-content;
The height property sets the height of an element
Related Value(s)
height: CSS Global Values;
height: CSS Length Values;
height: auto;
height: min-content;
height: fit-content;
height: max-content;
The min-height property defines the minimum height of an element
Related Value(s)
min-height: CSS Global Values;
min-height: CSS Length Values;
min-height: auto;
min-height: min-content;
min-height: fit-content;
min-height: max-content;
The max-height property defines the maximum height of an element
Related Value(s)
max-height: CSS Global Values;
max-height: CSS Length Values;
max-height: none;
max-height: min-content;
max-height: fit-content;
max-height: max-content;
The padding defines space around an element's content, inside of any defined border
There are some generic-side properties that can be written as its values
4 values = padding: padding-top padding-right padding-bottom padding-left;
3 values = padding: padding-top padding-Horizontal padding-bottom;
2 values = padding: padding-Vertical padding-Horizontal;
1 value = padding: padding-All;
Related Value(s)
padding: CSS Global Values;
padding: CSS Length Values;
The margin property specifies space around elements, outside of any defined border
There are some generic-side properties that can be written as its values
4 values = margin: margin-top margin-right margin-bottom margin-left;
3 values = margin: margin-top margin-Horizontal margin-bottom;
2 values = margin: margin-Vertical margin-Horizontal;
1 value = margin: margin-All;
Related Value(s)
margin: CSS Global Values;
margin: CSS Length Values;
margin: auto;
The border-width property specifies the width of an element's borders
There are some generic-side properties that can be written as its values
4 values = border-width: border-top-width border-right-width border-bottom-width border-left-width;
3 values = border-width: border-top-width border-Horizontal-width border-bottom-width;
2 values = border-width: border-Vertical-width border-Horizontal-width;
1 value = border-width: border-All-width;
Related Value(s)
border-width: CSS Global Values;
border-width: CSS Length Values;
border-width: medium;
border-width: thin;
border-width: thick;
The border-style property specifies the style of an element's borders
There are some generic-side properties that can be written as its values
4 values = border-style: border-top-style border-right-style border-bottom-style border-left-style;
3 values = border-style: border-top-style border-Horizontal-style border-bottom-style;
2 values = border-style: border-Vertical-style border-Horizontal-style;
1 value = border-style: border-All-style;
Related Value(s)
border-style: CSS Global Values;
border-style: none;
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: hidden;
border-style: groove;
border-style: inset;
border-style: outset;
border-style: ridge;
The border-color property specifies the color of an element's borders
There are some generic-side properties that can be written as its values
4 values = border-color: border-top-color border-right-color border-bottom-color border-left-color;
3 values = border-color: border-top-color border-Horizontal-color border-bottom-color;
2 values = border-color: border-Vertical-color border-Horizontal-color;
1 value = border-color: border-All-color;
Related Value(s)
border-color: CSS Global Values;
border-color: CSS Color Values;
border-color: currentColor;
border-color: transparent;
The border-radius property defines the radius of the element's corners
There are some generic-side properties that can be written as its values
4 values = border-radius: border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius;
3 values = border-radius: border-top-left-radius border-Diagonal-Right-Left-radius border-bottom-right-radius;
2 values = border-radius: border-Diagonal-Left-Right-radius border-Diagonal-Right-Left-radius;
1 value = border-radius: border-All-radius;
Related Value(s)
border-radius: CSS Global Values;
border-radius: CSS Length Values;
The outline-width property specifies the width of an outline, drawn around elements, outside the borders
Related Value(s)
outline-width: CSS Global Values;
outline-width: CSS Length Values;
outline-width: medium;
outline-width: thin;
outline-width: thick;
The outline-style property specifies the style of an outline, drawn around elements, outside the borders
Related Value(s)
outline-style: CSS Global Values;
outline-style: none;
outline-style: solid;
outline-style: dashed;
outline-style: dotted;
outline-style: double;
outline-style: hidden;
outline-style: groove;
outline-style: inset;
outline-style: outset;
outline-style: ridge;
The outline-color property specifies the color of an outline, drawn around elements, outside the borders
Related Value(s)
outline-color: CSS Global Values;
outline-color: CSS Color Values;
outline-color: currentColor;
outline-color: transparent;
The outline-offset property adds space between the outline and the edge or border of an element
Related Value(s)
outline-offset: CSS Global Values;
outline-offset: CSS Length Values;
The box-sizing property defines how the width and height of an element are calculated in box dimensions
The padding and border also may be included
Related Value(s)
box-sizing: CSS Global Values;
box-sizing: border-box;
box-sizing: content-box;
The box-shadow property specifies one or multiple shadows to an element
box-shadow: H-Offset V-Offset Blur-Radius Spread-Radius Color inset;
H-Offset
Required parameter which specifies the horizontal offset of the shadow
A positive value puts the shadow on the right side of the box
A negative value puts the shadow on the left side of the box
V-Offset
Required parameter which specifies the vertical offset of the shadow
A positive value puts the shadow below the box
A negative value puts the shadow above the box
Blur-Radius
Optional parameter which specifies the blur radius of the shadow
The higher the number, the more blurred the shadow will be
Spread-Radius
Optional parameter which specifies the spread radius of the shadow
A positive value increases the size of the spread radius shadow
A negative value decreases the size of the spread radius shadow
Color
Optional parameter which specifies the color of the shadow
inset
Optional value which changes the shadow from an outer shadow to an inner shadow
INSIGHTS
width vs. min-width vs. max-width
width property overrides the original width of the element
min-width overrides width when min-width > width
max-width overrides width when max-width < width
Overall, min-width is the most top priority followed by max-width, width and the original width of the element
height vs. min-height vs. max-height
height property overrides the original height of the element
min-height overrides height when min-height > height
max-height overrides height when max-height < height
Overall, min-height is the most top priority followed by max-height, height and the original height of the element
Limited Size Box Dimensions
The browser adjust the contents based on the width of the element first
If the content is larger than the width, it will always automatically change the height of the element (assuming height: auto;)
If not, the content is display on the next line within specified height
If the contents are not fit within the specified height, it will overflow
Use overflow property on the container to manage overflowed contents
Actual Size Box Dimensions
Width Dimension = "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width"
Height Dimension = "border-top-width" + "padding-top" + "height" + "padding-bottom" + "border-bottom-width"
The outline property does not affect the actual size box dimensions and may overlaps with other contents
The box-sizing: border-box; property is the best practice to be used for box dimensions
Margin collapse
The margin collapse happens due to margin-top and margin-bottom collapsed into a single margin that is equal to the largest of those two margins
The margin collapse only happens on vertical margin (top and bottom) but not on horizontal margin (left and right)
Example, if Element A has margin-bottom: 20px; and Element B has margin-top: 30px; the vertical margin between Element A and Element B would be 30px
Instead of being 50px ( 20px from Element A's bottom margin + 30px from Element B's top margin), the actual vertical margin is 30px due to margin collapse
border: border-width border-style border-color;
The border-width and border-style properties are required
The border-color is optional and when omitted, the border color applied will be the color of the text
The border property also can be written with side properties with their own shorthand property
border-top: border-top-width border-top-style border-top-color;
border-right: border-right-width border-right-style border-right-color;
border-bottom: border-bottom-width border-bottom-style border-bottom-color;
border-left: border-left-width border-left-style border-left-color;
outline: outline-width outline-style outline-color;
The outline-width and outline-style properties are required
The outline-color is optional and when omitted, the outline color applied will be the color of the text

BOX LAYOUT

My Contents!
The position property specifies the type of positioning method used for an element
Related Value(s)
position: CSS Global Values;
position: static;
position: relative;
position: fixed;
position: absolute;
position: sticky;
The inset property sets the distance between an element and the parent element
There are some generic-side properties that can be written as its values
4 values = inset: top right bottom left;
3 values = inset: top Horizontal bottom;
2 values = inset: Vertical Horizontal;
1 value = inset: All;
Related Value(s)
inset: CSS Global Values;
inset: CSS Length Values;
inset: auto;
The float property specifies whether an element should float to the left, right, or not at all
Related Value(s)
float: CSS Global Values;
float: none;
float: left;
float: right;
float: inline-start;
float: inline-end;
The clear property specifies what should happen with the element that is next to a floating element
Related Value(s)
clear: CSS Global Values;
clear: none;
clear: left;
clear: right;
clear: both;
The display property specifies the display behavior (the type of rendering box) of an element
Related Value(s)
display: CSS Global Values;
display: inline;
display: block;
display: flex;
display: grid;
display: none;
display: contents;
display: inline-block;
display: inline-flex;
display: inline-grid;
display: inline-table;
display: list-item;
display: run-in;
display: table;
display: table-caption;
display: table-column-group;
display: table-column;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: flexbox;
display: inline-flexbox;
display: flow-root;
display: ruby;
display: ruby-base-container;
display: ruby-base;
display: ruby-text-container;
display: ruby-text;
The flex-direction property specifies the direction of the flexible items
Related Value(s)
flex-direction: CSS Global Values;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
The flex-wrap property specifies whether the flexible items should wrap or not
Related Value(s)
flex-wrap: CSS Global Values;
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container
Related Value(s)
flex-grow: CSS Global Values;
flex-grow: Numbers;
The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container
Related Value(s)
flex-shrink: CSS Global Values;
flex-shrink: Numbers;
The flex-basis property specifies the initial length of a flexible item
Related Value(s)
flex-basis: CSS Global Values;
flex-basis: CSS Length Values;
flex-basis: auto;
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container
Related Value(s)
order: CSS Global Values;
order: Numbers;
The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout
The values are a space-separated list, where each value specifies the height of the respective row
Related Value(s)
grid-template-rows: CSS Global Values;
grid-template-rows: CSS Length Values;
grid-template-rows: none;
grid-template-rows: auto;
grid-template-rows: min-content;
grid-template-rows: fit-content;
grid-template-rows: max-content;
grid-template-rows: minmax(Min, Max);
grid-template-rows: repeat();
grid-template-rows: subgrid;
The grid-template-columns property specifies the number (and the widths) of columns in a grid layout
The values are a space separated list, where each value specifies the size of the respective column
Related Value(s)
grid-template-columns: CSS Global Values;
grid-template-columns: CSS Length Values;
grid-template-columns: none;
grid-template-columns: auto;
grid-template-columns: min-content;
grid-template-columns: fit-content;
grid-template-columns: max-content;
grid-template-columns: minmax(Min, Max);
grid-template-columns: repeat();
grid-template-columns: subgrid;
The grid-row-start property defines on which row-line the item will start
Related Value(s)
grid-row-start: CSS Global Values;
grid-row-start: auto;
grid-row-start: span;
The grid-column-start property defines on which column-line the item will start
Related Value(s)
grid-column-start: CSS Global Values;
grid-column-start: auto;
grid-column-start: span;
The grid-row-end property defines how many rows an item will span, or on which row-line the item will end
Related Value(s)
grid-row-end: CSS Global Values;
grid-row-end: auto;
grid-row-end: span;
The grid-column-end property defines how many columns an item will span, or on which column-line the item will end
Related Value(s)
grid-column-end: CSS Global Values;
grid-column-end: auto;
grid-column-end: span;
The align-content property applied on container which specifies how "item lines" are distributed along the cross axis in a container
Related Value(s)
align-content: CSS Global Values;
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: start;
align-content: end;
align-content: left;
align-content: right;
align-content: center;
align-content: normal;
align-content: safe;
align-content: unsafe;
align-content: baseline;
align-content: first-baseline;
align-content: last-baseline;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
The justify-content property applied on container which aligns the items when they do not use all available space on the main-axis (horizontally)
Related Value(s)
justify-content: CSS Global Values;
justify-content: flex-start;
justify-content: flex-end;
justify-content: start;
justify-content: end;
justify-content: left;
justify-content: right;
justify-content: center;
justify-content: stretch;
justify-content: safe;
justify-content: unsafe;
justify-content: baseline;
justify-content: first-baseline;
justify-content: last-baseline;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
The align-items property applied on container which specifies the default alignment for items inside a container
Related Value(s)
align-items: CSS Global Values;
align-items: normal;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;
align-items: start;
align-items: end;
align-items: center;
align-items: stretch;
align-items: safe;
align-items: unsafe;
align-items: baseline;
align-items: first-baseline;
align-items: last-baseline;
The justify-items property is set on the grid container to give child elements (grid items) alignment in the inline direction
Related Value(s)
justify-items: CSS Global Values;
justify-items: legacy;
justify-items: flex-start;
justify-items: flex-end;
justify-items: self-start;
justify-items: self-end;
justify-items: start;
justify-items: end;
justify-items: left;
justify-items: right;
justify-items: center;
justify-items: stretch;
justify-items: auto;
justify-items: normal;
justify-items: safe;
justify-items: unsafe;
justify-items: baseline;
justify-items: first-baseline;
justify-items: last-baseline;
The align-self property specifies the alignment in the block direction for the selected item inside a container
Related Value(s)
align-self: CSS Global Values;
align-self: auto;
align-self: normal;
align-self: flex-start;
align-self: flex-end;
align-self: self-start;
align-self: self-end;
align-self: start;
align-self: end;
align-self: center;
align-self: stretch;
align-self: safe;
align-self: unsafe;
align-self: baseline;
align-self: first-baseline;
align-self: last-baseline;
The justify-self property applied on items which aligns a grid item within its grid cell in the inline direction
Related Value(s)
justify-self: CSS Global Values;
justify-self: auto;
justify-self: normal;
justify-self: flex-start;
justify-self: flex-end;
justify-self: self-start;
justify-self: self-end;
justify-self: start;
justify-self: end;
justify-self: left;
justify-self: right;
justify-self: center;
justify-self: stretch;
justify-self: safe;
justify-self: unsafe;
justify-self: baseline;
justify-self: first-baseline;
justify-self: last-baseline;
The vertical-align property sets the vertical alignment of an element
Related Value(s)
vertical-align: CSS Global Values;
vertical-align: CSS Length Values;
vertical-align: baseline;
vertical-align: auto;
vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
The z-index property specifies the stack order of an element
An element with greater stack order is always in front of an element with a lower stack order
Related Value(s)
z-index: CSS Global Values;
z-index: Numbers;
z-index: auto;
INSIGHTS
Pair property of position and inset
It is best practice to use position and inset properties together
In horizontal distance, left property is more priority than right property
In vertical distance, top property is more priority than bottom property
Pair property of float and clear
It is best practice to use float and clear properties together
Standard structure for "flex" element
Flex Container = display: flex; flex-flow: flex-direction flex-wrap;
Flex Items = flex: flex-grow flex-shrink flex-basis; order: myValue;
Standard structure for "grid" element
Grid Container = display: grid; grid: grid-template-rows / grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow;
grid-template: grid-template-rows / grid-template-columns grid-template-areas;
Grid Items = grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
grid-row: grid-row-start / grid-row-end;
grid-column: grid-column-start / grid-column-end;
Shorthand properties for content's related properties
place-content: align-content justify-content;
place-items: align-items justify-items;
place-self: align-self justify-self;

ANIMATION & TRANSITION

animation-name: myValue;

The animation-name property specifies a name for the @keyframes animation
Related Value(s):
CSS Global Values
Strings ( Any custom name for the animation )
none ( A default value which there is no animation name specified )

animation-duration: myValue;

The animation-duration property defines how long an animation should take to complete one cycle
Related Value(s):
CSS Global Values
CSS Time Values ( Written in millisecond, ms or second, s)
0 ( A default value which there is no duration specified for the animation )

animation-timing-function: myValue;

The animation-timing-function specifies the speed curve of an animation
The speed curve defines the time an animation uses to change from one set of CSS styles to another
Related Value(s):
CSS Global Values
ease ( A default value which the animation has a slow start, then fast, before it ends slowly )
cubic-bezier(n, n, n, n)
ease-in ( The animation has a slow start )
ease-out ( The animation has a slow end )
ease-in-out ( The animation has both a slow start and a slow end )
linear ( The animation has the same speed from start to end )
steps(int, start|end)
step-start ( Equivalent to steps(1, start) )
step-end ( Equivalent to steps(1, end) )

animation-delay: myValue;

The animation-delay property specifies a delay for the start of an animation
Related Value(s):
CSS Global Values
CSS Time Values ( Written in millisecond, ms or second, s)
0 ( A default value which there is no delay specified for the animation )

animation-iteration-count: myValue;

The animation-iteration-count property specifies the number of times an animation should be played
Related Value(s):
CSS Global Values
Numbers ( Any numbers which defines how many times an animation should be played )
1 ( A default value which defines how many times an animation should be played )

animation-direction: myValue;

The animation-direction property defines whether an animation should be played forward, backward or in alternate cycles
Related Value(s):
CSS Global Values
normal ( A default value which the animation is played as normal, forwards )
reverse ( The animation is played in reverse direction, backwards )
alternate ( The animation is played forwards first, then backwards )
alternate-reverse ( The animation is played backwards first, then forwards )

animation-fill-mode: myValue;

The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played
The animation-fill-mode property can override this behavior
Related Value(s):
CSS Global Values
none ( A default value which the animation will not apply any styles to the element before or after it is executing )
backwards ( The element will get the style values that is set by the first keyframe, depends on animation-direction, and retain this during the animation-delay period )
both ( The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions )
forwards ( The element will retain the style values that is set by the last keyframe, depends on animation-direction and animation-iteration-count )

animation-play-state: myValue;

The animation-play-state property specifies whether the animation is running or paused
Related Value(s):
CSS Global Values
paused ( Specifies that the animation is paused )
running ( A default value which specifies that the animation is running )

transition-property: myValue;

The transition-property property specifies the name of the CSS property the transition effect is for
The transition effect will start when the specified CSS property changes
A transition effect could typically occur when a user hover over an element
Related Value(s):
CSS Global Values
all ( A default value which all properties will get a transition effect )
none ( No property will get a transition effect )

transition-duration: myValue;

The transition-duration property specifies how long a transition effect takes to complete
Related Value(s):
CSS Global Values
CSS Time Values ( Written in millisecond, ms or second, s)

transition-timing-function: myValue;

The transition-timing-function property specifies the speed curve of the transition effect
This property allows a transition effect to change speed over its duration
Related Value(s):
CSS Global Values
ease
cubic-bezier(n, n, n, n)
ease-in
ease-out
ease-in-out
linear
step-end ( Equivalent to steps(1, end) )
step-start ( Equivalent to steps(1, start) )
steps(int, start|end)

transition-delay: myValue;

The transition-delay property specifies when the transition effect will start
Related Value(s):
CSS Global Values
CSS Time Values ( Written in millisecond, ms or second, s)

TYPOGRAPHY

My Contents!
The color property specifies the color of text
Related Value(s)
color: CSS Global Values;
color: CSS Color Values;
color: currentColor;
color: transparent;
The font-style property specifies the font style for a text
Related Value(s)
font-style: CSS Global Values;
font-style: normal;
font-style: italic;
font-style: oblique;
INSIGHTS
INSIGHTS TYPOGRAPHY
  • font: font-style font-variant font-weight font-size/line-height font-family;
  • font-variant: myValue;

  • font-weight: myValue;

  • font-size: myValue;

  • line-height: myValue;

  • font-family: myValues;

  • font-kerning

  • text-align: myValue;

  • text-align-last: myValue;

  • text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness;

  • text-emphasis: text-emphasis-style text-emphasis-color;

  • text-emphasis-position: myValue;

  • text-indent: myValue;

  • text-justify: myValue;

  • text-orientation: myValue;

  • text-overflow: myValue;

  • text-shadow: H-Offset V-Offset Blur-Radius Color;

  • text-transform: myValue;

  • text-underline-offset: myValue;

  • text-underline-position: myValue;

  • letter-spacing: myValue;

  • direction: myValue;

  • unicode-bidi: myValue;

  • white-space: myValue;

  • word-break: myValue;

  • word-spacing: myValue;

  • word-wrap: myValue;

  • writing-mode: myValue;

  • tab-size: myValue;

  • hyphens: myValue;

  • hyphenate-character: myValue;

    • INSIGHTS: