Live Chat
Monday - Friday 8am - 6pm EST Chat Now
Contact Us
Monday - Friday 8am - 8pm EST 1-800-268-7737 Other Contact Options
Checkout

Cart () Loading...

    • Quantity:
    • Delivery:
    • Dates:
    • Location:

    $

CSS3, Sass and Less

Understand the implementation of CSS3 specifications and how to extend CSS with Sass and Less.

GK# 7292

Course Overview

TOP

Cascading Style Sheets, commonly referred to as CSS, are a set of formatting conventions allowing you to standardize and enhance the appearance of a web site. CSS specifications are generated by the World Wide Web Consortium (W3C) and the latest version is CSS3. Some specifications are adopted to vary extents within different browsers so cross-browser support is an important consideration with CSS3. CSS is becoming increasingly flexible and powerful but limitations in functionality can be overcome by the use of pre-processors such as Sass and Less. This path will demonstrate the implementation of CSS3 specifications and will cover how to extend CSS with Sass and Less.

Schedule

TOP
  • Delivery Format:
  • Date:
  • Location:
  • Access Period:

$

What You'll Learn

TOP
  • Creating Styles with CSS3 and Styling Text
  • Styling Page Elements using CSS3
  • Navigation Elements and Animations with CSS3
  • Forms, Positioning, and Layout with CSS3
  • Advanced Options, Responsive Web Design, and Management with CSS3
  • Extending CSS3 with Sass and Less

Outline

TOP
Viewing outline for:

On-Demand Outline

Creating Styles with CSS3 and Styling Text

  • Introduce CSS3 and demonstrate how styles can be applied to content
  • Describe user agent stylesheets and override them with a CSS Reset
  • Demonstrate how to use a rule set to apply a CSS style
  • Describe how CSS styles are inherited and cascaded
  • Describe how to implement inline CSS styles and discuss their drawbacks
  • Implement internal CSS styles
  • Reference external CSS style sheets
  • Describe basic CSS selectors including the universal, type and id, and class selectors
  • Group CSS selectors using child and sibling combinators
  • Use CSS attribute selectors to apply styles based one or more of an element's attributes
  • Describe CSS pseudo-classes, reasons for their use, benefits and drawbacks, and use pseudo-classes to apply styles
  • Describe CSS pseudo-elements, reasons for their use, benefits and drawbacks, and use pseudo-elements to apply styles
  • Modify the specificity of a CSS selector
  • Use the CSS3 font face rule to apply a web font face
  • Use CSS properties to style text
  • Use CSS properties such as direction, text-align, text-indent, text-spacing, and word-spacing to position text
  • Use CSS text decoration (including level 3 shorthand)
  • Use CSS pseudo selectors to style the first letter or line of a paragraph
  • Use CSS to style lists
  • Use CSS to create custom bulleted lists
  • Practice styling text with CSS3

Styling Page Elements using CSS3

  • Use CSS to add a border to an element
  • Use CSS to add rounded borders to an element
  • Use CSS to add blurred edges to an element
  • Use CSS to add elliptical corners to an element
  • Use CSS to add a drop shadow to an element
  • Contrast display and visibility in CSS and use these features
  • Use CSS to manipulate color
  • Contrast and use CSS opacity or RGBA settings to make an element transparent
  • Use CSS to set a background image or color for a page or other element
  • Use CSS to apply linear gradients to an element
  • Use CSS to apply radial gradients to an element
  • Use CSS3 to create gradient text
  • Configuring spans with CSS
  • Style divs with CSS
  • Use basic CSS to draw shapes such as triangles
  • Use CSS to change the mouse cursor
  • Use CSS to style tables
  • Use CSS to apply cell and table borders and to remove white spaces between cells when borders are applied
  • Use CSS to specify alternate table row colors
  • Use CSS to change a row color when hovered over
  • Use CSS properties to format spreadsheet data in tabular format
  • Use CSS to display calendars
  • Use CSS to style different elements on a html page

Navigation Elements and Animations with CSS3

  • Use CSS to style links
  • Use CSS to style a list to generate a vertical and horizontal nav bar and display descriptive information
  • Use CSS to style nested lists for multilevel navigation
  • Configure tabbed navigation using CSS
  • Use lists and CSS to create flyout menus
  • Use CSS to configure drop-down menus
  • Use CSS to style a site map
  • Use CSS to apply basic rollover effects to navigation options
  • Use CSS to apply rollover images with an image sprite in navigation elements
  • Use 2-D transforms of CSS to manipulate elements
  • Use 3-D transforms of CSS to manipulate elements
  • Use CSS to apply transitions to elements
  • Use simple CSS keyframe animations
  • Use CSS to apply basic animations to elements
  • Apply advanced CSS animation techniques
  • Practice creating an animated menu using CSS3

Forms, Positioning, and Layout with CSS3

  • Use CSS to style a form
  • Use CSS to style Submit buttons
  • Insert images in form fields using CSS
  • Use CSS to highlight fields when they gain focus
  • Use CSS to style form fields according to the validity of their input
  • Use CSS to group related fields in a form
  • Use CSS to style a range slider on a form
  • Use CSS to style a short form as a paragraph with inline fields
  • Use CSS to modify form input
  • Contrast how block and inline elements display
  • Use CSS to implement static and fixed positioning of elements
  • Contrast fixed and relative positioning and use CSS to implement relative positioning of elements
  • Specify the stacking order with z-index
  • Contrast the CSS margin and padding properties
  • Use CSS to wrap text around an element
  • Use CSS to overlap text on an image
  • Use CSS to implement floating elements in your layout
  • Use the CSS clear property to improve presentation of other elements after floated elements
  • Overlap divs using CSS3
  • Use CSS margin auto value to center a layout horizontally and auto value, absolute value and declared height for vertical centering
  • Use CSS techniques to create a thumbnails gallery
  • Use CSS to create a column layout
  • Use CSS box model to create a layout
  • Use the CSS box-sizing property
  • Practice working with layouts using CSS3

Advanced Options, Responsive Web Design, and Management with CSS3

  • Use the CSS3 FlexBox for layout
  • Outline the support for CSS3 grid and use it for layout
  • Outline the support for CSS3 regions and use them for layout
  • Outline the support for CSS3 exclusions and use them for layout
  • Outline support for and implement the CSS3 Shapes specification
  • Outline support for and implement the CSS3 Filters specification
  • Outline support for and implement CSS3 masking
  • Outline support for and implement CSS3 clipping and blending
  • Use CSS media queries to tailor content for specific devices
  • Use CSS to display content correctly on multiple screen sizes
  • Use Modernizr to detect CSS3 feature support
  • Use CSS to configure responsive images
  • Use CSS to resize elements dynamically
  • Use CSS3 to generate content
  • Access an element's CSS styles with JavaScript
  • Change an element's CSS styles with JavaScript
  • Access CSS style sheets with JavaScript
  • Add a CSS style sheet with JavaScript
  • Remove a CSS style with JavaScript
  • Enable or disable a CSS style sheet with JavaScript
  • Manipulate CSS with jQuery
  • Implement advanced experimental CSS3 features and a responsive web design

Extending CSS3 with Sass and Less

  • Outline the features of Sass and how to install and use it, outline Sass syntax and create a Sass stylesheet
  • Outline the features of SassScript - variables, data types, operations, and use the interactive shell to work with SassScript
  • Work with nested CSS rules and reference parent selectors using Sass
  • Work with nested CSS properties in Sass
  • Use the @import rule in Sass, use partials and nested @imports
  • Use nested @media queries
  • Use the @extend directive in Sass
  • Use the @extend directive for multiple and chained extends
  • Use control directives in Sass
  • Use the @at-root directive in Sass
  • Use the @warn and @debug directives in Sass
  • Use @mixin in Sass
  • Work with functions in Sass
  • Use Sass to extend CSS3
  • Describe Less, and how it can be used; install and use Less
  • Work with variables in Less
  • Work with the Extend pseudo-class in Less
  • Work with mixins in Less
  • Pass rulesets to mixins in Less
  • Use recursive mixins to create loop structures in Less
  • Work with mixin guards and CSS guards in Less
  • Work with import directives in Less
  • Use & to reference parent selectors and to generate selectors in a list
  • Use Less to extend CSS3

Who Should Attend

TOP

Web developers who want to learn CSS3 syntax, create styles and style sheets, and how to use CSS3 to style text.

Course Delivery

This course is available in the following formats:

On-Demand

Train at your own pace with 24/7 access to courses that help you acquire must-have technology skills.



Request this course in a different delivery format.
Enroll