Skip to main content

CSS in Perspective

Course Overview​

Bring CSS to life in your projects. This class covers styling a project in Perspective using basic CSS and common design principles, as well as more advanced concepts like using the Advanced Stylesheet and Themes. This class takes an existing project and applies CSS to increase its visual appeal and functionality. By the end of this class, students will be able to use CSS, Advanced Stylesheets, standardize fonts and component transforms (resizing) to greatly improve an existing project.

Length: 2 days

Who is This Class For? What are the Class Expectations?​

This class is designed as Level 2 class in our curriculum. It has been designed with intermediate-level users in mind.

Important

This is a Level 2 class, prior experience with Ignition is required and Core Certification is recommended.

Suggested Class Pre-Requisites:​

  • Some familiarity with CSS.

Topics Covered​

Basic Styles and Classes​

  • Applying Local CSS
  • Applying Styles via Classes
  • Understanding Style vs Text Style
  • Styling Parts of Components
  • Applying Multiple Classes

Flexbox​

  • Creating a Flex View
  • The Primary Axis
  • Reverse Direction
  • Items and Justify Properties
  • Wrap

Building Styles​

  • Formatting Text
  • Working with Colors
  • Adding Spacing and Alignment
  • Adding Borders
  • Adding Images
  • Fixing Contrast Issues
  • Adding Additional Classes

Element States​

  • Working With the Hover State
  • Adding the Focus State
  • Adding Media Queries

Conditional Styling & Animation​

  • Applying Styling via Scripting
  • Fixing Naming Issues Through Scripting
  • Adding CSS Animation

The Advanced Stylesheet​

  • Enabling the Advanced Stylesheet
  • Reviewing Basic CSS Syntax
  • Applying Hand-Coded Styles
  • Inspecting Styles
  • Overriding Default Styles
  • Digging Into Components
  • Applying Positioning
  • Styling SVGs
  • Coding Animation

Accessing Web Fonts​

  • Adding New Fonts
  • Using Web Fonts
  • Overriding Fonts in Components

Using the CSS Grid​

  • Refactoring a View in Grid
  • Applying CSS Grid to the Markdown Component