• Technical IT

    Solutions delivered throughout the UK
  • Business Applications

    Solutions delivered throughout the UK
  • Professional Best Practice

    Solutions delivered throughout the UK
  • Professional Development

    Solutions delivered throughout the UK

CSS 101: Yellow Belt Off Peak

CSS 101: Yellow Belt Off Peak
  • Price £497.00
  • Level 1
  • Duration 22 day(s)
All major credit cards accepted


CSS Fundamentals with CSS3 properties

The CSS3 Level 1 class will provides the participants with a series of 4 × 3-hour taught lessons
covering the basics of CSS3 from the ground up. In particular, the attendees will be taught the best
practices in order to control rendering of fonts, colours, margins, typefaces and other aspects of
their HTML5 pages. The CSS Level 1 course provides participants with the ability to design using
the most advanced aspects of CSS3. After this course, advanced effects will be easy to achieve,
whether you already have a solid grounding in web design or not.


Web professionals who are seeking to provide a more accessible design structure using Cascading Style Sheets.

Assumed Knowledge

You should have a good working knowledge of HTML before joining this class (ie. HTML Level 1 or


Upon successful completion of this course you’ll be able to distinguish between style and semantics on your HTML5 pages, use CSS3 to control the style of your HTML5 pages, 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, 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, adding transitions and 3D in CSS3

Course Content

<—Day 1—>

CSS Introduction
• The relationship between CSS3 and HTML5
• Advantages of CSS
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
• The CSS Box Model
CSS and Logical HTML Structure
• Styling Boxes: Borders, Margins and Padding
• Cross browser compatibility issues <—briefly as things can get over complicated for this level—>
• 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 HTML5 Classes
• Styling Multiple Elements Similarly (Selector Grouping)
• Block Boxes and Inline Boxes
• Block Box Behaviour
• Inline Box Behaviour

<—Day 2—>!

Text Formatting in CSS
• 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
• Using HTML Element IDs in CSS
• Using CSS Descendant Selectors
• Descendant Selector Examples
• 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
• 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

<—Day 3—>

Apply CSS in Tables
• Table Layout and CSS Positioning
• Table Layout and CSS Positioning as Alternatives
• Table Formatting in CSS
• Styling Table Cell Borders
• Page Layout with Table Display PropertiesCascade, Precedence, Specificity and Inheritance in CSS
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

<—Day 4 —>

Style Conflicts and inheritance in CSS3
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
Useful CSS Tips
• Usage of CSS Sprites
• Pseudo Selectors
CSS minify
• Cheat Sheet for CSS3

Make Enquiry

Course Enquiry

Book Now

Course Enquiry

Find your local training centre