In CSS Tutorial we will learn how to style an HTML document. CSS means Cascading Style Sheet

How we learn?

Every tutorial have a little theory and example like this,

See the Pen css intro by Arpit (@soniarpit) on CodePen.

I suggest you to try in your system.

Table of content (CSS Tutorial)

• Introduction to CSS

• CSS Syntax and Structure

• Location of CSS

  • Ways to Insert CSS
  • Inline Style Sheet
  • Internal Style Sheet (Document-level style sheet)
  • External Style Sheet

• CSS Comments

• CSS Selectors

  • Simple Selector
  • Class Selector
  • Id selector
  • Universal Selector
  • Attribute Selector
  • Contextual Selector

• CSS Backgrounds

  • CSS background-color

  • CSS background-image

  • CSS Background Repeat

  • CSS background-repeat: no-repeat

  • CSS background-position

  • CSS background-attachment

  • CSS background-size Property

  • CSS background – Shorthand property

• CSS Colors

• Manipulating Texts and Fonts

  • Font Families
  • Font Sizes
  • Font Variants
  • Font Styles
  • Font Weights
  • Font Shorthands
  • Text Decoration
  • Alignment of Text

• CSS Borders

  • CSS Border Style

  • CSS Border Width

  • CSS Border Color

  • Specific Side Colors

  • CSS Border – Individual Sides

  • CSS Border – Shorthand Property

  • CSS Rounded Borders

• CSS Margins

  • Margin – Individual Sides
  • Margin – Shorthand Property
  • Margin Auto
  • Margin Inherit Value

• CSS Padding

  • Padding – Individual Sides
  • Padding – Shorthand Property

• CSS Lists

  • Different List Item Markers
  • An Image as The List Item Marker
  • Position The List Item Markers
  • Remove Default Settings
  • List – Shorthand property

• CSS Position

  • The position Property

  • Absolute Positioning

  • Relative Positioning

  • Static Positioning

  • Fixed Positioning

  • Sticky Positioning

• CSS Animations

  • What are CSS Animations?

  • @keyframes

  • Delay an Animation

  • Set How Many Times an Animation Should Run

  • Run Animation in Reverse Direction or Alternate Cycles

  • Specify the fill-mode For an Animation

  • Animation Shorthand Property

• CSS Tooltip

• CSS Styling Images

  • Rounded Image
  • Thumbnail Image
  • Responsive Image
  • Transparent Image

• CSS Variables

• CSS Flexbox

• CSS Media Queries

• CSS Wildcard Selectors

• CSS Gradients

  • Linear Gradients
  • Radial Gradient

• CSS Pseudo Class

• CSS Pseudo-elements