Course duration
- 3 days
Course Benefits
- 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.
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
Private classes are delivered for groups at your offices or a location of your choice.
Learn at your own pace with 24/7 access to an On-Demand course.
Course Outline
- Crash Course in CSS
- Benefits of Cascading Style Sheets
- CSS Rules
- CSS Comments
- Selectors
- Type Selectors
- Class Selectors
- ID Selectors
- Attribute Selectors
- The Universal Selector
- Grouping
- Combinators
- Descendant Combinators
- Child Combinators
- General Sibling Combinators
- Adjacent Sibling Combinators
- Precedence of Selectors
- How Browsers Style Pages
- CSS Resets
- CSS Normalizers
- External Stylesheets, Embedded Stylesheets, and Inline Styles
- External Stylesheets
- Embedded Stylesheets
- Inline Styles
- Exercise: Creating an External Stylesheet
- Exercise: Creating an Embedded Stylesheet
- Exercise: Adding Inline Styles
- <div> and <span>
- Exercise: Divs and Spans
- Media Types
- Units of Measurement
- Absolute vs. Relative Units
- Pixels
- Ems and Rems
- Percentages
- Other Units
- Inheritance
- The inherit Value
- CSS Fonts
- font-family
- Specifying by Font Name
- Specifying Font by Category
- @font-face
- Getting Fonts
- font-size
- Relative font-size Terms
- Best Practices
- font-style
- font-variant
- font-weight
- line-height
- font
- Exercise: Styling Fonts
- font-family
- Color and Opacity
- About Color and Opacity
- Color and Opacity Values
- Color Keywords
- RGB Hexadecimal Notation
- RGB Functional Notation
- HSL Functional Notation
- color
- opacity
- Exercise: Adding Color and Opacity to Text
- CSS Text
- letter-spacing
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform
- white-space
- word-break
- word-spacing
- Exercise: Text Properties
- Borders, Margins, and Padding
- The CSS Basic Box Model
- Introduction to using Google Chrome DevTools with CSS
- Padding
- Margin
- Border
- border-width
- border-style
- border-color
- border-radius
- box-sizing
- box-shadow
- Exercise: Borders, Margin, and Padding
- Backgrounds
- background-color
- background-image
- background-repeat
- overflow
- background-attachment
- background-position
- Keywords
- Coordinates
- Creating a "hint" Class
- background-size
- background-origin
- background-clip
- Modifying the "hint" Class
- background
- Exercise: Backgrounds
- Display and Visibility
- display
- visibility
- Pseudo-classes and Pseudo-elements
- Pseudo-classes
- Styling Links with Pseudo-classes
- Styling Tables and Articles with Pseudo-classes
- :nth-child()
- Pseudo-elements
- content
- Using Pseudo-elements
- Styling Tables with CSS
- A Review of HTML table Elements and Attributes
- Spanning Columns and Rows
- CSS Properties and Styling Tables
- table-layout
- border-collapse
- Exercise: Styling a Table Exercise
- A Review of HTML table Elements and Attributes
- Positioning
- Normal Flow
- position
- Positioning with top, bottom, left, and right
- z-index
- float and clear
- float
- clear
- float, clear, and ::after
- Exercise: Positioning
- Transforms and Transitions
- transition
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- transition
- transform
- Rotation
- Scale
- Skew
- Translate
- Exercise: Transforms and Transitions
- transition
- Layouts
- Introduction to Flexible Box Layout Module
- Some Flexbox Properties
- Introduction to Grid Layout
- Some Grid Properties
- Multi-column Layout
- Exercise: Layouts
- Introduction to Flexible Box Layout Module
- 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
- Media Queries
- What Are Media Queries?
- Breakpoints
- Media Types
- Syntax
- Font Awesome
- Finding and Using Icons
- Exercise: Breakpoints
- Exercise: Targeting Print
- What Are Media Queries?
Class Materials
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:
- HTML
Courses that can help you meet these prerequisites:
Instructor-led courses are offered via a live Web connection, at client sites throughout Europe, and at our Geneva Training Center.