CSS3
info
Day 2 of Progressive Enhancement 5-Day Online Training
10 AM - 5 PM EDT
Instructor: Mary Gillen or Kathy Gillen
Learn about the new capabilities of CSS3: new text effects, background and border formatting enhancements, animation and transition movement, fluid layouts, how to use CSS to query media, and much more. You will also discover how CSS3 is now used in mobile device applications, assistive (508-compliant) technologies, and more.
Course Prerequisites
To gain the most from the class, you should already have experience with standard HTML 4 tag set plus CSS syntax.
Course Objectives
- Learn the evolution of CSS1, CSS2 and the new CSS3
- Selective styling in CSS3
- CSS3 font properties
- CSS3 text properties
- CSS3 color and background properties
- CSS3 box properties
- How to set CSS3 opacity and shadowing
- CSS3 transformation and transition properties
- How to use CSS3 now (and what parts to use)
Course Outline 1: Introducing the Course
- Meeting the Prerequisites
- Understanding the Course Format
- Reviewing the Course Outline
2: Understanding CSS3
- What is a Style?
- What Are Cascading Stylesheets?
- The Evolution of CSS
- CSS Level 1 (CSS1)
- CSS Level 2 (CSS2)
- CSS Level 3 (CSS3)
- CSS and HTML
- Construction of a CSS Rule
- New in CSS3
3: Review of Basic CSS
- Basic CSS Selectors
- Inline: Adding Styles to an HTML Tag
- Embedding: Adding Styles to a Web Page
- External: Adding Styles to a Web Site
- (Re)Defining HTML Tags
- Defining Reusable Classes
- Defining Unique IDs
- Defining Universal Styles
- Grouping: Defining Elements Using the Same Styles
- Exercise: Creating an External CSS Stylesheet
4: Selective Styling
- The Element Family Tree
- Defining Styles Based on Context
- Styling Descendents
- Styling only the children
- Styling siblings
- Working with Pseudo-classes
- Styling links
- Styling for Interaction
- NEW IN CSS3: Styling specific children with pseudo-classes
- Styling for a particular language
- NEW IN CSS3: Not styling an element
- Working with Pseudo-elements
- Working with first letters and lines
- Setting context before and after an element
- Defining Styles Based on Tag Attributes
- NEW IN CSS3: Querying the Media
- Media queries
- Using the @media rule
- Inheriting Properties from a Parent
- Managing existing or inherited property values
- Making a Declaration !important
- Determining the Cascade Order
- Exercise: Adding Selective Styling to an External CSS Stylesheet
5: Font Properties
- Understanding Typography on the Web
- Specifying the character set
- Generic font families
- Dingbats
- HTML character entities
- Setting a Font-Stack
- Finding Fonts
- Web-safe fonts
- Downloadable Webfonts
- Setting a better font stack
- Setting the Font Size
- NEW IN CSS3: Adjusting Font Size for Understudy Fonts
- Making Text Italic
- Setting Bold, Bolder, Boldest
- Creating Small Caps
- Setting Multiple Font Values
- Exercise: Adding Font Properties to an External CSS Stylesheet
6: Text Properties
- Adjusting Text Spacing
- Adjusting the space between letters (tracking)
- Adjusting space between words
- Adjusting space between lines of text (leading)
- Setting Text Case
- NEW IN CSS3: Adding a Text Drop Shadow
- Aligning Text Horizontally
- Aligning Text Vertically
- Indenting Paragraphs
- Controlling White Space
- Decorating Text
- Exercise: Text Properties to an External CSS Stylesheet
7: Color and Background Properties
- Choosing Color Values
- Color keywords
- RGB hex values
- RGB decimal values
- Percentage values
- NEW IN CSS3: HSL values
- NEW IN CSS3: Color alpha values
- NEW IN CSS3: Color Gradients in Backgrounds
- Internet Explorer gradients
- Mozilla gradients
- Webkit gradients
- Choosing Your Color Palette
- Color wheel basics
- Online color scheme tools
- Setting Text Color
- Setting a Background Color
- Setting a Background Image
- Using Background Shorthand
- Exercise: Adding Color and Backgound Properties to an External CSS Stylesheet
8: Box Properties
- Understanding an Element's Box
- Parts of the box
- Displaying an Element
- Setting the Width and Height of an Element
- Controlling Overflowing Content
- Floating Elements in the Window
- Clearing a floating element
- Setting an Element's Margins
- Setting an Element's Outline
- Setting an Element's Border
- NEW IN CSS3: Rounding Border Corners
- NEW IN CSS3: Setting a Border Image
- Setting an Element's Padding
- Exercise: Adding Box Properties to an External CSS Stylesheet
9: Visual Formatting Properties
- Understanding the Window and Document
- Setting the Positioning Type
- Static positioning
- Relative positioning
- Absolute positioning
- Fixed positioning
- Setting an Element's Position
- Stacking Objects in 3D
- Setting the Visibility of an Element
- Clipping an Element's Visible Area
- NEW IN CSS3: Setting an Element's Opacity
- NEW IN CSS3: Setting an Element's Shadows
- Exercise: Adding Visual Formatting Properties to an External CSS Stylesheet
10: Transformation and Transition Properties
- NEW IN CSS3: Transforming an Element
- 2D transformations
- 3D transformations
- NEW IN CSS3: Adding Transitions Between Element States
- What can be transitioned?
- Exercise: Adding Transformation and Transition Properties to an External CSS Stylesheet
11: Essential CSS Techniques
- Creating Multicolumn Layouts with Floats
- Styling Links Versus Navigation
- Using CSS Sprites
- Exercise: Creating a CSS Drop-down Menu
12: Managing Stylesheets
- CSS Libraries and Frameworks
- Stylesheet Strategies
- The One for All method
- The Divide and Conquer method
- The Aggregate method
- The Dynamic method
- Troubleshooting CSS Code
- Ask these questions
- If all else fails, try these ideas
- Debugging CSS with Firebug and Web Inspector
- Firebug for Firefox
- Web INspector in Safari and Chrome
- Validating Your CSS Code
- Minifying Your CSS Code
- 32 CSS Best Practices
Tuition for Progressive Enhancement 5-Day Training: $1975 per person
Register Now for All 5 Days:
