Basic CSS

Basic CSS

Audience

This course is aimed at Web designers, Web developers, Web usability and accessibility consultants.

Prerequisites

  • A good understanding of HTML or XHTML.
  • Graphic ambition — actual talent is not required!
  • Willingness to unlearn outdated HTML formatting.
  • Willingness to hand code HTML and CSS.

Duration

1 day. Hands on.

This course is available on site only. Please call for details.

Course Objectives

This CSS course covers the fundamentals of CSS web design with expert tuition and hands-on exercises. The course teaches delegates how to deliver identical, visually appealing, content to different browsers, applications, platforms, and devices, using Cascading Stylesheets (CSS).

On completion of this basic CSS course delegates will be able to understand and apply core CSS which are implemented in all modern web browsers.

Delegates are encouraged to follow CSS best practice and keep to web standards, so that they continue to improve their skills after the course, rather than merely accumulating experience.

Course Content

Getting Started with CSS
Introduction to this CSS course.
Course Organisation.
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.
Hands-on Exercises.

CSS Boxes and CSS Selectors
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.
Using the Generic Block Level Element:.
Hands-on Exercises.

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.
Hands-on Exercises.

More CSS Selectors and Selection
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.
Hands-on Exercises.

CSS Positioning
Choosing the Right CSS Technique for Positioning Blocks.
The Position Property, Floats, Margins (inc. Negative and Auto).
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.
Page Layout Using Floated Blocks.
Hands-on Exercises.

More on CSS Page Layout
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.
Hands-on Exercises.

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.
Hands-on Exercises.

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-transpaency with Alpha-Blended PNG.
PNG Translucency Example and Sample Code.
Pseudo-Transparency with JPG Positioned Backgrounds.
JPG Pseudo Transparency Example.
Hands-on Exercises.

Using CSS in the Real World
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 vs. Web Myths and Gossip.
Free Lifetime Support.

Virtual Courses

ALL of our courses can be delivered virtually. And our Bath public schedule of courses are now available as live virtual sessions, using the popular Zoom Virtual Classroom and remote labs. Delegates can test their access at: www.zoom.us/test

On-Site Courses

Can't attend one of our public classes? Booking for multiple people?

All our courses are available on your site! Delivered for your staff, at your premises.

Contact us to find out more...