CSS

Duration : 1 Day

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. 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

CSS (Cascading Style Sheets) consist of a set of formatting rules that we use to control the layout and appearance of the content on a web page. CSS is that you can write all the CSS rules in one document and keep that document discrete from the HTML content and link the two together. CSS3 offers some new and exciting features to enhance the appearance of the website. CSS3 makes it easier for the designers that will make the guests go crazy over them to be applied.

This Advanced CSS3 Specialist e-Learning program will enable you to learn basic JavaScript coding and use HTML5 APIs (application programming interfaces) to extend the functionality of Web pages with modern features such as geo location, drag-and-drop, canvas and offline Web applications. In addition students will create Web pages using the HTML5 structure tags, embed video and audio and develop cross-browser user-input forms. They will learn techniques for code validation and testing, inline form field validation and mobile design for browsers and apps, including Responsive Web Design (RWD). They will use CSS3 to position and format content and to create effects such as transformations, transitions and animation.

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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • @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
  • 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
  • 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
  • Creating a Three-Column Layout

Reviews

No reviews

Post Review

Name
Email
Review Title
Rating
Review Content
View All Categories

Quick Enquiry

captcha

Technology Portfolio

Loading...