computerclasses

CSS ​

Introduction to CSS

  • Lesson Introduction
  • Introducing CSS
  • Inline vs Internal vs External CSS
  • Commenting in CSS
  • Assignment: Link a CS File Externally

Selectors

  • Introduction to Selectors
  • Class and ID Selectors
  • Universal and Type Selectors
  • DOM Tree and Element Relationships
  • CSS Combinators, Explained
  • Inheritance
  • Inherit vs Initial
  • Debugging with Developer tools
  • CSS troubleshooting
  • Assignment: Optimize your code
  • Assignment: Match the Described Styles

Specificity

  • Introducing Specificity
  • Calculating Specify
  • Using! important
  • ! important declaration
  • Assignment: Calculate Better Specificity

 

Pseudo Class

  • Introduction to Pseudo Class
  • What is a Pseudo Class?
  • Using Pseudo class
  • Pseudo-Classes
  • Selector Parsing with Pseudo Classes
  • Pseudo-Elements
  • Assignment: Style your content using: hover
  • Assignment: Style different types of links using Pseudo-classes
  • Assignment: Create CSS Pseudo-elements

Box Model

  • Lesson Introduction
  • What is the Box Model?
  • Box Model Dimensions
  • Content Categories
  • Content Categories Cheat sheet

Padding

  • Introducing CSS Padding
  • Padding vs Border vs Margin vs Outline
  • Assignment: Align Content with Padding

CSS Borders

  • Introducing CSS Borders
  • CSS Borders: Colors
  • CSS Borders: Images
  • Assignment: Create given Figures

CSS Margins

  • Introducing CSS margins
  • CSS Margins
  • Collapsing margins
  • Assignment: Give margin to Previous elements

CSS Outlines

  • Introducing CSS Outline
  • CSS Outline
  • Shorthand
  • Assignment: Recreate a given layout

CSS Display

  • Lesson introduction
  • Introducing Display
  • Display Property
  • Visibility
  • Assignment: Practice Display and visibility

CSS Units and Values

  • Introduction to CSS Units and Values
  • Units and Values
  • Absolute Units: Pixels
  • Relative Values
  • Assignment: Create Interactive Components

CSS Positioning and Index

  • Lesson Introduction
  • Positioning Elements
  • Positioning static and relative
  • Index
  • Assignment: Create a card Deck
  • Absolute Positioning
  • Fixed and sticky Positioning
  • Assignment: Create a sticky navigation Bar

CSS Wrap and axis

  • Lesson Introduction
  • Overflow Introduction
  • Overflow: wrap and Axis
  • Assignment: Create a fixed banner

CSS Float and Clear

  • Introduction to Floats
  • Float and Clear
  • Block formatting
  • Create new Block formatting contents