Css3 Course

Css3

Course Overview

Cascading Style Sheets is abbreviated as CSS3. Styles in CSS define how to display Html elements on the screen. Styles were added to HTML 4.0 to solve problem. External Style Sheets saves a lot of work. External Style Sheets are stored in CSS files. CSS explains that how HTML elements should be displayed. Styles are normally saved with extension of .css (files). External style sheets let you to change the look and layout of all the pages in a Web site, just by making changes in one single file.

CSS can be also used to define text styles, sizes of tables and other aspects of Web pages that before could only be done in an html pages. CSS helps Web developers create same look on many pages of Web site. For example, a Web developer wants to increase the default text size from 10pt to 12pt for thirty pages of Web site. If the pages all belongs to the same style sheet, only the text size needs to be changed on the style sheet and all the pages will show the text larger.

HTML5 and CSS3 are modern standards. They have been designed in such a way that user can get clean code. This confirms that the sites which utilize them are very fast to load.

CSS3 is the latest evolution of the Cascading Style Sheets language. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.

Everybody can take up the course, this module can be learnt completely after the HTML course.

No skills required. Basic computer knowledge needed to execute the files.

This is an entry level course for fresh graduates who can get placed as web developer, designer in the major IT companies all over India.

The main concepts covered in the course: Introduction to css3, Border, Background, Gradients, Use of Different Size Keywords, Text effects, 2D Transforms, 3D Transforms, Animations, transitions, User Interface

Css3 Course Syllabus

Introduction to css3

  • CSS 2.0 vs CSS 3.0
  • what’s new in css3.0

Border

  • box-shadow
  • border-image
  • border-radius

Background

  • background-clip
  • background-origin
  • background-size
  • Multiple Background Images

Gradients

  • Linear Gradients
  • Top to Bottom
  • Left to Right
  • Diagonal
  • Angles
  • Multiple Color Stops
  • Transparency
  • repeating-linear-gradient
  • Radial Gradients
  • Evenly Spaced Color Stops
  • Differently Spaced Color Stops
  • Set Shape

Use of Different Size Keywords

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
  • repeating-radial-gradient

Text effects

  • text-shadow
  • word-wrap

@FONT Face

  • Browser Support
  • Font Formats
  • Browser Support for Font Formats
  • Using The Font
  • Working with third party plugins

Google fonts

2D Transforms

  • Browser Support for 2D Transforms
  • transform
  • transform-origin
  • translate(x,y)
  • translateX(n)
  • translateY(n)
  • scale(x,y)
  • scaleX(n)
  • scaleY(n)
  • rotate(angle)
  • skew(x-angle,y-angle)
  • skewX(angle)
  • skewY(angle)

3D Transforms

  • rotateX()
  • rotateY()
  • rotateZ()/li>
  • RGBA
  • Box Resize
  • Box Sizing
  • Outline

Transitions

  • transition
  • transition-delay
  • transition-duration
  • transition-property

Animations

  • @keyframes
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-iteration-count
  • animation-name

Selectors

Multiple Columns

  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width

User Interface

  • box-sizing
  • resize
  • outline-offset