Who is this course for

Web professionals who are seeking to provide a more advanced & modern design visualisation using Cascading Style Sheets.

Assumed Knowledge

You should have a working knowledge of HTML & CSS and have at least covered most of the topics in our CSS 101 class

What you will learn

Upon successful completion of this course you’ll be able to; work with the media query, add custom web fonts, apply text shadows, work with the REM unit, add CSS3 Gradients, round corners, apply a transparency, multicolumn layout, build CSS3 menus, working with CSS3 & jQuery, rotating objects, adding transitions and 3D in CSS3.

Outline

More on CSS Page Layout

  • Alternative Methods of CSS Positioning
  • Centering Blocks
  • Styling Lists
  • Redefining the Behaviour of Inline and Block Elements
  • Hiding and Revealing Blocks
  • Table Formatting in CSS
  • Styling Table Cell Borders
  • Page Layout with Table Display Properties

Cascade, Precedence, Specificity and Inheritance in CSS

  • Taking Control: Ensuring that CSS Rules Interact in the Way You Want
  • Combining Styles: Different Types, Origins, Importance, Specificity and Order
  • Examples: Combining Rules
  • Cascading and Cascade Order
  • Resolving Style Conflicts By Origin
  • Resolving Style Conflicts By Importance
  • Resolving Conflict By Selector Specificity
  • Resolving Conflict By Order
  • Non-CSS Presentational Hints
  • Property Inheritance

CSS Layers and Translucency

  • Different Forms of Layered Presentation in CSS
  • Layering with the z-index Property
  • Different Methods for Creating Translucency Effects
  • The CSS3 opacity Property
  • opacity Example
  • Fixed Attachment Backgrounds in Layers
  • background-attachment Example
  • Transparency and Semi-transparency with Alpha-Blended PNG
  • PNG Translucency Example and Sample Code
  • Pseudo-Transparency with JPG Positioned Backgrounds
  • JPG Pseudo Transparency Example

CSS3 on mobile devices

  • CSS3 media queries
  • Different Sizes
  • Orientation Change

Fonts & Text

  • Using Custom Fonts
  • @font property
  • Importing fonts
  • Web Font formats
  • Buying web fonts
  • TypeKit, fontsquirrel
  • Using google font api
  • Text shadows
  • Font sizing with REM
  • Enhanced Text Gradients

Enhancing your boxes

  • Box rounding
  • Adding a Shadow to objects
  • Opacity & Transparency
  • Colouring with RGB and Alpha
  • Adding a CSS3 Gradient
  • Rotating objects
  • Applying animations & transitions

Backward compatibility tools

  • CSS3Pie,
  • CSS3Please & Generators
  • Transformie, Modernizr
  • Selectivizr

Useful CSS Tips

  • Usage of CSS Sprites
  • Pseudo Selectors
  • CSS minify
  • Cheat Sheet for CSS3

 

Course details

Evening class duration Weekend class duration Weekday class duration Course level
6 Intermediate - Green Belt - 201

How to book

Simply select your start date from below and pay online to book your course.

If you are joining us during a weekday class then the lessons begin at 09:30 and finish at 16:30. This class will run for weeks.
If you are joining us during an evening class then the lessons begin at 18:00 and finish at 21:00 each week. This class will run for 6 weeks.
If you are joining us during a weekend class then the class starts at 10:00 and will finish at 17:00 each week. This class will run for weeks.