Learn CSS

Introduction to Selectors

Universal Selector

Element Selector

CSS id Selector

CSS class Selector

The input element as a selector

CSS grouping Selector

CSS pseudo-class Selector

That's all for Selectors

Adding Colors to Webpage

Give Color to Text

Specifying colors using the color name

Specifying color using HEX value

Specifying color using RGB

Make colorful backgrounds

Quick Revision

Introduction to Text styling

Changing the Font type (font-family)

CSS Font style (font-style)

Changing Font size (font-size)

Make fonts bold (font-weight)

Letter and Word Spacing

Text Direction (text-direction):

Aligning the Text (text-align)

Decorating the Text (text-decoration)

Handling text overflow (text-overflow):

And Text styling is complete!

What is Box Model?

The Content box

Setting height and width of Element

Margin around Element

Padding inside Element

Border around Element

Understanding Box Sizing

Quick Revision

Give your HTML elements a Border

Control the border-style

Thin/Thick borders using border-width

Change Border color using border-color

Border Shorthand Property

Rounded Corners using border-radius

End of Borders

CSS display Property

CSS Display Inline

CSS Display Block

CSS Display None

CSS display Inline-block

CSS Visibility hidden

Quick revision

CSS Properties to style Images - Introduction

Set Height and Width

Make Image Corners round or Image Circular

CSS float Property

Centering an Image

Making Image Transparent - opacity

CSS Background Images

CSS filter property

Making Images Responsive

That's all for Images

Be my Shadow - Introduction

Adding Shadow effect to the text

Multiple Text Shadows

Adding shadow effect using box-shadow

Applying shadow effect on Cards

Bye Bye! Shadows

Introduction to Positioning

CSS Static Position

CSS Relative Position

CSS Absolute Position

CSS Fixed Position

CSS Sticky Position

Quick Revision

What are Media Queries?

Adding breakpoint for different screen size

Hiding elements using media queries

Changing Font-size using media queries

Quick Revision

What is CSS transition?

CSS transition-property property

CSS transition-duration property

CSS transition-timing-function property

CSS transition-delay property

CSS transition property

End of Transition!

CSS transform

CSS 2D Transform

CSS 2D Transform continued...

CSS 3D Transform

CSS transform-origin property

CSS transform-style property

CSS perspective Property

CSS perspective-origin Property

The backface-visibility property

End of Transformations

CSS Animation - Introduction

The @keyframes Rules

CSS animation-name Property

CSS animation-duration Property

CSS animation-delay Property

CSS animation-iteration-count property

CSS animation-direction property

CSS animation-timing-function property

CSS animation-fill-mode property

CSS animation property

The End of Animation

Introduction to Flexbox Layout

Flex Container and Items

Flex Direction

Flex Wrap

Flex Flow

Flex Items Order

Flex Item flex-grow property

Flex Item flex-shrink property

Flex Item flex-basis property

Flex Item flex property

Flex Container justify-content Property

Flex Container align-items Property

Flex Item align-self property

End of FlexBox!

Introduction to Grids

Creating a Grid Container

Define Grid Template

Placing a Grid Item

Placing a Grid Item - Part 2

Grid Area Property

Grid Template Areas

Grid Template

Grid Gaps

justify-items and align-items Property

justify-self and align-self Property

Alignment of the complete Grid

Alignment of the complete Grid - Part 2

Final Conclusion