651-905-3729 Microsoft Silver Learning Partner EC Counsel Reseller compTIA Authorized Partner

CSS Fundamentals Training

3 Days

Description

Modern browsers have terrific support for all commonly used CSS features, which means that it is no longer necessary to teach the types of CSS tricks and hacks that had to be used in the past to make pages look the same across browsers. This intensive CSS course provides thorough coverage of CSS as it is used in modern web design.

You will learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid, and z-index. And, along with these fundamentals, you will learn about functions, color types, gradients, logical properties, and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.

No Upcoming Public Classes

There are currently no public events available for this course. However, you can submit a request for a new date and we will try our best to get you into a CSS Fundamentals Training class.

Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date

Course Overview

Box Model

  • Content and Sizing
  • Areas of the Box Model
  • Debugging the Box Model
  • Controlling the Box Model

Selectors

  • Parts of a CSS Rule
  • Simple Selectors
    • Universal Selector
    • Type Selector
    • Class Selector
    • ID Selector
    • Attribute Selector
    • Grouping Selectors
  • Pseudo-Classes and Pseudo-Elements
    • Pseudo-classes
    • Pseudo-element
  • Complex Selectors
    • Combinators
    • Compound Selectors

The Cascade

  • Position and Order of Appearance
  • Specificity
  • Origin
  • Importance
  • Using DevTools

Specificity

  • Specificity Scoring
  • Scoring Each Selector Type
    • Universal Selector
    • Element or Pseudo-element Selector
    • Class, Pseudo-class, or Attribute Selector
    • ID Selector
    • Inline Style Attribute
    • !important Rule
  • Specificity in Context
  • Visualizing Specificity
  • Pragmatically Increasing Specificity
  • Matching Specificity Score = Newest Instance Win

Inheritance

  • Inheritance Flow
  • Which Properties are Inheritable?
  • How Inheritance Works
  • How to Explicitly Inherit and Control Inheritance
    • The inherit keyword
    • The initial keyword
    • The unset keyword

Color

  • Numeric Colors
    • Hex Colors
    • RGB (Red, Green, Blue)
    • HSL (Hue, Saturation, Lightness)
  • Color Keywords

Sizing Units

  • Numbers
  • Percentages
  • Dimensions and Lengths
    • Absolute Lengths
    • Relative Lengths
  • Miscellaneous Units
    • Angle Units

Layout

  • Layout: A Brief History
  • Layout: The Present and Future
  • Understanding the Display Property
  • Flexbox and Grid
    • Flexbox
    • Grid
  • Flow Layout
    • Inline Block
    • Floats
    • Multicolumn Layout
    • Positioning

Flexbox

  • What can you do with Flex Layout?
  • The Main Axis and the Cross Axis
  • Creating a Flex Container
  • Controlling the Direction of Items
    • Reversing the Flow of Items and Accessibility
    • Writing Modes and Direction
  • Wrapping Flex Items
    • The Flex-Flow Shorthand
  • Controlling Space Inside Flex Items
    • Allowing Items to Grow at Different Rates
  • Reordering Flex Items
  • Flexbox Alignment Overview
  • Distributing Space on the Main Axis
    • With flex-direction:column
  • Distributing Space Between Flex Lines
    • The place-content Shorthand
  • Aligning Items on the Cross-Axis
  • Why is there no justify-self in Flexbox?
  • How to Center an Item Vertically and Horizontally

Grid

  • Overview
  • Grid Terminology
    • Grid Lines
    • Grid Tracks
    • Grid Cell
    • Grid Area
    • Gaps
    • Grid Container
    • Grid Item
  • Rows and Columns
    • Intrinsic Sizing Keywords
    • The fr Unit
    • The minmax() Function
    • repeat() Notation
    • auto-fill and auto-fit
  • Auto-placement
    • Placing Items in Columns
    • Spanning Tracks
    • Filling Gaps
  • Placing Items
    • Stacking Items
    • Negative Line Numbers
  • Named Grid Lines
  • Grid Template Areas
  • Shorthand Properties
    • grid-template
    • grid property
  • Alignment
    • Distributing Extra Space
    • Moving Content Around

Logical Properties

  • Terminology
  • Block Flow
  • Inline Flow
  • Flow Relative
  • Sizing
  • Start and End
  • Spacing and Positioning
  • Borders
  • Units
  • Using Logical Properties Pragmatically
  • Solving the Icon Issue
  • Browser Support

Spacing

  • HTML Spacing
  • Margin
    • Negative Margin
    • Margin Collapse
  • Padding
  • Positioning
  • Grid and Flexbox
  • Creating Consistent Spacing

Pseudo-elements

  • ::before and ::after
  • ::first-letter
  • ::first-line
  • ::backdrop
  • ::marker
  • ::selection
  • ::placeholder
  • ::cue

Pseudo-classes

  • Interactive States
    • :hover
    • :active
    • :focus, :focus-within, and :focus-visible
    • :target
  • Historic States
    • :link
    • :visited
  • Form States
    • :disabled and :enabled
    • :checked and :indeterminate
    • :placeholder-shown
    • Validation States
  • Selecting Elements by Their Index, Order, and Occurrence
    • first-child and last-child
    • only-child
    • :first-of-type and :last-of-type
  • Finding Empty Elements
    • :empty
  • Finding and Excluding Multiple Elements
    • :is()

Borders

  • Border Properties
    • Style
    • Shorthand
    • Color
    • Width
  • Logical Properties
  • Border Radius
  • Border Images
    • border-image-source
    • border-image-slice
    • border-image-repeat

Shadows

  • Box Shadow
    • Multiple Shadows
    • Properties Affecting Box-Shadow
  • Text Shadow
    • Multiple Shadows
  • Drop Shadow

Focus

  • Why is Focus Important?
  • How Elements Get Focus
  • Styling Focus

Z-Index and Stacking Contexts

  • Z-Index
  • Negative Z-Index
  • Stacking Context
  • Creating a Stacking Context

Functions

  • What is a Function?
  • Functional Selectors
  • Custom Properties and var()
  • Functions that Return a Value
  • Color Functions
  • Mathematical Expressions
    • calc()
    • min() and max()
    • clamp()
  • Shapes
  • Transforms
    • Rotation
    • Scale
    • Translate
    • Skewing
    • Perspective
  • Animation Functions, Gradients, and Filters

Gradients

  • Linear Gradient
  • Radial Gradient
  • Conic Gradient
  • Repeating and Mixing

Animations

  • What is a Keyframe?
    • @keyframes
  • The Animation Properties
    • animation-duration
    • animation-timing-function
    • animation-iteration-count
    • animation-direction
    • animation-delay
    • animation-play-state
    • animation-fill-mode
    • The animation shorthand
  • Considerations when Working with Animation

Filters

  • The Filter Property
    • blur
    • brightness
    • contrast
    • grayscale
    • invert
    • opacity
    • saturate
    • sepia
    • hue-rotate
    • drop-shadow
    • url

Blend Modes

  • What is a Blend Mode?
  • Browser Compatibility
    • mix-blend-mode
    • background-blend-mode
  • Separable Blend Modes
    • Normal
    • Multiply
    • Screen
    • Overlay
    • Darken
    • Lighten
    • Color Dodge
    • Color Burn
    • Hard Light
    • Soft Light
    • Difference
    • Exclusion
  • Non-Separable Blend Modes
    • Hue
    • Saturation
    • Color
    • Luminosity

Lists

  • Creating a List
  • List Styles
    • list-style-position
    • list-style-image
    • list-style-type
    • list-style shorthand
  • ::marker pseudo
    • Marker Box
    • Marker Styles
  • Display Type

Transitions

  • Transition Properties
    • transition-property
    • transition-duration
    • transition-timing-function
    • transition-delay
    • shorthand:transition
  • What can and can't Transition?
    • Transform
    • Color
    • Shadows
    • Filters
  • Transition Triggers
  • Different Transitions for Enter or Exit
  • Accessibility Considerations
  • Performance Considerations

Overflow

  • Single Line Overflow with text-overflow
  • Using Overflow Properties
    • Scrolling on the Vertical and Horizontal Axis
    • Logical Properties for Scroll Direction
    • The Overflow Shorthand
  • Scrolling and Overflow
    • Scrolling and Accessibility
    • Scrollbar Positioning within the Box Model
    • root-scroller vs. implicity-scroller
    • scroll-behavior
    • overscroll-behavior

Backgrounds

  • Backgrounds
  • Background Color
  • Background Images
  • Repeating Background Images
  • Background Position
  • Background Size
  • Background Attachment
  • Background Origin
  • Background Clip
  • Multiple Backgrounds
  • The background shorthand

Text and Typography

  • Change the Typeface
  • Use Italic and Oblique Fonts
  • Make Text Bold
  • Change the Size of Text
  • Change the Space Between Lines
  • Change the Space Between Characters
  • Change the Space Between Words
  • font shorthand
  • Change the Case of Text
  • Add Underlines, Overlines, and Through-Lines to Text
  • Add an Indent to Your Text
  • Deal with Overflowing or Hidden Content
  • Control white-space
  • Control How Words Break
  • Change Text Alignment
  • Change the Direction of Text
  • Change the Flow of Text

No Upcoming Public Classes

There are currently no public events available for this course. However, you can submit a request for a new date and we will try our best to get you into a CSS Fundamentals Training class.

Private Training Available
No date scheduled, don’t see a date that works for you or looking for a private training event, please call 651-905-3729 or submit a request for further information here.
request a private session or new date