CSS Training Online-Online CSS Course css course online learning html and css online
0 likes27 views
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.
More Related Content
Similar to CSS Training Online-Online CSS Course css course online learning html and css online (20)
Recently uploaded (20)
CSS Training Online-Online CSS Course css course online learning html and css online
- 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