CSS – Cascading Style Sheets is a language used for relating the formatting of a document written in a markup language. Although most often used to set the pictorial style of web pages and user interfaces written in HTML and XHTML, the language can be useful to any XML document, including plain XML, SVG and XUL, and is appropriate to rendering in communication , or on other broadcasting . Along with HTML and JavaScript, CSS is a keystone technology used by most websites to design visually good looking webpages, end user interfaces for web applications, and end user interfaces for many mobile applications. CSS3 training introduces new client-side web designers and developers to CSS3, and responsive web design. Attendees learn the CSS skills needed to create professional looking web pages that will render on any screen, from phone to tablet to desktop. CSS – Cascading Style Sheets is a language used for relating the formatting of a document written in a mark-up language.

1. CSS3 & RWD with CSS3,Grid systems (covers –Introduction to Fluid grid
system,960GS,Unsemantec,Bootstrap,Foundation & Skeleton)
Duration: 1 day
Prerequisite : good knowledge of CSS 2.1 & Box model layout.
__________________________________________________________________________________
Day - 1:
INTRODUCING CSS3 :
What CSS3 Is and How It Came to Be
A Brief History of CSS3
CSS3 Is Modular
Module Status and the Recommendation Process
CSS3 Is Not HTML5
Let’s Get Started: Introducing the Syntax
Browser-Specific Prefixes
Future-Proofing Experimental CSS
Getting Started
SELECTORS :
Attribute Selectors
New Attribute Selectors in CSS3
Beginning Substring Attribute Value Selector
Ending Substring Attribute Value Selector
Arbitrary Substring Attribute Value Selector
Multiple Attribute Selectors
The General Sibling Combinator
Selectors: Browser Support
PSEUDO-CLASSES AND PSEUDO-ELEMENTS :
Structural Pseudo-classes
The nth-* Pseudo-classes
first-of-type, last-child, and last-of-type

2. only-child and only-of-type
Other Pseudo-classes
target
empty
root
not
UI Element States
Pseudo-elements
The selection pseudo-element
DOM and Attribute Selectors: Browser Support
WEB FONTS :
The @font-face Rule
Defining Different Faces
True vs Artificial Font Faces
A “Bulletproof” @font-face Syntax
Using Local Fonts
Font Formats
The Final “Bulletproof” Syntax
The Fontspring Bulletproof Syntax
Licensing Fonts for Web Use
A Real-World Web Fonts Example
More Font Properties
font-size-adjust
font-stretch
OpenType Features
Web Fonts: Browser Support
TEXT EFFECTS AND TYPOGRAPHIC STYLES :
Understanding Axes and Coordinates
Applying Dimensional Effects: text-shadow

3. Multiple Shadows
Letterpress Effect
Adding Definition to Text: text-outline and text-stroke
More Text Properties
Restricting Overflow
Resizing Elements
Aligning Text
Wrapping Text
Setting Text Rendering Options
Applying Punctuation Properties
Text Effects: Browser Support
MULTIPLE COLUMNS :
Column Layout Methods
Prescriptive Columns: column-count
Dynamic Columns: column-width
A Note on Readability
Different Distribution Methods in Firefox and WebKit
Combining column-count and column-width
Column Gaps and Rules
Containing Elements within Columns
Elements Spanning Multiple Columns
Elements Breaking over Multiple Columns
Multiple Columns: Browser Support
Creating a responsive web page with Multipage columns
BACKGROUND IMAGES AND OTHER DECORATIVE PROPERTIES :
Background Images
Multiple Background Images
Background Size
Background Clip and Origin

4. background-repeat
Background Image Clipping
Image Masks
Background Images: Browser Support
BORDER AND BOX EFFECTS :
Giving Your Borders Rounded Corners
border-radius Shorthand
Differences in Implementation Across Browsers
Using Images for Borders
Multicolored Borders
Adding Drop Shadows
Border and Box Effects: Browser Support
COLOR AND OPACITY :
Setting Transparency with the opacity Property
New and Extended Color Values
The Alpha Channel
Hue, Saturation, Lightness
HSLA
The Color Variable: currentColor
Matching the Operating System’s Appearance
Color and Opacity: Browser Support
GRADIENTS :
Linear Gradients
Linear Gradients in Firefox
Linear Gradients in WebKit
Using Linear Gradients
Adding Extra color-stop Values
Radial Gradients

5. Radial Gradients in Firefox
Radial Gradients in WebKit
Using Radial Gradients
Multiple color-stop Values
The WebKit Advantage
Multiple Gradients
Repeating Gradients in Firefox
Repeating Linear Gradients
Repeating Radial Gradients
Gradients: Browser Support
2D TRANSFORMATIONS :
The transform Property
rotate
Position in Document Flow
transform-origin
translate
skew
scale
Multiple Transformations
Transforming Elements with Matrices
Reflections with WebKit
2D Transformations: Browser Support
TRANSITIONS AND ANIMATIONS
Transitions
Property
Duration
Timing Function
Delay
Shorthand
The Complete Transition Example

6. Multiple Transitions
Triggers
More Complex Animations
Key Frames
Animation Properties
The Complete Animations Example
Multiple Animations
Transitions and Animations: Browser Support
3D TRANSFORMATIONS :
3D Elements in CSS
Transform Style
The Transformation Functions
Rotation Around an Axis
Translation Along the Axis
Scaling
The Transformation Matrix
Perspective
The perspective and perspective-origin Properties
The Transformation Origin
Showing or Hiding the Backface
3D Transformations: Browser Support
Working with CSS preprocessors LESS & SASS :
Why CSS is Painful:
Overview
The Color Problem
The Duplication Problem
The Cascade Problem
The Calculation Problem

7. The Importing Problem
Summary
LESS is More :
Introducing LESS
less.js
Less on the Server
dotless
LESS Basics
Hello World LESS
Using Variables and Operations
Mixins
Creating a Mixin
Nested Rules
Refactoring Rules
Other Features
Using namespaces and scoping
Summary
Using SASS :
Introducing SASS
SASS on the Server
Using SassAndCoffee
Variables
Using Variables
Rules
Refactoring Rules
@import
Importing SASS and CSS
@extend
Inheritance in Rules

8. @mixin
Creating Mixins
@function
Creating Functions
Control Directives
Demo Using @if, @where and @for
Summary
Responsive Web Design – Basics :
Viewport meta tag and CSS media queries
Limitations of responsive web design
Responsive image with picture element
Learn more about HTML and CSS
Introduction to RWD frameworks
Why use frameworks?
Skeleton
Bootstrap
Zurb Foundation
Who is using these frameworks?
Tools required to build responsive websites
Web browsers
Code editors
Responsive bookmarklets
MEDIA QUERIES :
The Advantages of Media Queries
Syntax
Media Features
Width and Height
Device Width and Height
Using Media Queries in the Real World
Orientation

9. Aspect Ratio
Pixel Ratio
Multiple Media Features
Mozilla-Specific Media Features
Media Queries: Browser Support
FLEXIBLE BOX LAYOUT mechanism:
Triggering the Flexible Box Layout
The box Value in Firefox
Inline Boxes
Making the Boxes Flexible
Unequal Ratios
Zero Values and Firefox Layouts
Grouping Flexible Boxes
Changing Orientation
Changing the Order of Flexible Boxes
Reversing the Order
Further Control over Ordering
Alignment
Same-Axis Alignment
Multiple Rows or Columns
Cross-Browser Flex Box with JavaScript
Stop the Presses: New Syntax
Flexible Box Layout: Browser Support
Creating a responsive web page with Flex-Box layout
TEMPLATE LAYOUT mechanism – Using Prolyfill medium :
Setting Up the JavaScript
Using position and display to Create Rows
Multiple Rows
Slots and the ::slot() Pseudo-element

10. Creating Empty Slots
Setting Height and Width on Rows and Columns
Width Keyword Values
Setting Both Row Height and Column Width
Default Content: The @ Sign
Template Layout: Browser Support
Introduction to Grid Systems & Frameworks :
Introduction to Grid Systems
What is a Grid-Based Design?
Popular Grid-Based Systems
Responsive Layouts with Grid Systems in 960 GS| Unsemantec | Bootstrap |Zurb Foundation, Fluid
Grid system & Skeleton
Coding With the 960 Grid System
Exploring Unsemantic
Using Unsemantic
Twitter Bootstrap
Coding Columns in Bootstrap
The Bootstrap Fluid Grid
Foundation
Coding Columns in Foundation
Skeleton
Grid system in Skeleton
Create Your Own Responsive Grid System from Scratch ? :
Why Create Your Own System ?
Pros &Cons
HTML for a Four-Column Layout
Calculating Widths
Resetting Styles
CSS for a Four-Column Layout

11. Creating a Three-Column Layout