Cascading Stylesheets 201: Green Belt

Who is this course for?

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

Objectives

Upon successful completion of this course you'll 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 working knowledge of HTML & CSS and have at least covered most of the topics in our CSS 101 class

Benefits

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.

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