CSS3 Jumpstart - Zero to CSS HERO

Who is this course for?

Web professionals who are seeking to provide a more accessible design structure using Cascading Style Sheets and a more advanced & modern design visualisation using Cascading Style Sheets.

Objectives

Upon successful completion of this course you'll be able to; convert an existing page, styling for print, styling a press release, making an input form look good, styling an events calendar, creating an online greeting card, bringing hyperlinks to life, multicolumn layout, how to skin a menu, sneaking out of the box, positioning a better design and fixing your backgrounds.

You'll also be able to; work with the media query, add custom web fonts, apply text shadows, work with the REM unit, add CSS3 Gradients, round corners, apply a transparency, multicolumn layout, build CSS3 menus, working with CSS3 & jQuery, rotating objects, adding transitions and 3D in CSS3.

Prerequisites

You should have a good working knowledge of HTML before joining this class

Benefits

CSS Fundamentals with CSS3 properties, this class provides the web professional with the ability to control the rendering, e.g. fonts, colours, leading, margins, typefaces, and other aspects of style of a Web document without compromising its structure using Cascading Style Sheets. Using common desktop publishing terminology, Cascading Style Sheets makes it easy for professional as well as untrained designers to make use of its features.

Also - This class provides the web professional with the ability to design using next-gen's technology of CSS3 for modern, mobile and future browsers. The course will include design for mobile devices for rendering the visualisation of web pages using CSS3 and adding custom fonts. You'll also be able to control the rendering, for opacity, multi-column, drop-shadows and many more. Using the same CSS syntax, adding enhanced advanced effects makes it easy for professionals as well as untrained designers to make use of these new features.

This Jumpstart is not delivered over 5 consecutive days, which helps you when planning your training and absence from your office

CSS Introduction

HTML Structure and Content, CSS Presentation
Advantages of CSS
Creating and Using Style-Sheets
CSS Rules: The Basic Syntax
Case, Whitespace and Comments in CSS
The CSS Standards
The Scope of CSS
Browser Support for CSS

CSS Boxes and CSS Selectors

The CSS Box Model
CSS and Logical HTML Structure
Styling Boxes: Borders, Margins and Padding
The IE Box Model and Quirks Mode
IE Box Model Workarounds
Using IE6 Standards Mode
Specifying CSS Distances
Problems with Absolute Units: pixels and point sizes
Using Proportional Units: em, ex and percentages
Formatting Box Edges Differently
Shorthand Syntax for Sets of Edges
Using Margins and Padding Effectively
Collapsing Vertical Margins on Paragraphs
Using Negative Margins on Boxes
Background Images on CSS Boxes
Grouping Elements with HTML Classes
Styling Multiple Elements Similarly (Selector Grouping)
Block Boxes and Inline Boxes
Block Box Behaviour
Inline Box Behaviour
Text Formatting in CSS
Text Formatting
Typefaces, Alternatives and Defaults
Text Size a Serious Usability Issue
Font Characteristics
Setting and Using Space Within Text
Formatting Blocks of Text
Using Arbitrary Inline Tags:

More CSS Selectors and Selection

Using HTML Element IDs in CSS
Using CSS Descendant Selectors
Descendant Selector Examples
Why You Need To Know Them
Browser Support and CSS Hacks
Distinguishing and Setting Link States
Link, Visited, Hover, Active, Focus
Modularising CSS Style-Sheets
Simpler Management, Less Effort, More Control
Embedded CSS Styles in HTML Documents
How and When to Use Them (Rarely)
Distinguishing Print, Screen and other Output Formats
Special Issues in CSS for Print

CSS Positioning

Choosing the Right CSS
Technique for Positioning Blocks
The Position Property, Floats, Margins (inc. Negative and Auto), etc
Static Positioning and Normal Flow
Absolute Positioning Outside Normal Flow
Relative Positioning — Not What You May Expect!
Fixed Positioning Outside Normal Flow
Relative Absolute Positioning
Absolutely Positioned Blocks in Relatively Positioned Containers
Floating Boxes with the CSS float property
Page Layout Using Absolutely Positioned Blocks

Using CSS in the Real World

Deploying CSS
CSS Formatting Versus HTML Formatting
Achieving a Balance
Standard Tags and Semantic Markup
Usability
Readable Pages
Screen Size and Fluid Design
Text Size, Including Internet Explorer Quirks
Table Layout and CSS Positioning
Table Layout and CSS Positioning as Alternatives
Combining Table Layout with CSS Positioning
CSS Browser Support
Testing Websites
Using Test Suites and Multiple Browsers
Cross-platform Testing in Single-platform Environments
CSS Help and Advice
Authoritative Sources versus Web Myths and Gossip
Free Lifetime Support

More on CSS Page Layout

Alternative Methods of CSS Positioning
Centering Blocks
Styling Lists
Redefining the Behaviour of Inline and Block Elements
Hiding and Revealing Blocks
Table Formatting in CSS
Styling Table Cell Borders
Page Layout with Table Display Properties

Cascade, Precedence, Specificity and Inheritance in CSS

Taking Control: Ensuring that CSS Rules Interact in the Way You Want
Combining Styles: Different Types, Origins, Importance, Specificity and Order
Examples: Combining Rules
Cascading and Cascade Order
Resolving Style Conflicts By Origin
Resolving Style Conflicts By Importance
Resolving Conflict By Selector Specificity
Resolving Conflict By Order
Non-CSS Presentational Hints
Property Inheritance

CSS Layers and Translucency

Different Forms of Layered Presentation in CSS
Layering with the z-index Property
Different Methods for Creating Translucency Effects
The CSS3 opacity Property
opacity Example
Fixed Attachment Backgrounds in Layers
background-attachment Example
Transparency and Semi-transparency with Alpha-Blended PNG
PNG Translucency Example and Sample Code
Pseudo-Transparency with JPG Positioned Backgrounds
JPG Pseudo Transparency Example

CSS3 on mobile devices

CSS3 media queries
Different Sizes
Orientation Change

Fonts & Text

Using Custom Fonts
@font property
Importing fonts
Web Font formats
Buying web fonts
TypeKit, fontsquirrel
Using google font api
Text shadows
Font sizing with REM
Enhanced Text Gradients

Enhancing your boxes

Box rounding
Adding a Shadow to objects
Opacity & Transparency
Colouring with RGB and Alpha
Adding a CSS3 Gradient
Rotating objects
Applying animations & transitions

Backward compatibility tools

CSS3Pie,
CSS3Please & Generators
Transformie, Modernizr
Selectivizr

Useful CSS Tips

Usage of CSS Sprites
Pseudo Selectors
CSS minify
Cheat Sheet for CSS3