CSS Essentials Course

Sydney, Melbourne and Onsite

Training Modules (Overview)

  • Consistent accessible fonts & sizes
  • CSS based navigation
  • Styling forms
  • Positioning and layout
  • Dealing with older browsers
  • Responsive design & tips for mobile devices

What You Get

  • The CSS3 Anthology eBook
  • Class exercises relevant to industry
  • Choice of Mac or PC
  • Phone AND email support
  • Free Course Resit
  • Small Classes (average 4 to 6)
  • The CSS3 Anthology


Need to get approval or a formal quote

Course Outline

Introduction to CSS

  • Separating form and content
  • Defining CSS
  • CSS syntax
  • CSS and older browsers
  • CSS frameworks
  • CSS Selectors
  • Where to place the CSS code
  • Inline, embedded and external styles
  • Inheritance and the cascade
  • Choosing the best CSS editor for your needs

Text Styling

  • Text and fonts
  • Font families and fallback fonts
  • Text sizes for accessibility
  • Using Ems, pixels or percentages
  • Setting colours correctly
  • Removing underlines from links
  • Link hover states
  • Different link styles within one page
  • Heading styles
  • Background colours on headings
  • Heading and paragraph spacing
  • Indents, padding and margins
  • Highlighting words within a paragraph
  • Controlling line height
  • Controlling text alignment
  • Styling lists
  • Bullet point and numbered lists
  • Page margins


  • Images and borders
  • Image file formats & compression
  • Image sizes and resolution
  • Border colours, widths and line types
  • Removing borders from image links
  • Background images
  • Background repeating
  • Positioning backgrounds
  • Background size and scaling
  • Fixed and scrolling backgrounds
  • Backgrounds on multiple elements
  • Transparent areas in backgrounds
  • Efficient tiling backgrounds


  • Using a list as a navigation menu
  • Removing bullet points from a list
  • Making list items sit horizontally
  • Links within list items
  • CSS rollover navigation
  • CSS button appearance for menu items
  • Complex rollover navigation
  • Advanced CSS Selectors
  • Targeting nested list items
  • Targeting specific levels of nesting
  • Assigning RGB or HSL colour
  • Semi-transparent colours


  • Styling form elements with CSS
  • Changing the look and feel of user interface elements
  • Highlighting a field when clicked into
  • The difference between block and inline elements
  • Changing an inline element to block or inline-block
  • Reliable control of widths, padding and margins
  • Layout for form elements
  • Styles for new HTML5 form elements
  • Browser support for new form elements and styling

Efficiency and Best Practice

  • Tips & Tricks
  • Efficient workflows
  • Best practice and web standards
  • W3C recommendations
  • Comments
  • Naming practices
  • Re-using your stylesheets

Cross Browser Techniques

  • Testing in a range of browsers
  • Testing for mobile devices
  • Testing for different screen sizes
  • Issues with older browsers
  • Which features work in which browsers
  • Progressive enhancement
  • Browser specific stylesheets
  • Javascript polyfills for older browsers
  • Internet Explorer conditional comments
  • Alternative stylesheets
  • Importance of the doctype
  • Common issues with older Internet Explorer versions
  • Validating CSS code

CSS Positioning

  • Determining repeating patterns in the layout
  • When to use a Class or an ID
  • Efficiency and editability with Classes and IDs
  • Efficient workflows through efficient style set up
  • Block level and inline elements
  • The CSS box model
  • Padding and margins
  • Widths and heights
  • Using pixels, ems or percentages for widths
  • How to calculate actual widths
  • Common problems with miscalculated widths
  • Aligning content left and right
  • Allowing text to wrap around an image
  • Floats
  • The importance of clearing floats
  • Common problems with floats and alignment
  • Centring content on a page
  • Auto margins
  • Adaptable design
  • Relative positions
  • Absolute positioning
  • Z-index and stacking order
  • Overlapping divs
  • The limitations of absolute positioning
  • Best practice with CSS layout

CSS Layout

  • Column layouts and page divisions
  • A two column layout with a footer
  • A three column layout with a footer
  • Fixed width layouts
  • Flexible width layouts
  • Headers and footers
  • Print stylesheets
  • Responsive layout design
  • Designs that adapt to any screen size
  • Maximum and minimum widths
  • Automatic scaling for images
  • Adaptable page regions
  • Flexible layout and design
  • Media Queries for mobile devices

Prefer Private Training?

- Customise your course
- Choose your own dates
- Choose your location

Read More

CSS Essentials Testimonials

Trainer was fantastic! The day was well paced. I feel really well grounded for Dreamweaver tomorrow.

Jill, Designer

Very good teacher, easy to understand and follow, nice training venue. I am glad to have done the HTML first before learning Dreamweaver.

Diana, Business Consultant

Great introductory course, I would recommend this to anyone.

Cliff, Admin Executive

Well organised and presented by expert trainer.

Brian, Freelance Designer

Fantastic. Highly recommend for anyone who wants to gain a good understanding of HTML Essentials.

Renae, Marketing Executive

Enjoyable, at good pace, I am leaving feeling equipped to practice by myself.

Shannon, Graphic Designer

Very enjoyable, well-structured course led by knowledgeable and helpful instructor. Great for beginners or those revising their knowledge.

Karen, Admin Assistant

Jonathon is great. He really knows the content - past, present and future. Great day of training.

Nicole, eLearning