Cascading Style Sheets (CSS) Jumpstart

5 Day Course
Hands On
Code CSSJS

Book Now - 1 Delivery Method Available:

Classroom Virtual Classroom Private Group - Virtual Self-Paced Online

Overview

This class provides the web professional with the ability to control the rendering, e.g. fonts, colours, leading, margins, typefaces, and other aspects of style of a Web document without compromising its structure using Cascading Style Sheets. Using common desktop publishing terminology, Cascading Style Sheets makes it easy for professional as well as untrained designers to make use of its features.

Objectives

Upon successful completion of this course you’ll be able to; convert an existing page, styling for print, styling a press release, making an input form look good, styling an events calendar, creating an online greeting card, bringing hyperlinks to life, multicolumn layout, how to skin a menu, sneaking out of the box, positioning a better design and fixing your backgrounds.

You’ll also 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.

Also – This class provides the web professional with the ability to design using next-gen’s technology of CSS3 for modern, mobile and future browsers. The course will include design for mobile devices for rendering the visualisation of web pages using CSS3 and adding custom fonts. You’ll also be able to control the rendering, for opacity, multi-column, drop-shadows and many more. Using the same CSS syntax, adding enhanced advanced effects makes it easy for professionals as well as untrained designers to make use of these new features.

Training Partners

We work with the following best of breed training partners using our bulk buying power to bring you a wider range of dates, locations and prices.

Modules

Collapse all

CSS Introduction (8 topics)

  • HTML Structure and Content, CSS Presentation
  • Advantages of CSS
  • Creating and Using Style-Sheets
  • CSS Rules: The Basic Syntax
  • Case, Whitespace and Comments in CSS
  • The CSS Standards
  • The Scope Of CSS
  • Browser support for CSS

CSS Boxes and CSS Selectors (20 topics)

  • The CSS Box Model
  • CSS and Logical HTML Structure
  • Styling Boxes: Borders, Margins and Padding
  • The IE Box Model and Quirks Mode
  • IE Box Model Workarounds
  • Using IE6 Standards Mode
  • Specifying CSS Distances
  • Problems with Absolute Units: pixels and point sizes
  • Using Proportional Units: em, ex and percentages
  • Formatting Box Edges Differently
  • Shorthand Syntax for Sets of Edges
  • Using Margins and Padding Effectively
  • Collapsing Vertical Margins on Paragraphs
  • Using Negative Margins on Boxes
  • Background Images on CSS Boxes
  • Grouping Elements with HTML Classes
  • Styling Multiple Elements Similarly (Selector Grouping)
  • Block Boxes and Inline Boxes
  • Block Box Behaviour
  • Inline Box Behaviour

Text Formatting in CSS (7 topics)

  • Text Formatting
  • Typefaces, Alternatives and Defaults
  • Text Size " a Serious Usability Issue
  • Font Characteristics
  • Setting and Using Space Within Text
  • Formatting Blocks of Text
  • Using Arbitrary Inline Tags

More CSS Selectors and Selection (14 topics)

  • Using HTML Element IDs in CSS
  • Using CSS Descendant Selectors
  • Descendant Selector Examples
  • Child, Sibling and Pseudo-Class Selectors
  • Why You Need To Know Them
  • Browser Support and CSS Hacks
  • Distinguishing and Setting Link States
  • Link, Visited, Hover, Active, Focus
  • Modularising CSS Style-Sheets
  • Simpler Management, Less Effort, More Control
  • Embedded CSS Styles in HTML Documents
  • How and When to Use Them (Rarely).
  • Distinguishing Print, Screen and other Output Formats
  • Special Issues in CSS for Print

CSS Positioning (11 topics)

  • Choosing the Right CSS
  • Technique for Positioning Blocks
  • The Position Property, Floats, Margins (inc. Negative and Auto), etc
  • Static Positioning and Normal Flow
  • Absolute Positioning Outside Normal Flow
  • Relative Positioning " Not What You May Expect!
  • Fixed Positioning Outside Normal Flow
  • Relative Absolute Positioning
  • Absolutely Positioned Blocks in Relatively Positioned Containers
  • Floating Boxes with the CSS float property
  • Page Layout Using Absolutely Positioned Blocks

More on CSS Page Layout (8 topics)

  • Alternative Methods of CSS Positioning
  • Centring 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 (10 topics)

  • 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 (11 topics)

  • 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

Using CSS in the Real World (18 topics)

  • Deploying CSS
  • CSS Formatting Versus HTML Formatting
  • Achieving a Balance
  • Standard Tags and Semantic Markup
  • Usability
  • Readable Pages
  • Screen Size and Fluid Design
  • Text Size, Including Internet Explorer Quirks
  • Table Layout and CSS Positioning
  • Table Layout and CSS Positioning as Alternatives
  • Combining Table Layout with CSS Positioning
  • CSS Browser Support
  • Testing Websites
  • Using Test Suites and Multiple Browsers
  • Cross-platform Testing in Single-platform Environments
  • CSS Help and Advice
  • Authorative Sources versus Web Myths and Gossip
  • Free Lifetime Support

CSS3 on mobile devices (3 topics)

  • CSS3 media queries
  • Different Sizes
  • Orientation Change

Fonts & Text (10 topics)

  • 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 (7 topics)

  • 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 (4 topics)

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

Useful CSS Tips (4 topics)

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

Enhanced CSS3 Effects (10 topics)

  • Speech bubbles using CSS3
  • CSS3 Ribbons
  • Using the CSS3 pseudo
  • Pseudo background images
  • Multi-column layouts CSS3
  • CSS3 Patterns
  • CSS3 Gradient Effect
  • Applying CSS3 to forms
  • Resize Background Image
  • Cool CSS3 Hover Effects

Menus (6 topics)

  • HoverBox Image Gallery
  • Advanced CSS Menu
  • Sliding Photograph Gallery
  • CSS3 Navigation & Menus
  • CSS3 toggle-button without JavaScript
  • Create iOS back & forward buttons with CSS3

3D in CSS3 (2 topics)

  • CSS3 3D Carousel
  • CSS3 3D Gradient Box

CSS3 with jQuery (2 topics)

  • Building a Clock
  • AJAX tabs with jQuery and CSS3

Prerequisites

You should have a working knowledge of HTML.

Course PDF

Print

Share this Course

Share

Recommend this Course

Sections