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 CSS course provides a thorough introduction to CSS as it is used in web design today.
Learn the benefits of CSS.
Learn to avoid using deprecated HTML tags and attributes.
Learn CSS syntax.
Learn to use <div> and <span> tags appropriately.
Learn all the common CSS properties and their values.
Learn to use CSS resets and normalizers.
Learn best practices for choosing units of measurement.
Learn how to select CSS fonts and to download and use new fonts.
Learn about color and opacity and to create backgrounds.
Learn to work with borders, margin, and padding (the box model).
Learn to style tables with CSS.
Learn to use positioning.
Learn to use transforms and transitions rotate, scale, and skew elements and create animations.
Learn about flex, grid, and multi-column layouts.
Learn to style lists and create drop-down and fly-out navigation menus.
Learn to use media queries to style pages for different device sizes and media.
Available Delivery Methods
Private Class Private classes are delivered for groups at your offices or a location of your choice.
Self-Paced Learn at your own pace with 24/7 access to an On-Demand course.
Crash Course in CSS
Benefits of Cascading Style Sheets
The Universal Selector
General Sibling Combinators
Adjacent Sibling Combinators
Precedence of Selectors
How Browsers Style Pages
External Stylesheets, Embedded Stylesheets, and Inline Styles
Exercise: Creating an External Stylesheet
Exercise: Creating an Embedded Stylesheet
Exercise: Adding Inline Styles
<div> and <span>
Exercise: Divs and Spans
Units of Measurement
Absolute vs. Relative Units
Ems and Rems
The inherit Value
Specifying by Font Name
Specifying Font by Category
Relative font-size Terms
Exercise: Styling Fonts
Color and Opacity
About Color and Opacity
Color and Opacity Values
RGB Hexadecimal Notation
RGB Functional Notation
HSL Functional Notation
Exercise: Adding Color and Opacity to Text
Exercise: Text Properties
Borders, Margins, and Padding
The CSS Basic Box Model
Introduction to using Google Chrome DevTools with CSS
Exercise: Borders, Margin, and Padding
Creating a "hint" Class
Modifying the "hint" Class
Display and Visibility
Pseudo-classes and Pseudo-elements
Styling Links with Pseudo-classes
Styling Tables and Articles with Pseudo-classes
Styling Tables with CSS
A Review of HTML table Elements and Attributes
Spanning Columns and Rows
CSS Properties and Styling Tables
Exercise: Styling a Table Exercise
Positioning with top, bottom, left, and right
float and clear
float, clear, and ::after
Transforms and Transitions
Exercise: Transforms and Transitions
Introduction to Flexible Box Layout Module
Some Flexbox Properties
Introduction to Grid Layout
Some Grid Properties
CSS Lists as Hierarchical Navigation
Exercise: Basic Vertical Navigation Bars
Dynamic Drop-down and Fly-out Navigation Bars
Exercise: Basic Drop-down Menu
Exercise: Basic Fly-out Menu
Exercise: CSS List Menus
What Are Media Queries?
Finding and Using Icons
Exercise: Targeting Print
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Experience in the following is required for this CSS class:
Courses that can help you meet these prerequisites: