CSS Full Documentation

For a better reading experience, check the published document

Basic Info

CSS: It stands for Cascaded Style Sheet. We use this language to decorate the website and add animations to its elements after building it with HTML.

We have several ways to add styles to any HTML tag, but all of them give the same result in the end.

Comments

we can type multiple-line comments between this /* and this */ .

Types and features of HTML elements

Block Elements

take full width if none given

adds a line break (doesn't allow elements before it and after it)

respects paddings, margins, width, height

Inline Elements:

doesn't add a line break (allow elements before it and after it)

doesn't respect width, height

only respects right and left paddings and margins

Inline-Block Elements:

respects paddings, margins, width, height

doesn't add a line break (allow elements before it and after it)

CSS Selectors (how to reach the tag)

A selector is a CSS tool that selects a specific tag or a set of them. We have too many methods to reach a specific tag or a range of tags, but all of them will provide the same result eventually.

CSS Attributes

After selecting the tag/s that we want to style, now is the time to see the styles collections that CSS has. We have a massive amount of attributes in the CSS where each one is responsible for controlling a specific property or adding a specific effect to the tag.

Combined attributes

For some attributes, we can use a single one to control multiple values or we can use 4 similar subattributes where each one controls a single value.

For example:

The attribute (margin) can specify the margins for the 4 sides (top, bottom, left, right). But we can use the attributes (margin-top, margin-bottom, margin-right, margin-left) to control margins for each side individually.

For the single attribute, it can accept many forms of input value:

1) one value: it will be applied on all 4 sides

margin: 20px;

2) four values: it will specify the 4 sides in the order (top right bottom left)

margin: 20px 10px 5px 15px;

3) two values: it will duplicate the 2 values to represent the 4 sides (20px 10px 20px 10px)

margin: 20px 10px;

Attributes Inheritance

When we place an element inside another in HTML, some of the attributes of the parent (the container) will be inherited by the child (the inner element). We have 3 scenarios for inheritance:

1) allowed inheritance: allowed attributes will be inherited like (center, background, ...etc)

2) illogical inheritance: inheriting some attributes is illogical like (padding, margin, ...etc)

3) denied inheritance: if both child and parent have the same attribute with different values, the child's value will be applied

Overwriting Attributes

When we have some styles done by a non-editable CSS file, sometimes we might need to overwrite some of the attributes that are done by that file but in another one. We can use the !important attribute for that, we can add it to any attribute in the CSS file and it will apply the new value and delete the previous.

p {
    color: red !important;
}

Measurement units in CSS:

1) the pixel (px) : 1 inch = 96 pixels

font-size: 12px;

2) the point (pt) : 1 inch = 72 points

font-size: 12pt;

3) percentage (%): a ratio from the size of the element's parent

width: 50%;

4) the times (em): 1 em = the inherited size from the parent of that element, so if we have <p { font-size: 12px; } > , then (1em = 12px) for all elements inside that (p) element, and we can multiply it with a any ratio

font-size: 2em;

4) the root times (rem): the same as the (em) unit excepts that it takes the size of the one (rem) from the root element which is the html element

font-size: 0.5rem;

6) the viewport width (vw): (1vw = 10% of the screen) it will follow the size of the browser window by a specific ratio, it represents both width and height for the screen

width: 5vw;

7) the fractional unit (fr): the size of the content of that element, we can use it as one unit (1fr) to match the content, or we can double it (2fr) or divide it (0.5fr), and so on.

8) the (calc) method: we can perform calculations in CSS on the previous units to get a specific number for the design.

For example, we have 4 divs and we want to put them beside each other, the space between each two of them has to be 20px, and they suppose to keep this format if the window got resized.

Solution: for each element, we subtract 20px (pixels unit) from the 100% (percentage unit) of the parent width and then divide that by the number of elements (4) which will result in a responsive width using different kinds of units.

HTML

<div> 
   <p> item 1 </p>
   <p> item 2 </p>
   <p> item 3 </p>
   <p> item 4 </p>
</div>

CSS

div p {
   width: calc((100% - 20px) / 4);
}

CSS Variables

We can define variables in the CSS file to use them in several places. We define any variable by double dashes -- before its name, then we provide the desired value. We have to define all our variables in the root selector.

To use that variable, we use var() function which takes two arguments, the name of the variable and the fallback value (it is a value that will be used instead of the variable if any problem occurred with its calling).

:root {
    --mainColor: red;
}

div {
    color: var(--mainColor, black);
}

p {
    background-color: var(--mainColor, white);
}

Styling the element

Styling: it refers to changing the properties of an HTML element (tag) like the font color, background color, font size, hovers effect, width and height, position on the page, ...etc.

Styling format

The styling statement takes the following standard format:

Selector {

property1: value1;

property2: value2;

}

The selector: It is the tool that specifies which element/s should be styled, it has many types.

The property: It is what we want to change in the tag, like font, color, size, ...etc.

The value: It is the desired choice of the property, like the color can be red, green, blue, ...etc.

Performing the style

We can perform the styling on the element by several methods:

1) The style element (not the best practice to use)

add a Style HTML tag in the Head tag to apply its properties to all related tags. This method is used to perform a style on a wide amount of tags at once.

<head> 
    <style>
        p { color:blue ; font-size:24pt ; text-align:center; }
    </style>
</head>

that will apply the color, font-size and the aligning on every paragraph element on the code.

2) The style attribute (not the best practice to use)

add a Style attribute to the targeted tag then add your properties as pairs separated by semicolons ; , all that inside double quotes " " as the value. This method is used to perform a style on only one single element at a time.

<p style="color:blue; font-size:24pt; text-align:center;" >
</p>

that will apply the colour, font-size and the aligning only on that particular paragraph element

3) The style file (the optimum method)

create a CSS file where you can put all the selectors you want then link it with the HTML file to apply them to it.

In the HTML file (index.html):

Add a Link tag inside the Head tag with two main attributes. The rel which specify that we want to link a style sheet file (CSS), and the href which has a relative path to the CSS file including the name of the file itself.

<head> 
    <link rel="stylesheet" href="css/styles.css">
</head>

In the CSS file (styles.css):

Add all the selectors you want freely as blocks by curly brackets { } with nothing to separate each two but spaces. Each line inside the selector (property: value) must end with a semicolon ;

p {
    color: blue; 
    font-size: 24pt; 
    text-align: center;
}

div {
    color: red;
    font-size: 50px; 
}

Types of Selectors

1) The type selector

It affects all the elements that have the same name as the one specified, so it selects elements by their types.

div { 
    color: blue; 
}

that will affect all div elements in the code

2) The class selector (best practice to use)

Class is a selector that reaches and affects all elements that have been marked with the specific class name. We can create multiple classes and apply as many as we want to any element.

We can define a class selector by adding a dot . before its name.

HTML

<p class="wide-width" > 
   I'm wide 
</p>

<div class="blue-color" > 
   My color is blue 
</div>

<p class="blue-color wide-width" > 
   I'm both wide and blue
</p>

CSS

.blue-color { 
    color: blue; 
}

.wide-width{ 
    width: 500px; 
}

3) The id selector (not the best practice to use)

ID is a selector that reaches and affects only one unique element that has been marked with the specific id name. We shouldn't apply it to more than one element, but we can apply both a class and id selectors on the same element.

We can define an id selector by adding a hash # before its name.

HTML

<p id="wide-width" > 
   I'm wide 
</p>

<div id="blue-color" > 
   My color is blue 
</div>

<p id="wide-width" class="red-color" > 
   I'm both wide and red
</p>

CSS

#blue-color { 
    color: blue; 
}

#wide-width{ 
    width: 500px; 
}


.red-color { 
    color: red; 
}

4) The group selector

This selector can be used to modify multiple selectors at once

CSS

.first { 
    color: blue;
    width: 50px; 
}

.second { 
    color: red;
    width: 100px; 
}

.third { 
    color: black;
    width: 300px; 
}

.first,
.second,
.third, 
p,
div {
    color: green;
    padding: 20px;
}

that will change the properties for the 3 class selectors, all p elements, and all divs to have green color and paddings of 20px.

5) The descendant selector (cascaded)

This selector is a combination of multiple "Type", "Class", and "ID" Selectors. We can use it to better reach HTML tags and be way more specific in our selected range.

One is a child of another

div p { color: red }

target each (p) elements which is a child for a (div) element

#myBox p { color: red }

target each (p) element which is a child for any element that has id="myBox"

Multiple selectors

div, p, .class1 { color: red }

target all the (p) elements, (div) elements, and anyone with the class (class1)

All elements

* { color: red }

target all elements in the code

All elements in an element

div * { color: red }

target all elements inside each (div) element

Multiple classes

.class1.class2 { color: red }

target each element which has both classes (class1) and (class2) class="class1 class2"

Element with a class

div.myBox { color: red }

target only div elements with class="myBox"

Element with a class in an element

section div.myBox { color: red }

target only div elements with class="myBox" which is a child of a (section) element

Element after another

div + section { color: red }

target each (div) element that has a (section) element after it (they’re both children to a container)

All elements after an element

div ~ section { color: red }

target all (section) elements after each (div) element

Direct child

div > section { color: red }

target each (section) element that is a direct child for a (div) element

Element with an attribute

div[title] { color: red }

target each (div) element that has a (title) attribute

Element with an attribute and value

div[title="hello"] { color: red }

target each (div) element that has a (title) attribute which has a value of (hello)

Element with an attribute and value contains a word

div[title~="he"] { color: red }

target each (div) element with a (title) attribute which its value contains the word (he). Having a word means a string isolated with spaces, like (he llo)

Element with an attribute and value contains a substring

div[title*="he"] { color: red }

target each (div) element with a (title) attribute which its value contains the substring (he), something like (hello)

Element with an attribute and value starts with a substring

div[title^="he"] { color: red }

target each (div) element with a (title) attribute which its value starts with the substring (he), something like (hello)

Not (selector)

div:not(.class1) { color: red }

selects each (div) element which doesn't have the class (class1)

First Child

div:first-child { color: red }

selects the first child of each (div) element

Last Child

.myBox:last-child { color: red }

selects the last child of each element that has class="myBox"

Nth Child

div:nth-child(3) { color: red }

selects the third child of each (div) element

Nth last Child

div:nth-last-child(3) { color: red }

selects the third child from the bottom of each (div) element (strat counting from the bottom)

Only Child

div:only-child { color: red }

selects the child of each (div) element that has only one element

div section:only-child { color: red }

selects the only (section) element that is the only child of a (div) element

First of type

div:first-of-type { color: red }

selects each (div) element which is the first element of his parent

Last of type

div:last-of-type { color: red }

selects each (div) element which is the last element of his parent

Nth of type

div:nth-of-type(odd) { color: red }

selects all the (div) elements which have the odd order as children of their parent (we can also use even)

6) The pseudo-class and element

It is a temporary selector that specifies attributes for an element during a specific state. Like when we hover over an anchor element (a), we want to change its color, we use the (hover) selector like this:

a:hover {
    color: red;
}

We have too many pseudo selectors so we are going to mention the most important ones among them in detail later in the document. We have two types of pseudo-selectors and we can switch between them and they will work properly:

Pseudo class: it is a selector with a single colons : .

Pseudo element: it is a selector with double colons :: .

Pseudo selectors

We have too many pseudo selectors so we are going to mention the most important ones among them.

Hover

reach the tag only while the mouse cursor is upon it.

div:hover {
    color: red;
}

Checked (for checkbox)

reach the checkbox only while the box is checked.

input:checked + label {
    color: red;
}

change the color of the label after the checkbox when it is checked.

Visited (for anchor)

reach the anchore only after visiting it (clicking on it and open its page).

a:visited {
    color: red;
}

Empty

reach every empty div tag (the one that has no tags inside it) only while it is empty.

div:empty {
    border: 1px solid red;
}

Required

reach every empty div tag (the one that has no tags inside it) only while it is empty.

input:required {
    content: "*";
    color: red;
}

Focus

reach the element only while it is geting focused.

div:focus {
    color: red;
}

Before

adds an element before the reached one. This pseudo-element won't work until we provide any value for the attribute content

div::before {
    content: "";
    color: red;
}

After

adds an element after the reached one. This pseudo-element won't work until we provide any value for the attribute content

div::after {
    content: "";
    color: red;
}

First letter

reach the first letter of the text inside the element.

div::first-letter {
    color: red;
}

First line

reach the first line of the text inside the element.

div::first-line {
    color: red;
}

Selection

reach the element only while its text is selected (shaded).

div::selection{
    color: red;
}

Placeholder

reach the attribute (placeholder) for the inputs.

::placeholder{
    color: red;
}

Combined Selectors

reach the element after for the div upon hoevring.

div:hover::after {
    color: red;
}

Cursor Attributes

Cursor

It changes the shape of the cursor when we hover over the element

cursor: pointer;

it has a lot of options, but these are the most used ones:

pointer: a hand for clicking

grab: opened hand

grabbing: closed hand

move: quadra arrows sign for moving things

auto: text cursor

cell: plus sign for sheets' cells

col-resize: vertical resizing sign for table columns

row-resize: horizontal resizing sign for table rows

e-resize: horizontal resizing sign

n-resize: vertical resizing sign

ne-resize: bottom-to-top diagonal resizing sign

nw-resize: top-to-bottom diagonal resizing sign

not-allowed: denying sign

none: disappear the cursor

progress: an arrow with a progress bar

wait: a progress bar

zoom-in: zoom-in sign

zoom-out: zoom-out sign

Pointer events

It changes the behavior of the element when a mouse-event occeres like hovering. It has a default value of auto but changing it to none will disable any event that would happend like hovering and clicking.

pointer-events: none;

Content Attribute

It changes the content of the element. We usually use it with pseudo-elements like (before) and (after) to add little content.

Adds nothing

it makes the element with no contents

div::before {
    content: "";
}

Adds a text from an attribute

we can reach the text (value) of each HTML attribute we provide to the element, like href, name, class, ...etc.

div::before {
    content: attr(href);
}

Lists Attributes

We can provide the list tags (ul or ol) with some customizations.

List style type

We can change the symbol of the bullets for the list item tags (li), it has a lot of values like: disck, none, ...etc.

list-style-type: disc;

List style position

We can change the position of the bullets.

list-style-position: outside;

outside: bullet is outside the element

inside: bullet is inside the element

List style image

We can change the symbol of the bullets to be an image.

list-style-image: url("my url");

Custom bullets

We can customize the bullets by using the (before) pseudo element.

ul {
    list-style: none;
}

ul li {
    position: relative;
}

ul li::before {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    left: -20px;
    top: 50%;
    border-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent green transparent transparent;
}

Table Attributes

We can provide the table tags (table, td, ...) with some customizations.

Border spacing

Change the spaces between every two cells (for td).

border-spacing: 10px;

Font Attributes

We can either use them individually to specify each one in a separate line, or we can wrap them in one line and it will give the same results.

.separated {
 font-weight: bold;
 font-size: 14pt;
 font-family: Georgia, serif;
}

.one-line { 
  font: bold 14pt Georgia, serif; 
}

Font family

select one or more font families so if the user device doesn't have the first one, it will use the next and so on.

font-family: Georgia, serif;

This is a list of the safe web fonts that can be used with no concerns:

sans-serif: Arial, Verdana, Helvetica, Tahoma, "Trebuchet MS"

serif: "Times New Roman", Georgia, Garamond

monospace: "Courier New"

cursive: "Brush Script MT"

Font style

specify the style of the font, like: normal, italic, oblique, ...etc.

font-style: italic;

Font weight

specify the bold weight of the font, like: bold, bolder, 100, 200, 300 ...etc.

font-weight: 300;

Paddings and Margins Attributes

We use numbers followed by the desired measurement unit to specify one of them. The padding is the space between the element's borders and the internal contents of that element. While the margin is the space between the element and its surrounding elements.

In this example, the paddings are between the phrase "hello there" and the borders of its container (which is the paragraph element). But the margins are between the paragraph element itself and the two div elements surrounding it.

<div> first div </div>
<p> hello there </p>
<div> last div </div>

The values that can be given to the padding and margins can be:

1) pixels: specify the distance with a fixed number

padding: 20px;

2) ratio: specify the ratio taken from its container

margins: 20%;

3) auto: distribute whatever available distance from the container among all attributes with the "auto" value

width: 70%;
padding: auto;

that will distribute the 30% that left over the right and left padding (15% for each one)

Margin Collapse:

When we put two elements on top of each other and give each one of them vertical margins, both connected margins will be united (bottom-margin of the upper element and top-margin of the lower one). That means if they had values of bottom-margin: 20px for the upper and top-margin: 40px for the lower, the bigger will be selected and the overall margin between the two elements will be 40px.

This feature only happens with vertical common margins, not with horizontal ones.

Paddings

padding: 20px;

1) padding: specify the paddings of the element from the 4 sides

2) padding-top: specifies only the top paddings

3) padding-bottom: specifies only the bottom paddings

4) padding-left: specifies only the left paddings

5) padding-right: specifies only the right paddings

Margins

margin: 20px;

1) margin: specify the margins of the element

2) margin-top: specifies only the top margins

3) margin-bottom: specifies only the bottom margins

4) margin-left: specifies only the left margins

5) margin-right: specifies only the right margins

Dimensions Attributes

Width

Specify the width effect of the element.

width: 50px;

auto: (default) stretch the element from all sides to match its parent

50px: specify the width by pixils

20%: specify the width by a ratio from its parent

fit-content: fit the width to match the contents of the element

Minimum width

Specify the minimum width of the element. So, if the length of its contents exceeds the minimum, it will be stretched to fit the content. (the width will never be less than the specified one)

min-width: 50px;

Maximum width

Specify the maximum width of the element. It limits the contents exactly like the min-width. (the width will never be more than the specified one)

max-width: 50px;

Height

Specify the height effect of the element.

height: 50px;

auto: (default) stretch the element from all sides to match its parent

50px: specify the height by pixils

20%: specify the height by a ratio from its parent

fit-content: fit the height to match the contents of the element

Minimum height

Specify the minimum height of the element. So, if the height of its contents exceeds the minimum, it will be stretched to fit the content. (the height will never be less than the specified one)

min-width: 50px;

Maximum height

Specify the maximum height of the element. It limits the contents exactly like the min-height. (the height will never be more than the specified one)

max-width: 50px;

Oerflow

It specifys how the element should handle its contents when they exceeds its width or height.

overflow: visible;

visible: (default) displays the oerflowed contents regularily

hidden: hide any oerflowed contents

scroll: turn the element into a scrollable container so we can scroll to reach the overflowed contents

auto: applys the scroll effect if the element has overflowed contents, and make it visible otherwise

we can edit the effect upon X-axis (for width overflow) or Y-axis (for height overflow) individually

overflow-x: visible;
overflow-y: visible;

Box sizing

specifies the behavior of the 'width' and 'height' properties

border-box: width and height will vary according to their paddings and margins, so thwy will be calculated as a part of the box

box-sizing: border-box

content-box: (default) width and height will be normally treated regarding the paddings and margins

box-sizing: content-box

Coloring Attributes

We represent colors as mixed-up amounts of the three basic colors: red, green, and blue. When the value gets close to (0), (0%), or (#000000), it will get darker. But when it gets close to (255), (100%), or (#ffffff) it will get lighter.

Color attribute

We have many methods to represent colors:

1) RGB

color: rgb(2, 179, 228)

that will assign the value 2 for red, 179 for green, and 228 for blue, it will mix the amounts (any the amount has to be in the range from 0 to 255)

2) RGBA

color: rgba(2, 179, 228, 0.5)

the additional (a) means (Alpha), which specifies the opacity for the color, it has to be a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

3) Percentages

color: rgb(1%,70%,89%)

that means 1% of red, 70% of green and 89% of blue, the percentage maps the scale (0 ~ 255) where 0% means 0, and 100% means 255.

4) HEXA code

color: #02b3e4

we can use the hexadecimal code, each two characters represent a hexadecimal code to describe a color (red, green, blue respectively). that means (02 => 2) for red, (b3 => 179) of green, and (e4 => 228) of blue.

4) Writing color name

We can simply use the predefined colors

color: light red
color: dark green
color: white

5) HSLA (hue, saturation, lightness, alpha)

we provide the input in this format:

hsla(hue, saturation, lightness, alpha)

color: hsla(250, 20%, 70%, 0.8)

Hue: it is the degree on the color wheel from 0 to 360, where 0 is red, 120 is green, and 240 is blue

Saturation: it is a percentage value from 0% to 100%, where 0% means a shade of grey where you can't see the color, 50% means grey color but you can still see the color, and 100% is a pure color with no shades of gray. It can be described as the intensity of a color.

Lightness: It is a percentage from 0% to 100%, where 0% is black (no light), 50% is neither light nor dark, and 100% is white (full lightness). The lightness of a color can be described as how much light you want to apply to the color

Alpha: It specifies the opacity of the color, it is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Opacity attribute

Changes the opacity of the whole element. The value has to be within the range (0 ~ 1) where 0 make it fully visible, and 1 adds a full black layer over the element.

opacity: 0.4;

Caret color attribute

Changes the color of the cursor in the editable texts.

caret-color: red;

Filter attribute

It applies a custom filter on the element. We use the value (0) as a value for any filter to revert its settings to normal

filter: VALUE;

grayscale(100%): apply a gray filter with 100% intensity (black and white), (0) to reset it

blur(4px): apply a blur effect by 4px intensity, (0) to reset it

invert(100%): apply a negative-colors effect with 100% intensity, (0) to reset it

Linear gradient attribute

It provides a custom gradient color with multiple optional stop points and colors. We can use it to give a color to any attribute like background color or font color. We enter the inputs in this format:

linear-gradient(Direction or Angle, color-stop 1, color-stop 2, ...etc)

Direction and Angle: they specify the direction of the gradient (its starting and ending sides)

background-image: linear-gradient(to right, red, green);
color: linear-gradient(90deg, red, green);

Direction: it specifies the direction (to right, to left, to top, to bottom)

Angle: it specifies the angle of the direction

(90deg means to right, 270deg means to left, 0deg means to top, 180deg means to top)

Color-stop: it specifies for each color the point where it should stop and let the next color continue.

background-image: linear-gradient(to right, red 20%, green70%);

Borders Attributes

Controlling some features regarding the border of the element.

Border color

specify the color of the border, we can select any coloring style.

NOTE: if we want to hide the border, we can use the value none to disable the color of the border which may leave some unwanted effects, or we can use the word transparent which will only change the color to nothing.

border-color: red;

1) border-color: specify the color for the 4 borders

2) border-top-color: specify the color only for the top border

3) border-bottom-color: specify the color only for the bottom border

4) border-right-color: specify the color only for the right border

5) border-left-color: specify the color only for the left border

Border width

specify the thickness of the border

border-width: 2px;

1) border-width: specify the width for the 4 borders

2) border-top-width: specify the width only for the top border

3) border-bottom-width: specify the width only for the bottom border

4) border-right-width: specify the width only for the right border

5) border-left-width: specify the width only for the left border

Border style

specify the style of the border. It has a lot of values like: solid, groove, dashed, dotted ...etc.

border-style: solid;

1) border-style: specify the style for the 4 borders

2) border-top-style: specify the style only for the top border

3) border-bottom-style: specify the style only for the bottom border

4) border-right-style: specify the style only for the right border

5) border-left-style: specify the style only for the left border

Border radius

specifies the radius of the corners. We can provide either a number in pixels or a percentage where 50% is the full circle.

border-radius: 20px;

1) border-radius: specify the border radius for the 4 corners in this format:

(top-left, top-right, bottom-right, bottom-left)

2) border-top-left-radius: specify the border radius for a specific corner

3) border-top-right-radius: specify the border radius for a specific corner

4) border-bottom-right-radius: specify the border radius for a specific corner

5) border-bottom-left-radius: specify the border radius for a specific corner

For the single-corner attributes, we can either provide a single value representing the shift for both the X and Y axes. Or we can provide them separately:

border-top-left-radius: 20px;
border-top-right-radius: 20px 10px;

Outline

it is a space that surrounds the element (outside the border). we can use the same values of the border here.

outline-color: red;
outline-style: solid;
outline-width: 3px;

Background Attributes

Controlling some features regarding the background of the element.

Background Color

change the color of the background (use any coloring method)

background-color: rgb(255, 255, 255)

Background Image

change the background image of the element

background-image: url("image URL")

Background Repeat

select the repeating style of the background image

background-repeat: repeat;

repeat: (default) repeat the image along X and Y axises to fill the parent

no-repeat: display the image with its original size without repeating

repeat-x: repeat the image along X axis of its parent

repeat-y: repeat the image along Y axis of its parent

Background Position

select the X and Y positions of the background image inside the element

background-position: left-top;

left-top: (default) put the background on the left top corner

left-center: put the background on the left center side

left-bottom: put the background on the left bottom corner

center-top: put the background on the top center side

center-center: put the background on the center of the element

center-bottom: put the background on the bottom center side

right-top: put the background on the right top corner

right-center: put the background on the right center side

right-bottom: put the background on the right bottom corner

20px 50px: put the background at x-offset of 20px from the right , and y-offset of 50px from the top

20% 70%: put the background at x-offset of 20% of the element width from the right, and y-offset of 70% of the element height from the top

we can also specify them individually

background-position-x: left;
background-position-y: 70px;

Background Size

select the size effect of the background image

background-size: auto

auto: (default) display the image with its original size

cover: fit the image to be streatched so it covers the width and height of the element (might get cut)

contain: fit the image to be fully displayed so it changes when we resize the window (won't get cut)

300px 100px: specify the width and height of the image inside the element

100% 20%: specify a ratio, the image will cover the full width of the element and 20% of its height

Background Attachment

select the state of the background image as we scrollling down

background-attachment: scroll

scroll: (default) the background will be left at the top of the element as we scroll down

fixed: the background will stick at the top of the screen (always displayed) as we scroll down

Shadow Attributes

We can control the characteristics of shadows for the element.

Shadow text

Adds a custom shadow effect to the text in the element, we provide the input in this format:

H-shadow V-shadow Blur Color

shadow-text: 1px -2px 2px red;

H-shadow: controls the x-offset of the shadow horizontally (it can have a positive or a negative value to move the shadow to right or left)

V-shadow: controls the y-offset of the shadow vertically (it can have a positive or a negative value to move the shadow upward or downward)

Blur: controls the blur depth of the shadow

Color: controls the color of the shadow (any color value)

Multiple shadows

We can provide more than one shadow to the same element as comma seperated values:

shadow-text: 1px -2px 2px red, -5px 2px 4px black;

first one: 1px -2px 2px red

second one: -5px 2px 4px black

Box shadow

Adds a custom shadow effect to the element itself, we provide the input in this format:

H-shadow V-shadow Blur Spread Color Inset

box-shadow: 1px -2px 2px 7px red inset;

H-shadow: controls the x-offset of the shadow horizontally (it can have a positive or a negative value to move the shadow to right or left)

V-shadow: controls the y-offset of the shadow vertically (it can have a positive or a negative value to move the shadow upward or downward)

Blur: controls the blur depth of the shadow

Spread: controls the amount of spreading for the shadow

Color: controls the color of the shadow (any color value)

Inset: if mentioned, the shadow will be internal, and it will be external if not specified

Multiple shadows

We can provide more than one shadow to the same element as comma seperated values:

box-shadow: 1px 1px 1px 5px red, 2px 2px 2px 1px black inset;

first one: 1px 1px 1px 5px red

second one: 2px 2px 2px 1px black inset

Text Attributes

Controlling attributes of the contents inside the element

Text align

align the contents horizontally inside their element

text-align: VALUE;

right: align contents to the right

center: align contents to be centered

left: align contents to the left

Vertical align

align the contents vertically inside their element

vertical-align: VALUE;

top: align contents to the top

middle: align contents to be in the middle

bottom: align contents to the bottom

Direction

control the direction of the writing

direction: VALUE;

ltr: let the direction of the text be from (left to right)

rtl: let the direction of the text be from (right to left)

Text decoration

specify the line property of the text

text-decoration: VALUE;

line-through: a line goes through the text

underline: a line goes under the text

overline: a line goes above the text

none: no line at all (it can hide the underline from URLs)

Text transformation

specify the case property of the text

text-decoration: VALUE;

capitalize: capitalize the first charachter from each word

uppercase: make all charachters uppercase (capital letters)

lowercase: make all charachters lowercase (small letters)

Letter spacing

specify the amount of spacing between each two letters

letter-spacing: VALUE;

20px: increase the default space

-20px: decrease the default space

Word spacing

specify the amount of spacing between each two words

word-spacing: VALUE;

20px: increase the default space

-20px: decrease the default space

Line height

specify the amount of spacing between each two lines

line-height: 1.6;

Text indent

specify the amount of spacing in the front of the line (on its left)

text-indent: 20px;

White space

control the desired action for spacing if the text reached the border of the element

white-space: VALUE;

normal: breaak line when the word exceeds the border

nowrap: keep the text in one line even if it exceeds the border

Word break

control the desired action for the last word in each line if the text reached the border of the element

word-break: VALUE;

normal: break line when the text exceeds the border

break-word: break line when the word exceeds the border

break-all: break line at the last letter of the line (fit the text to match the width)

Text overflow

control the desired action if the text overflowed the element

text-overflow: VALUE;

ellipsis: if the text was cut using overflow or white-space attributes, add 3 dotes after the cut

Organizational Attributes

Controlling the visibility, display, and layout of the element and its children.

Visibility Attribute

Controlling the visibility of the element.

visibility: visible;

visible: (default) make the element visible

hidden: make the element invisible but save its space while it is hidden

Float & Clear Attributes

We can use the attribute float: left for consecutive elements to make them float to the left inside their parent. But then we have to add the attribute clear: both for the last one of them to cancel the float effect so it won't affect the rest of the elements below it.

<div>
   <p style="float: left;"> item 1 </p>
   <p style="float: left;"> item 2 </p>
   <p style="float: left;"> item 3 </p>
   <p style="clear: both;"> item 4 </p>
</div>

float: (left, right, both) float the element in a specific direction

clear: (left, right, both) cancel the float effect for a specific direction

Position Attribute

Controlling the position of the element within the page.

Static position

it is the default for any element which will allow it to take a space from the page relatively with other elements.

position: static;

Relative position

position: relative;

Move the element relatively with itself (its original position). It allows the element to move freely on the page while saving its original space so it won't affect other elements when moving.

We need to use other supporting attributes to move the element (top, bottom, left, right), positive values will move it in the specified direction, and negative values will move it in the opposite direction.

top: 20px;
left: -10px;

top: shift the element upward (positive will move it upward, negative will move it downward)

bottom: shift the element downward (positive will move it downward, negative will move it upward)

right: shift the element toward the right (positive will move it to right, negative will move it to left)

left: shift the element toward the left (positive will move it to left, negative will move it to right)

Absolute position

position: absolute;

Move the element relatively with its parent. It allows the element to move freely on its parent without saving its original space, so it will get out of the workflow and lose its original space to other elements.

We need to use other supporting attributes to move the element (top, bottom, left, right), only positive values are allowed to shift the element in the specified direction.

bottom: 0px;
right: 30px;

top: shift the element downward (where 0 is at the top side)

bottom: shift the element upward (where 0 is at the bottom side)

right: shift the element toward the left (where 0 is at the right side)

left: shift the element toward the right (where 0 is at the left side)

NOTE: the parent of the absolute element must have position: relative; value to allow its elements to have the position: absolute; value.

Fixed position

Give the element a fixed position so it will be stuck with the screen as we scroll all the time (it won't get back to its original position as we scroll). It will lose its original space and be out of the workflow.

position: fixed;

We need to use other supporting attributes to move the element (top, bottom, left, right)

top: shift the element downward (where 0 is at the top side)

bottom: shift the element upward (where 0 is at the bottom side)

right: shift the element toward the left (where 0 is at the right side)

left: shift the element toward the right (where 0 is at the left side)

Sticky position

Give the element a fixed position so it will be stuck with the screen as we scroll only after passing by it (it will stay in its original position until we pass it as we scroll, then it will have the given fixed position). It won't lose its original space and be out of the workflow.

position: sticky;

We need to use other supporting attributes to move the element (top, bottom, left, right)

top: shift the element downward (where 0 is at the top side)

bottom: shift the element upward (where 0 is at the bottom side)

right: shift the element toward the left (where 0 is at the right side)

left: shift the element toward the right (where 0 is at the left side)

Z-index Attribute

Specifying the z-layer of the element when elements get stacked over each other by the position attribute. We have an infinite number of layers so we are not obligated to use consecutive indexes, we can use any positive number and the page will stack the elements with position-attribute according to their z-index in ascending order.

This attribute accepts positive and negative integers and treats them as a single scale that puts the elements with positive z-index above the ones with negative z-index.

position: fixed;
top: 0;
z-index: 50;

NOTE: we must use the position attribute with any value to be able to use the z-index attribute.

Display Attribute

Controlling the distribution of the children inside the parent and how they should be positioned. It determines the type of organizing box or boxes that are generated for the element

Display None

display: none;

It will hide the element and treat it on the page as it is not existing. It won't take any place when we give it a none value. If we only want to make it invisible and allow the page to save its place, we use the visibility attribute instead.

Display inline-block

display: inline-block;

It will turn the element into an inline-block element.

Flex Display

display: flex;

It allows elements to float inside the parent. After we specify that we want to use a flex display, we can use more related attributes to specify more details about the positions of elements.

Tip: you can master the whole flex-display section by solving the following game:

http://flexboxfroggy.com/

Justify Content: Controlling elements' positions over main-axis

justify-content: VALUE

it aligns the elements along the main axis of the parent (horizontal or vertical), it can take one of these values:

flex-start: align the elements to the left

flex-end: align the elements to the right

center: center the elements

space-between: it aligns the elements so the first and last ones are at the borders, and the others evenly spaced in between

space-around: align the elements so each one has sides margins as same as the others

space-evenly: align the elements so each one has sides margins as the others including the space between them and the borders

Align Items: Controlling elements' positions over cross-axis

align-items: VALUE

it aligns the elements along the cross-axis of the parent (the opposite one), it can take one of these values:

center: center all the elements

flex-start: align the elements at the top

flex-end: align the elements at the bottom

Flex Direction: Controlling elements' main-axis orientation

We can change the main axis to be X or Y, and that will also revert the coss-axis to its opposite.

Main-axis: X (horizontal) --accordingly--> Cross-axis: Y (vertical)

Main-axis: Y (vertical) --accordingly--> Cross-axis: X (horizontal)

flex-direction: VALUE

controls the orientation of the flex container, it can take one of these values:

column: align the contents vertically starting at the top

column-reverse: align the contents vertically, then reverse their orders and align them at the bottom (it also reverses the values of the other flex attributes)

row: align the contents horizontally and to the left

row-reverse: align the contents horizontally, then reverse their orders and align them to the right (it also reverses the values of the other flex attributes)

Order: Controlling an individual element

order: VALUE

it controls the order of the items. since items have a value of 0 by default, we can use this property to set it to an integer value (…, -2, -1, 0, 1, 2, …),

positive values: any positive value will push the element to the right of the group, the larger it is, the more right-shifting it will get

negative values: any negative value will push the element to the left of the group, the larger it is, the

more left-shifting it will get

Align Self:

align-self: VALUE

after setting the (align-items) attribute on an parent with some children inside it, we can use this attribute to change the alignment of a specific one of these internal elements individually without affecting the others. it takes the same values as the (align-items) attribute.

Flex Wrap: Wrapping elements

Wrapping means controlling what should be happened to the elements after they reach the limit of their container. Usually, it is specified to break the line and start at the next one.

flex-wrap: VALUE

it specifies the wrapping method for children, it can take one of these values:

nowrap: each item is fit to a single line

wrap: each one will keep its original dimensions, but when the current line isn’t enough for them, the rest will go to the next one, and so on

wrap-reverse: wrap the elements in a reversed order, the cross-axis flex-direction will be reversed too

Flex Flow:

flex-flow: VALUE

it is a shortcut for combining flex-direction and flex-wrap attributes, it can take one of these values:

column wrap it is a shortcut for:

flex-wrap: wrap;
flex-direction: column;

row wrap: it is a shortcut for:

flex-wrap: wrap;
flex-direction: row;

Align Content:

align-content: VALUE;
flex-wrap: wrap;

it allows us to use the values of the (justify-contents) attribute for the cross-axis since we don't have them in the (align-items) attribute. But we must define the wrap attribute to work.

Grid Display

display: grid;

It displays the contents as a grid. After we specify that we want to use a grid display for the parent element, we can use more related attributes for its children to specify more details about their positions.

Tip: you can master the whole grid-display section by solving the following game:

https://codepip.com/games/grid-garden/

Grid Column: Spanning an element over columns

grid-column-start: VALUE;
grid-column-end: VALUE;

grid-column-start: it specifies the start position of a grid element (at what index this element should be placed)

grid-column-end: it specifies the end position of a grid element (at what index this element should be ending its span), it takes an integer value starting from 1, but the actual taken value here will be subtracted by 1 (if we select 4, that means end at 3)

For the values:

positive integers: it means starting from the left as 1, 2, 3, …

negative integers: it means starting from the right at -2, -3, …

span: followed by an integer, ( span 3 for example) it means to let the element cover or span over 3 grid-column units starting from the left side, and ending with what is specified in (grid-column-end) attribute

grid-column: VALUE;

specify the number of columns for this element, if we selected 2, we will get 3 separating points for the grid (one at the start, one between the two columns, and one at the end). This attribute can be used instead of using grid-column-start and grid-column-end together.

we provide its value as two integers separated by a / sign

1 / 3 : it means that the element should start at point 1 and ends at point 3, so it will be spanned over two column units

Grid Row: Spanning an element over rows

The following attributes work exactly like their similars from column-spanning attributes but with rows

grid-row-start: it works exactly like grid-column-start

grid-row-end: it works exactly like grid-column-end

grid-row: it works exactly like grid-column

Grid Area: Spanning shorthand

We can replace all the attributes that specify the starting and ending points for both rows and columns with the grid-area attribute.

grid-area: 1 / 2 / 4 / 6

it represents the values for the attributes grid-row-start / grid-column-start /

grid-row-end / grid-column-end respectively

Grid Template Column: Grid template for columns

We can control how many columns we want in the grid display. It has to be specified as a space-separated tracklist, each one represents the width of the rows in the grid respectively

grid-template-columns: 20% 20% 20% 20% 20%

that divides the page into 5 columns each one has a width of 20%

grid-template-columns: repeat(5, 20%)

we use it to repeat values, the result is exactly like the previous one

grid-template-columns: 1fr 3fr

the (fr) stands for (fractional), it divides the available space over the items based on each one’s share of (fr), we have here two columns, the first one shares 25% of the available space, and the other takes 75% (due to the distribution of ¼, ¾ )

Grid Template Row:

We can control how many rows we want in the grid display. It has to be specified as a space-separated tracklist, each one represents the height of the columns in the grid respectively.

grid-template-rows: it works exactly like grid-template-columns

Grid Template Shorthand:

It can be used to replace the attributes that control the grid structure (grid-template-columns and grid-template-rows)

grid-template: 20% 50% / repeat(5, 50px)

it represents values for the attributes grid-template-rows / grid-template-columns respectively

Order: Controlling an individual element

We can control the order of the items, items have a value of 0 by default, we can use this property to set it to an integer value (…, -2, -1, 0, 1, 2, …),

order: VALUE

positive values: any positive value will push the element to the left and bottom of the group, the larger it is, the more left-shifting and bottom-shifting it will get

negative values: any negative value will push the element to the right and top of the group, the larger it is, the more right-shifting and top-shifting it will get

Gap: Controlling gaps between element

We can specify the width of the gap between each two columns and rows

gap: 10px 20px

that means we want a gap of 10px between each two rows, and 20px between each columns

Transition Attributes

Controlling the characteristics of the transition for the element from one state to another. Like controlling the duration of shifting an element when we change its position on hover.

Transition duration

control the amount of time needed to change the state. We can provide the time in milliseconds (ms) unit or the seconds (s) unit.

transition-duration: 50ms;

Transition delay

control the amount of time before starting to change the state. We can provide the time in milliseconds (ms) unit or the seconds (s) unit.

transition-delay: 50ms;

Transition property

specify the CSS attributes that you want them to have transition effects (duration, delay, ...etc). In the following example, only (margin-left) and (color) are the attributes that will have transition effects.

transition-property: margin-left, color;

all: allow all the CSS attributes to have transition effects

none: prevent all the CSS attributes from having transition effects

attribute1, attribute2, attribute3: allow specific CSS attributes to have transition effects

Transition timing function

it specifies the functionality of transition during the process. It describes how the element will change its state.

transition-timing-function: VALUE;

ease: (default) start the transition slowly, then fast, then slow again

ease-in: start the transition slowly, then fast till the end

ease-out: start the transition fastly, then slow at the end

ease-in-out: keep the transition slow from the beginning to the end

linear: keep the same speed all along

Shorthand for transition attributes

we can specify all of the previous attributes in one line.

Property and Duration

transition: width 0.5s;

Property, Duration, then Delay

transition: width 0.5s 2s;

Property, Duration, Delay, then Timing-Function

transition: width 0.5s 2s linear;

Different Properties

transition: width 0.5s, height 0.5s 2s;

Transform Attributes (2D & 3D)

Controlling the characteristics of the transformation of the element in 2 or 3 dimensions. We use the attribute transform with different values to apply that. We can also add animation attributes to see the transformation action occurs, like transition.

NOTE:

We can only use more than one transformation value if we add them on the same line. Because if we provide more than one transition attribute, the last one will cancel the others.

p {
    transform: scaleX(1.3) rotete(10deg);
    transition: 0.5s;
    opacity: 0.6
}

Scaling transform (2D)

it scales the element up or down by a selected value. Exceeding 100% will scale it up, and subceeding 100% will scale it down. Scaling happens after creating the element, which means that it will affect all its attributes like width, height, font size, margin, padding, ...etc.

positive values > 1: scale up the element

positive values < 1 and > 0: scale down the element

negative values: flip the element

transform: scale(1.5, -0.5);
transition: 0.5s;

scale(1.5, -0.5): scale up the the element in x-axis by 150% and scale down the y-axis by 50%, and flip verticaly

scaleX(1.5): scale up the element in the x-axis by a ratio of 150%

scaleX(0.5): scale down the element in the x-axis by a ratio of 50%

scaleX(-1.5): scale up the element in the x-axis by a ratio of 150% and flip it horizontally

scaleY(1.5): scale up the element in the y-axis by a ratio of 150%

scaleY(0.5): scale down the element in the y-axis by a ratio of 50%

scaleY(-1.5): scale up the element in the y-axis by a ratio of 150% and flip it vertically

Rotate transform (2D & 3D)

it rotates the element by a selected value.

transform: rotate(45deg);
transition: 0.5s;

rotate(45deg): rotate the element by 45 degrees clockwise around the center point

rotate(-45deg): rotate the element by 45 degrees counterclockwise around the center point

rotateX(45deg): rotate the element by 45 degrees around the X-axis

rotateY(45deg): rotate the element by 45 degrees around the Y-axis

rotateZ(45deg): rotate the element by 45 degrees around the Z-axis (center poibnt for 2D)

rotate(3.14rad): rotate the element by 3.14 radians = 180deg

rotate(0.5turn): rotate the element half a turn = 180deg

For 3D: rotates the element around a specific axis by a selected value

rotate3d(0, 1, 1, 30deg): (activeX, activeY, activeZ, degree) rotate the element only around the Y and Z axes by 30 degree (because X is off by the 0)

rotateX(45deg): rotate the element around the X-axis by 45 degrees

rotateY(45deg): rotate the element around the Y-axis by 45 degrees

rotateZ(45deg): rotate the element around the Z-axis by 45 degrees

Translate transform (2D & 3D)

it moves the element by selected values away from their start point. We must define the perspective attribute for the parent if we want to use any 3D effect (Z-axis).

positive X: move it toward the right

negative X: move it toward the left

positive Y: move it downward

negative Y: move it upward

positive Z: move it toward the front (zoom-in)

negative Z: move it toward the back (zoom-out)

transform: translate(50px, -100px);
transition: 0.5s;

translate(50px, -100px): (for 2D) move the element by 50px to the right (x-axis), and 100px upward (y-axis).

translate3d(50px, -100px, 20px): (for 3D) move the element by 50px to the right (x-axis), 100px upward (y-axis), and 20px toward the front (z-axis).

translateX(50px): move the element by 50px to the right

translateY(-100px): move the element by 100px upward

translateZ(20px): (only for 3D) move the element by 20px toward the front

Skew transform (2D)

it deviates the element by a selected value. reaching 90 degrees will make the element disappear.

transform: skew(45deg, 10deg);
transition: 0.5s;

skew(45deg): deviate the element by 45 degrees

skew(-45deg): deviate the element by 45 degrees reversely

skew(3.14rad): deviate the element by 3.14 radians = 180deg

skew(0.5turn): deviate the element by half a turn = 180deg

skew(45deg, 10deg): perform (X, Y) deviation

Matrix shorthand (2D)

it is a shorthand for the three transformation values (scale, skew, translate). It takes the following format:

matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)

transform: matrix(1.2, 0.26, 0, 1.2, 20 ,20);
transition: 0.5s;

We can use the attributes together in one line, but we need to rearrange their order if we want to match the exact result of the matrix:

transform: translateX(20) translateY(20) scaleX(1.2) skewY(0.26) skewX(0) scaleY(1.2)
transition: 0.5s;

Transform origin (2D)

it specifies the origin point in which the other transform values will be applied. We need to specify the point as (X, Y). The available values we can provide for each axis point are:

CSS unit: (px, em, rem, ...etc.) a numeric value to specify the point

Percentage: a value to specify at which percentage should the point be located (center is 50%)

keyword:

for X-axis: (Left=0%, Center=50%, Right=100%)

for Y-axis: (Top=0%, Center=50%, Bottom=100%)

transform-origin: right 100%;
transform: rotate(45deg);
transition: 0.5s;

that will make the element rotates 45 degrees around its right bottom corner

perspective (3D)

it has to be added to the parent of the targeted element to allow that element to perform 3D actions. It specifies the distance between you and the element by pixels. We must define the perspective attribute for the parent if we want to use any 3D effect (Z-axis)

HTML

<div class="parent">
   <div class="element"> Hello </div> 
</div>

CSS

.parent {
    perspective: 300px;
}

.element {
    transform: translate3d(20px, -70px, 100px);
    transition: 0.5s;
}

Perspective origin (3D)

it is exactly like the transform-origin but this one is used to specify the origin point for 3D transforms. We need to specify the point as (X, Y).

perspective-origin: right 100%;
transform: translate3d(50px, -100px, 20px);
transition: 0.5s;

that will make the element moves toward the point (50px, -100px) as X and Y, and toward the right bottom corner (front) by 20px.

Backface visibility (3D)

it controls the visibility state of the element when we flip it (rotated 180 degrees). Its default is visible, but we can make it disappear on flipping by setting it to be hidden (its back will be hidden so the element will be hidden too).

backface-visibility: hidden;
transform: rotateY(180deg);
transition: 0.5s;

Transform style (3D)

it controls the style of the parent element in the 2-dimensional or the 3-dimensional space. It allows us to describe how the children of a parent will be seen in the space.

HTML

<div class="parent"> 
    <div class="front"> front </div>
    <div class="back"> back </div>
</div>

CSS

.parent{
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  transition: 1s;
}

.parent:hover { 
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
}

.front {
  background-color: lightblue;
}

.back {
  background-color: lightgreen;
  transform: rotateY(180deg);
}

Animation Attributes

Performing animation effects on the element and controlling its characteristics.

Animation keyframes

it defines the name and actions for the animation and gives it a name to use later. Each point of the animation action can be defined by a percentage out of 100%. We have to provide the element with both name and duration for the animation to be applied.

@keyframes change-color {
  0% {
    background-color: red;
  }
  
  50% {
    background-color: green;
  }
  
  100% {
    background-color: red;
  }
}

that will create an action with the name (change-color) to change the color of the element to be red at first, goes to green at the half of the duration, and ends to be red again at the end of the duration.

Animation name & duration

they specify the name of the animation (the pre-defined action) and the time needed for the animation from start to end.

animation-name: change-color;
animation-duration: 3s;

Animation iteration count

it specifies the number of times we want the animation to be replayed. It can either be a number or the word infinite for an infinite count.

animation-iteration-count: infinite;

Animation direction

it specifies the direction of the animation during the process.

animation-direction: VALUE;

normal: (default) regular flow of the defined keyframes

alternate: go throuth the defined keyframes back and fourth

alternate-reverse: same as alternate, but it will start with the end of the defined keyframes

reverse: start with the end of the defined keyframes

Animation delay

it specifies the time needed for the animation to start.

animation-delay: 2s;

positive time: a delay time before the animation started

negative time: an advanced time that will be cut from the animation duration

Animation fill mode

it specifies the style that we want to use when the animation ends.

animation-fill-mode: VALUE;

forwards: apply the last style from the defined keyframes

backwards: apply the first style from the defined keyframes

Animation play state

it specifies the animation state of element.

animation-play-state: VALUE;

running: activates the animation

pause: pause the animation

Animation timing function

it specifies the functionality of animation during the process. It describes how the element will change its state. We use the same values as the transition: ease, ease-in, ease-out, ease-in-out, linear

animation-timing-function: ease;

Animation shorthand

we can define the whole animation attributes in one line in this format:

name duration timing-function delay direction

animation: change-color 3s linear 2s infinite reverse;

CSS Full Documentation

For a better reading experience, check the published document

Basic Info

Comments

Types and features of HTML elements

CSS Selectors (how to reach the tag)

CSS Attributes

Combined attributes

Attributes Inheritance

Overwriting Attributes

Measurement units in CSS:

CSS Variables

Styling the element

Styling format

Performing the style

1) The style element (not the best practice to use)

2) The style attribute (not the best practice to use)

3) The style file (the optimum method)

Types of Selectors

1) The type selector

2) The class selector (best practice to use)

3) The id selector (not the best practice to use)

4) The group selector

5) The descendant selector (cascaded)

6) The pseudo-class and element

Pseudo selectors

Combined Selectors

Cursor Attributes

Cursor

Pointer events

Content Attribute

Adds nothing

Adds a text from an attribute

Lists Attributes

List style type

List style position

List style image

Custom bullets

Table Attributes

Border spacing

Font Attributes

Font family

Font size

Font style

Font weight

Paddings and Margins Attributes

Paddings

Margins

Dimensions Attributes

Width

Minimum width

Maximum width

Height

Minimum height

Maximum height

Oerflow

Box sizing

Coloring Attributes

Color attribute

Opacity attribute

Caret color attribute

Filter attribute

Linear gradient attribute

Borders Attributes

Border color

Border width

Border style

Border radius

Outline

Background Attributes

Background Color

Background Image

Background Repeat

Background Position

Background Size

Background Attachment

Shadow Attributes

Shadow text

Box shadow

Text Attributes