Skip to content
Home » CSS Basics

CSS Basics

Getting started
  1. Introduction
  2. Getting started
  3. Cascades

Selectors
  1. CSS Selection overview
  2. Elements Classes & Id Selectors
  3. CSS Attribute Selectors
  4. CSS attr( ) method
  5. Property and values
  6. CSS Combinator Selectors
  7. Sibling Selectors
  8. Descendant & Child Selectors
  9. CSS nth child Selectors
  10. Pseudo Classes & Elements
  11. Specificity
  12. Important directive

Color and fonts
  1. Color Property
  2. Background properties
  3. Background-clip Property
  4. Gradients
  5. Filters
  6. Transparency and Opacity
  7. Color Scheme
  8. Color contrast
  9. Text-decoration property
  10. Font and font-family Properties
  11. Custom Web Fonts
  12. Google fonts
  13. CSS Unicode-Range
  14. CSS Letter and Word Spacing
  15. Height vs Line-Height
  16. CSS Hyphens
  17. Text-shadow
  18. Centering vs text-align
  19. Native System Font Stacks

Box Model
  1. Box Model
  2. CSS3 box-sizing Property
  3. Padding and Margin
  4. Border Shorthand Property
  5. Border-radius property
  6. Border-image property
  7. Borders with Gradients
  8. Display none vs visibility hidden
  9. Box-shadow

Layout & Position
  1. Display Block, Inline, and Inline-Block
  2. Overflow – Hidden, scroll & auto
  3. Layout & Position basics
  4. Relative and absolute position
  5. Floats and Clears
  6. CSS Flexbox
  7. CSS Grid
  8. Layouts – Flexbox vs Grid vs Float
  9. CSS GRID With Flexbox
  10. Position sticky
  11. Columns
  12. Centering
  13. 2D Transforms
  14. Perspective Property

Responsive
  1. Intro to Media Queries
  2. Viewport Meta Tag and Media Queries
  3. CSS min-width, max-width, and width
  4. CSS3 Viewport Units
  5. Responsive Images
  6. clamp min max Method
  7. Aspect ratio property

Essential Concept
  1. CSS Units
  2. PX vs REM vs EM

New features
  1. CSS3
  2. CSS Variables
  3. At-rule: @supports
  4. calc Method
  5. Targetting Text Fragments

Tips & Tricks
  1. Reset Browser styles
  2. Use CSS Classes vs Ids
  3. CSS Pro Tips
  4. Sticky Footer
  5. Collapsible Header
  6. Browser Styles
  7. CSS Comments
  8. Mouse Cursors
  9. Arrows using Borders
  10. Scroll Snap Properties
  11. Clip path Property
  12. Creating Round Images

Animation
  1. CSS Transition
  2. CSS Animation overview
  3. CSS Keyframes Animation
  4. SVG Animations

Tools
  1. Chrome Dev Tools
  2. Find Unused CSS Styles with Chrome Dev Tools
  3. Custom Mobile Device Simulation in Chrome Dev Tool
  4. Firefox DevTools
  5. How to use Inactive CSS in Firefox
  6. GRID Dev Tools
  7. Animation Dev Tools
  8. Cascade using DevTools
  9. CSS Debug using DevTools
  10. Firefox Font Editor DevTools
  11. Testing Color Contrast Devtool

Moving Forward
  1. CSS Preprocessors
  2. CSS Frameworks

Conferences & Meetups
  1. CSSconf

Complete course by Author

  1. Dave Gray