Training at your office
or our computer labs
 
 

CSS Essentials Course

Cascading Style Sheets (CSS) is the key to controlling the look of your site. Learn about the different types of CSS selectors, when to use each and how to efficiently create stylesheets to optimise both workflow and design, for practical real world web solutions.

This course will benefit anyone who needs to create professional, consistent, responsive web sites. There is a strong emphasis on creating standards compliant, accessible pages which render reliably in popular browsers and that can adapt to the various screen sizes of tablets and phones.

Prerequisites: Knowledge of HTML is required to attend this course – and completing the 1 day HTML & Web Principles course will meet this requirement.

  • Training Modules (Overview only)

    • 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
 
$900 + GST  $850 + GST
2 Days | 9am–4:30pm

Course Dates

  • Location
  • Date
    Platform

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

  • 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

Navigation

  • 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

Forms

  • 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
Top