CSS Backgrounds:

background-color: specifies the background color of an element.

background-color: lightblue;
background-color: #ff0000;
background-color: rgb(255,0,0 / 50%);

background-image: specifies an image to use as the background of an element.

To Set the background image URL:
background-image: url(“image location”);
To Show the background image only once:
background-repeat: no-repeat;
To Position the background image:
background-position: right top or 100px 200px or 25% 75%;
To Specify what the background image should be:
background-attachment: fixed;
To Specifies the size of the background image:
background-size: contain;

CSS Padding & Margin & Border:

padding: properties are used to generate space around an element's content,
inside of any defined borders.
padding: 20px; = all four paddings are 20px
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
or padding: 25px 50px 75px 100px;

margin: properties are used to create space around elements, outside of any
defined borders.
margin: 20px; = all four margin are 20px
margin-top: 50px;
margin-right: 30px;
margin-bottom: 50px;
margin-left: 80px;
Shorthand:
margin: 25px 50px 75px 100px;
The Margin Collapse:
[1] Only Vertical Margin Collapse
[2] Bigger Margin Wins
[3] Margin Collapsing With Elements Without Anything Between
[4] Nesting Does Not Prevent Collapse
border: properties allow you to specify the style, width, and color of an element's
border.

border: 20px; = all four border are 20px

border-top: 50px;
border-right: 30px;
border-bottom: 50px;
border-left: 80px;
To specify what kind of border to display:
border-style: dotted;
border-top-style: solid;
To specify the width of the four borders:
border-width: 5px;
To set the color of the four borders:
border-color: red;
To add rounded borders to an element:
border-radius: 5px;
Shorthand:
border: 5px solid red;

outline: An outline is a line drawn outside the element's border.

outline: 20px; = all four outline are 20px

outline-top: 50px;
outline-right: 30px;
outline-bottom: 50px;
outline-left: 80px;
To specify what kind of outline to display:
outline-style: solid;
To specify the width of the outline:
outline-width: thick;
To set the color of the outline:
outline-color: red;
Shorthand:
outline: 5px solid yellow;

To adds space between an outline and the edge/border of an element,

The space between an element and its outline is transparent:
outline-offset: 15px;
CSS Display:
display: property specifies if/how an element is displayed.
Block:
- Take Full Width If No Width.
- Add Line Break.
- Respect Padding, Margin, Width, Height.
Inline:
- Do Not Repsepct Width, Height.
- Respect Padding And Margin [ Just Right + Left ].
- Do Not Add Line Break.
- Allow Elements Before And After It in The Same Line.
Inline-Block:
- Allow Elements Before And After It in The Same Line.
- Respect Padding, Margin, Width, Height.

CSS Visibility:
visibility: property specifies whether or not an element is visible.
visibility: visible|hidden|collapse|initial|inherit;

CSS Dimensions:
height & width: properties are used to set the height and width of an element.

height: fit-content|auto|length|initial|inherit;
width: fit-content|auto|value|initial|inherit;
To Sets the maximum & minimum height of an element:
max-height: none|length|initial|inherit;
min-height: length|initial|inherit;
To Sets the maximum & minimum width of an element:
max-width: none|length|initial|inherit;
min-width: length|initial|inherit;

CSS Overflow:
overflow: property controls what happens to content that is too big to fit into an
area.

overflow: visible|hidden|scroll|auto|initial|inherit;
overflow-x: visible|hidden|scroll|auto|initial|inherit;
overflow-y: visible|hidden|scroll|auto|initial|inherit;
overflow-wrap: normal|anywhere|break-word|initial|inherit;
CSS Text:

color: the property is used to set the color of the text.

color: blue;

text-shadow: property adds a shadow to text.

text-shadow: 2px 2px 4px #000000;
First value: <left & right>.
Second value: < top & bottom>.
Third value: Transparent.

text-align: the property is used to set the horizontal alignment of a text.

text-align: center|left|right|justify;

direction: property specifies the text direction/writing direction within a block-level

element.
direction: ltr;
ltr: left to right.

text-decoration: the property is used to set or remove decorations from the text.
text-decoration: none|overline|line-through|underline;

text-transform: the property is used to specify uppercase and lowercase letters

in a text.
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

text-indent: the property is used to specify the indentation of the first line of a text.
text-indent: 50px;

line-height: the property is used to specify the space between lines.

line-height: 1.6;

letter-spacing: the property is used to specify the space between the characters
in a text.
letter-spacing: 5px;

word-spacing: the property is used to specify the space between the words in a
text.
word-spacing: 10px|-2px;

white-space: property specifies how white-space inside an element is handled.

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
CSS Fonts:

font-family: property to specify the font of a text.

font-family: Arial, Helvetica, sans-serif;

font-size: property sets the size of the text.

font-size: 40px|2.5em|12rem|24vw|18%;
The font-size value can be an absolute, or relative size:
Absolute size:
Sets the text to a specified size.
Does not allow a user to change the text size in all browsers (bad
for accessibility reasons).
Absolute size is useful when the physical size of the output is
known.
Relative size:
Sets the size relative to surrounding elements.
Allows a user to change the text size in browsers.

text-align: the property is used to set the horizontal alignment of a text.

text-align: center|left|right|justify;

font-style: the property is mostly used to specify italic text.

font-style: normal|italic|oblique|initial|inherit;

font-variant: property specifies whether or not a text should be displayed in a

small-caps font.
font-variant: normal|small-caps|initial|inherit;

font-weight: property specifies the weight of a font.

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

CSS cursor:
cursor: property specifies the mouse cursor to be displayed when pointing over an
element.
cursor: alias|all-scroll|auto|copy|progress|wait|not-allowed;
CSS Float & Clear:

float: the property is used for positioning and formatting content e.g. let an image
float left to the text in a container.
float: left|right|none|inherit|initial;
- When we use the float property, and we want the next element below
(not on right or left), we will have to use the clear property.

clear: property specifies what should happen with the element that is next to a
floating element.
clear: none|left|right|both|initial|inherit;

CSS calc() Function:

calc(): performs a calculation to be used as the property value.
calc(expression);
Content width is: 100%
6 Spaces Between 10px * 6 => 60px From Content Width
100% - 60px = Available Space
5 Elements The width is: (100% - 60px) / 5

CSS Opacity / Transparency:

opacity: property specifies the opacity/transparency of an element.
take a value from (0.0 - 1.0) The lower value, the more transparent:
opacity: 0.5;

CSS Position & Z-Index:

position: property specifies the type of positioning method used for an element.
position: static|relative|fixed|absolute|sticky;
Properties that only work with Position:
top: 80px; right: 0;
left: 80px; bottom: 0;
z-index: -1;
CSS Lists:
Unordered Lists <ul>: the list items are marked with bullets.
● Coffee
● Tea
● Coca Cola
Ordered Lists <ol>: the list items are marked with numbers or letters.
1. Coffee
2. Tea
3. Coca Cola
list-style-type: property specifies the type of list item marker.
list-style-type: circle;
list-style-image: property specifies an image as the list item marker.
list-style-image: url("img.gif");
list-style-position: property specifies the position of the list-item markers.
list-style-position: inside;
Shorthand property:
list-style: square inside url("img.gif");

CSS Tables:
border: specify table borders in CSS.
border: 1px solid black;
border-collapse: property sets whether the table borders should be collapsed
into a single border.
border-collapse: collapse;
text-align: property sets the horizontal alignment (like left, right, or center) of the
content in <th> or <td>.
text-align: center;
vertical-align: property sets the vertical alignment (like top, bottom, or middle) of
the content in <th> or <td>.
vertical-align: bottom;
border-spacing: property sets the distance between the borders of adjacent
cells.
border-spacing: 15px;
empty-cells: property sets whether or not to display borders on empty cells.
empty-cells: show|hide|initial|inherit;
table-layout: property defines the algorithm used to layout table cells, rows, and
columns.
table-layout: fixed;
caption-side: property specifies the placement of a table caption.
caption-side: top|bottom|initial|inherit;
CSS Pseudo-classes:
a pseudo-class is used to define a special state of an element.

The syntax of pseudo-classes:

selector:pseudo-class {property: value;}

Anchor Pseudo-classes: Links can be displayed in different ways.

unvisited link:
a:link {color: #FF0000;}
visited link:
a:visited {color: #00FF00;}
mouse over link:
a:hover { color: #FF00FF;}
selected link:
a:active {color: #0000FF;}

All CSS Pseudo-Classes...

CSS Pseudo-elements:
A CSS pseudo-element is used to style specified parts of an element.

The syntax of pseudo-elements:

selector::pseudo-element {property: value;}

::first-line: used to add a special style to the first line of a text.

p::first-line {color: #ff0000;font-variant: small-caps;}
::first-letter: used to add a special style to the first letter of a text.
p::first-letter {color: #ff0000;font-size: xx-large;}

::before: used to insert some content before the content of an element.

h1::before {content: “”;}
::after: used to insert some content after the content of an element.
p::after {content: “”;}

::marker: pseudo-element selects the markers of list items.

::marker {color: red;}
::selection: matches the portion of an element that is selected by a user.
::selection {color: red;background: yellow;}

All CSS Pseudo-Elements...

CSS Vendor Prefixes: vendor prefixes are a way for your browser to support
new CSS features before they become fully supported in all browsers.

Major browsers use the following prefixes:

● -webkit-: Chrome, Safari, newer versions of Opera, almost all iOS browsers.
● -moz-: Firefox.
● -o-: Old versions of Opera.
● -ms-: Microsoft Edge and Internet Explorer.

CSS Browser Support Reference...

border-radius: property defines the radius of the element's corners.

border-radius: 50%;
border-radius: 15px 50px 30px 5px;
first value: applies to top-left corner,
second value: applies to top-right corner,
third value: applies to bottom-right corner,
fourth value: applies to bottom-left corner.
border-top-left-radius: 2em 5em;
border-top-right-radius: 2em 5em;
border-bottom-right-radius: 2em 5em;
border-bottom-left-radius: 2em 5em;

box-shadow: property attaches one or more shadows to an element.

box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
box-shadow: 10px 10px 8px 10px #888888, 10px 10px 8px 10px #f8f8f88;

box-sizing: property defines how the width and height of an element are
calculated: should they include padding and borders, or not.
box-sizing: border-box;
box-sizing: content-box|border-box|initial|inherit;

CSS caret-color:
the property specifies the color of the cursor (caret) in inputs, textareas, or any
element that is editable.
caret-color: auto|color;

CSS pointer-events:
property defines whether or not an element reacts to pointer events.
pointer-events: auto|none;
CSS Transitions:

transition: allows you to change property values smoothly, over a given duration.
transition: property duration timing-function delay|initial|inherit;
transition: width .35s 0.5s ease-in-out;

transition-delay: property specifies when the transition effect will start, value is
defined in seconds (s) or milliseconds (ms).
transition-delay: time|initial|inherit;
transition-delay: 5s;

transition-duration: property specifies how many seconds (s) or milliseconds

(ms) a transition effect takes to complete.
transition-duration: time|initial|inherit;
transition-duration: 5s;

transition-property: specifies the name of the CSS property the transition effect
is for (the transition effect will start when the specified CSS property changes).
transition-property: none|all|property|initial|inherit;
transition-property: width;

transition-timing-function: specifies the speed curve of the transition effect.

transition-timing-function:
linear|ease|ease-in|ease-out|
ease-in-out|step-start|step-end|
steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
transition-timing-function: linear;

CSS The !important Rule:

!important: used to add more importance to a property/value than normal.
!important rule, it will override ALL previous styling rules for that
specific property on that element!
background-color: red !important ;

CSS filter:
filter: defines visual effects (like blur and saturation) to an element (often <img>).
filter: grayscale(100%);
filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
CSS gradients:
let you display smooth transitions between two or more specified colors.
CSS defines three types of gradients:
● Linear Gradients (goes down/up/left/right/diagonally).
● Radial Gradients (defined by their center).
● Conic Gradients (rotated around a center point).
CSS Linear Gradients:
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
background-image: linear-gradient(to right, red , yellow);
use angles:
background-image: linear-gradient(180deg, red, yellow);

CSS Variables - The var() Function:

var() function: used to insert the value of a CSS variable.

Know That:
CSS variables have access to the DOM, which means that you can create
variables with local or global scope, change the variables with JavaScript, and
change the variables based on media queries.

How var() Works:

First of all: CSS variables can have a global or local scope.
Global variables can be accessed/used through the entire document, while local
variables can be used only inside the selector where it is declared.
var(--name, value)
name: Required. The variable name (must start with two dashes).
value: Optional. The fallback value (used if the variable is not found).

To Declare a Variable in Global Scope:

inside the: root selector. The: root selector matches the document's root element.
:root {
--blue: #1e90ff;
--white: #ffffff;}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }

To Declare a Variable in Local Scope:

inside the selector that is going to use it.
CSS Flexbox:
There are two ways to set the flex property:

For Parent(container):

display: flex;
flex-direction: defines in which direction the container wants to stack the flex items.
flex-direction: row|row-reverse|column|column-reverse;
flex-wrap: specifies whether the flexible items should wrap or not.
flex-wrap: nowrap|wrap|wrap-reverse;
flex-flow: is a shorthand property for [Flex-Direction] + [Flex-Wrap].
flex-flow: row-reverse wrap;
justify-content: property aligns the flexible container's items when the items do not
use all available space on the main-axis (horizontally).
justify-content: flex-start|flex-end|center|space-between|space-evenly;
align-items: property specifies the default alignment for items inside the flexible
container.
align-items: stretch|center|flex-start|flex-end|baseline;
align-content: property modifies the behavior of the flex-wrap property. It is similar
to align-items, but instead of aligning flex items, it aligns flex lines.
align-items: stretch|center|flex-start|flex-end|space-around;

For Child:

flex-grow: property specifies how much the item will grow relative to the
rest of the flexible items inside the same container.
flex-grow: number;
flex-shrink: property specifies how the item will shrink relative to the rest of the
flexible items inside the same container.
flex-shrink: number;
order: property specifies the order of a flexible item relative to the rest of the flexible
items inside the same container.
order: number;
flex-basis: property specifies the initial length of a flexible item.
flex-basis: number;
flex: property sets the flexible length on flexible items.
flex: flex-grow flex-shrink flex-basis|auto;
CSS Grid:
There are two ways to set the Grid property:

For Parent(container):

display: grid;

grid-template-columns: property specifies the number (and the widths) of columns

in a grid layout.
grid-template-columns:auto|max-content|min-content|fr|repeat();

grid-template-rows: property specifies the number (and the heights) of the rows in
a grid layout.
grid-template-rows: auto|max-content|min-content|fr|repeat();

grid gaps:The spaces between each column/row are called gaps.

grid-gap: 50px 100px;
grid-column-gap: 50px;
grid-row-gap: 100px;

grid lines: The lines between columns are called column lines, and lines between
rows are called row lines.
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

grid-template-areas: specifies areas within the grid layout.

You can name grid items by using the grid-area property and then reference the
name in the grid-template-areas property:
in container:
grid-template-areas: nav nav nav . . .;
in the item:
grid-area: nav;
Each area is defined by apostrophes. Use a period sign to refer to a grid item with no
name.

align-content: used to vertically align the whole grid inside the container.
align-content: space-evenly|space-around|start|end|center;

justify-content: used to align the whole grid inside the container.

justify-content: space-evenly|space-around|start|end|center;
For Child:

grid-column: property defines on which column(s) to place an item.

a shorthand property for the grid-column-start and the grid-column-end.
grid-column: 1 / 5;
grid-column: 2 / span 3;

grid-row: property defines on which row to place an item.

a shorthand property for the grid-row-start and the grid-row-end.
grid-row: 1 / span 2;
grid-column: 1 / 5;

grid-area: can be used as a shorthand property for the grid-row-start,

grid-column-start, grid-row-end, and the grid-column-end properties.
grid-area: 1 / 2 / 5 / 6;
The grid-area property can also be used to assign names to grid items.

CSS 2D Transforms:
CSS transforms allow you to move, rotate, scale, and skew elements.
With the CSS transform property you can use the following 2D transformation
methods:

translate() rotate() scale() skew() matrix()

translate(): moves an element from its current position (according to the parameters
given for the X-axis and the Y-axis).
transform: translate(50px, 100px);
rotate(): rotates an element clockwise or counter-clockwise according to a given
degree.
transform: rotate(20deg);
scale(): increases or decreases the size of an element (according to the parameters
given for the width and height).
transform: scale(2, 3);
skew(): method skews an element along the X and Y-axis by the given angles.
transform: skewX(20deg);

matrix(): combines all the 2D transform methods into one.

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
transform: matrix(1, -0.3, 0, 1, 0, 0);
CSS transform-origin:
allows you to change the position of transformed elements.
2D Transform => transform-origin(X, Y)
3D Transform => transform-origin(X, Y, Z)
X-Axis:
● CSS Unit [px, em, rem]
● 50%
● Keywords [left = 0%, center = 50%, right = 100%]
Y-Axis:
● CSS Unit [px, em, rem]
● 50%
● Keywords [top = 0%, center = 50%, bottom = 100%]
This property must be used together with the transform property:
transform-origin: 0 50%;
transform: rotate(100deg);

CSS 3D Transforms:
CSS transforms allow you to move, rotate, scale, and skew elements.
With the CSS transform property you can use the following 3D transformation
methods:

translate3d() rotate3d() scale3d() skew3d() matrix3d()

transform-style: property specifies how nested elements are rendered in 3D space.

transform-style: flat|preserve-3d;

perspective: used to give a 3D-positioned element some perspective.

perspective: 600px;
perspective property defines how far the object is away from the user. So, a lower
value will result in a more intensive 3D effect than a higher value.
When defining the perspective property for an element, it is the CHILD elements that
get the perspective view, NOT the element itself.

perspective-origin: property defines from which position the user is looking at the
3D-positioned element.
perspective-origin: x-axis y-axis;

backface-visibility: property defines whether or not the back face of an element

should be visible when facing the user.
backface-visibility: visible|hidden;
CSS Animations:
An animation lets an element gradually change from one style to another.

@keyframes Rule: rule specifies the animation code.

Specify when the style change will happen in percent or with the keywords "from"
and "to", which is the same as 0% and 100%. 0% is the beginning of the animation,
100% is when the animation is complete:

@keyframes animation-name {keyframes-selector {css-styles;}}

@keyframes mymove {
0% {top: 0px;}
100% {top: 0px;}}

animation-name: property specifies a name for the @keyframes animation.

animation-name: keyframe name;

animation-duration: how long an animation should take to complete one cycle.

animation-duration: time|initial|inherit;

animation-iteration-count: the number of times an animation should be played.

animation-iteration-count: number|infinite;

animation-timing-function: specifies the speed curve of an animation.

animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out;

animation-direction: an animation should be played forwards, backward, or in

alternate cycles.
animation-direction: normal|reverse|alternate|alternate-reverse;

animation-play-state: specifies whether the animation is running or paused.

animation-play-state: paused|running;

animation-delay: specifies a delay for the start of an animation.

animation-delay: number|infinite;

animation-fill-mode: a style for the element when the animation is not playing.
animation-fill-mode: none|forwards|backwards|both;

animation: the property is a shorthand property:

animation: name duration timing-function delay iteration-count direction
fill-mode play-state;
CSS Advanced Selectors:

.class1.class2: Selects all elements with both name1 and name2 set within its class
attribute
.name1.name2
element.class: Selects all <p> elements with class="intro"
p.intro
element>element: Selects all <p> elements where the parent is a <div> element
div > p
element+element: Selects the first <p> element that is placed immediately after
<div> elements
div + p
element1~element2: Selects every <ul> element that is preceded by a <p> element
p ~ ul
[attribute]: Selects all elements with a target attribute
[target]
[attribute=value]: Selects all elements with target="_blank"
[target=_blank]
[attribute~=value]: Selects all elements with a title attribute containing the word
"flower"
[title~=flower]
[attribute*=value]: Selects every <a> element whose href attribute value contains
the substring "w3schools"
a[href*="w3schools"]
[attribute^=value]: Selects every <a> element whose href attribute value begins
with "https"
a[href^="https"]

:first-child: Selects every <p> element that is the first child of its parent
p:first-child
:last-child: Selects every <p> element that is the last child of its parent
p:last-child
:first-of-type: Selects every <p> element that is the first <p> element of its parent
p:first-of-type
:last-of-type: Selects every <p> element that is the last <p> element of its parent
p:last-of-type
:only-child: Selects every <p> element that is the only child of its parent
p:only-child
:only-of-type: Selects every <p> element that is the only <p> element of its parent
p:only-of-type

:not(selector): Selects every element that is not a <p> element

:not(p)
:nth-child(n): Selects every <p> element that is the second child of its parent
p:nth-child(2)
:nth-last-child(n): Selects every <p> element that is the second child of its parent,
counting from the last child
p:nth-last-child(2)
:nth-of-type(n): Selects every <p> element that is the second <p> element of its
parent
p:nth-of-type(2)
:nth-last-of-type(n): Selects every <p> element that is the second <p> element of
its parent, counting from the last child
p:nth-last-of-type(2)

* : Selects all elements

:root: Selects the document's root element
:checked: Selects every checked <input> element
:empty: Selects every <p> element that has no children (including text nodes)
:focus: Selects the input element which has focus

CSS @media Rule:

The @media rule is used in media queries to apply different styles for different
media types/devices.

Using media queries are a popular technique for delivering a tailored style sheet
(responsive web design) to desktops, laptops, tablets, and mobile phones also for
print, screen, or speech:

Mobile: @media (max-width: 767px) { your style }

Small Screens: @media (max-width: 768px) { your style }

Medium Screens: @media (max-width: 992px) { your style }

Large Screens: @media (max-width: 1200px) { your style }

Custom Screen:@media (max-width: 1199px) { your style }

How to Master CSS

CSS Battle
Front-End Mentor
Elzero Challenges

CSS References

MDN
Dev Docs
CSS Reference
W3schools
Tympanus
CSS Tricks
CSS Triggers
CSS Properties
Meiert

Contact me
FB - Hasaan Muhammed