Course duration
- 2 days
Course Benefits
- Learn new selectors, pseudo class, and pseudo elements to style elements.
- Learn font and text effects, including @font-face.
- Learn new gradient, mask, and background image techniques.
- Learn how to implement animations, transitions, and 2D and 3D transforms.
- Learn how to use media queries to render content appropriately for mobile and tablet devices.
- Learn about vendor-specific prefixes and browser support for various CSS techniques.
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.
Course Outline
- Power of CSS
- The Power of CSS
- CSS Level 3 and CSS Level 4
- Selectors
- The target Pseudo-Class
- Using CSS Target
- UI Element States Pseudo-Classes
- Using CSS Attribute-State Pseudo-Classes
- Negation Pseudo-Class
- Structural Pseudo-Classes
- Using the Structural Attribute Pseudo-Classes
- Using nth-of-type Pseudo-Class
- Pseudo-Elements
- Fonts and Text Effects
- Fonts and Text Effects
- Fonts on the Web
- Font Services
- Using Font Services
- The @font-face Rule
- Using @font-face
- Text Shadow
- Word Wrapping
- Text Shadow and Word Wrap
- Colors, Gradients, Background Images, and Masks
- Colors, Gradients, Background Images, and Masks
- Color
- The opacity Property
- Using HSL & Opacity
- Backgrounds
- Multiple Background Images with background-clip,
- background-origin, and background-size
- Borders and Box Effects
- Borders and Box Effects
- Image Borders
- Image Borders
- Rounded Corners
- Box Shadow
- Rounded Corners & Drop Shadow
- Transitions, Transforms, and Animations
- Transitions & Transforms
- Transitions
- Transitions
- Layout: Columns and Flexible Box
- Columns
- Columns
- Flexible Box Layout Module
- Examples
- Flexible Box Layout
- Vendor Prefixes
- What are Vendor Prefixes?
- Maybe They Ain't So Bad
- Strategies
- Autoprefixer
- Autoprefixer with Gulp
- Embedding Media
- Embedding Media
- Video Formats
- Styling Video
- Styling Video
- Accessibility Features
- Web Accessibility
- The CSS Speech Module
- Media Queries
- Media Queries
- Targeting Widths and Devices with CSS Media Queries
- Responsive Images & the viewport Metatag
- Responsive Design
- Sass
- Preprocessors
- Sass
- Frameworks
- Frameworks
- Bootstrap
- Setting up Bootstrap
- Display Utility Classes
- Foundation
- Setting Up Foundation
- UIkit
- Setting Up UIkit
- Bootstrap
- Grid Layout
- CSS Grid Layout
- Styling the Parent Element
- Grid Layout
- Styling Grid Children Elements
- Controlling Grid Line Size: Gaps
- Creating Modern Art
- Grid Layout for Page Layout
- Grid Layout and Media Queries
- Page Layout with Grid Areas
- CSS Level 4 Selectors
- CSS Level 4 Selectors
- Logical Combinations
- :matches()
- Case Insensitivity
- Going Forward/Additional Resources
- Going Forward/Additional Resources
- What's Next?
- Online Resources
- Get Involved
- Testing CSS
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
- Advanced level of CSS
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.