CSS Advanced Course

You are pretty handy with HTML and you have been using Cascading Style Sheets to influence text and color treatment of web
pages, but you still rely upon HTML tables, transparent images, and cut-n-paste JavaScript for layout, navigation and interaction.

You have been
hearing about how CSS can solve many of these problems with minimal code. Now you would like to learn the advanced features of CSS to make your website
more media independent, to improve the interface usability, or to simply minimize your use of unnecessary markup.

This hands-on CSS Advanced training course will
reveal the techniques used by professional designers to master CSS and web design.

CSS Core Concepts

Even longtime users of CSS often fail to understand some of the fundamental concepts of web design with CSS. A different role is played by each of
the client-side languages: HTML, CSS and JavaScript. Playing to the strengths of CSS opens up a realm of possibilities for device independence, search
engine optimization, and stylesheet switching. But good CSS demands excellent HTML. Furthermore, effective CSS designs will require more than simple
selection of paragraphs for font styling. You will need to understand the ins and outs of "selection" and "precedence" as well as the visual model. We
set a solid foundation in this first CSS training lesson, after which, you will be able to:

Argue the benefits of using CSS for design

Semantically structure your HTML for CSS layout

Differentiate between types of item selection

Calculate specificity based upon the type of selection

Validate your CSS

Explain the properties that make up the box model

Navigate cross browser box model issues

Basic Page Layout using CSS

For years, web developers depended upon HTML tables to establish page layouts and to position objects on a web page. CSS offers several layout
properties which, when combined with the box properties covered in the previous exercise, can eliminate all but the data tables within a website. After
this section, you will have gained the skills to:

Compare and contrast positioning and floating

Explain the differences between absolute, relative and fixed positioning

Demonstrate the additional properties needed to make floating work

Render a one-column, centered layout

Create a two-column layout with floated columns

Establish a three-column layout with floated columns

Discuss the benefits of liquid, elastic or fixed layouts

Images for Design Effects in CSS

Snazzy websites employ images in myriad ways. From stylized logo text to gradient backgrounds, from rounded corners to drop shadows, images supply a
variety of design effects that take a website from ho-hum to polished and snappy. Unfortunately, images come with a cost. Use of images for design
effects rather than content can add lines of unnecessary code to the HTML, detract from accessibility and search engine results, and force a rigid
design incapable of rendering on different devices. CSS lightens the burden of design images by taking the image(s) out of the HTML and putting them
into the stylesheet, then by including the image as a background rather than foreground object. The hands-on activities in this CSS training lesson will
show you how to use images for dramatic effects so that you can:

Craft rounded corner columns and boxes

Utilize the "sliding door technique" to make resizable rounded corner boxes or tabs

Advanced Link Styling in CSS

Shrewd web developers immediately grasp the difficulty of working with hyperlinks in CSS. Their multi-state nature adds dimensions of complication
to a tag that is already overloaded in its use. We rely upon the <a> tag for links with images or text, to link to websites, email addresses,
parts of the same page, as well as site navigation, and to represent whether a link has been followed or not. A savvy CSS developer can capitalize on
sophisticated selection to distinguish between different types of links and fashion buttons out of text links, eliminating redundant code. After this
topic, you will confidently be able to:

Avoid browser incompatibility by arranging link states in the proper order

Demarcate the different link sections on the page, e.g. separating navigation links from content links

Signal to users when something is an external or email link

Manipulate a text link to look like a button

Master the rollover button link with a pixy-style background

Transforming Lists into Navigation Bars

Elegant, terse, and usable site navigation is the hallmark of a expertly designed and developed website. Balancing the fine line between aesthetics
and usability necessitates more than a few tricks of the trade. Traditionally, both vertical and horizontal navigation bars have been created using an
overabundance of images, JavaScript rollovers, and HTML tables. This adds layers of code and a multitude of additional files to download. With CSS,
however, a developer can transform a perfectly simple unordered or bulleted list into a nifty, interactive navigation bar, which speeds up download
times and enhances accessibility. After completing this CSS training lesson, you will be able to:

Remove the bullet from a list

Make a list vertical or horizontal

Use a background image to display the list items with custom bullets or backgrounds

Disguise a list item, so that it looks like an navigation image or button

Alter the linked list item when the mouse hovers over it to create a rollover effect

Take advantage of the visited state to indicate followed links to a user

Spiffing up Tables and Forms with CSS

For years, HTML tables and forms have caused many a web developer hours of nail-biting and hair-pulling. These multi-component structures are often
laboriously constructed because of the design constraints of the supporting tags. Developers of the past were forced to engineer highly inaccessible,
multi-nested tables just to devise an acceptable user interface. With some crafty implementation, CSS can assuage many of these burdens, empowering you
to create simplified and structurally sound HTML tables and forms that are practical and pleasing to the user. After working through these examples and
exercises, you will be able to:

Devise legible, usable, multi-device, table structures

Concoct common table styles including border and alternate row designs

Control the layout of form fields without employing a table

Establish a common-sense presentation for a user form

Stylize custom submission and reset buttons

CSS: Print Stylesheets

Have you ever used a "printer-friendly" version of a web page? These alternate versions of a page may be free of ad banners, background colors,
images and columns that make the page too wide or crowded to print properly. Using CSS, you don't need to create separate pages for browsing and printing
- you can just reference two different style sheets from the same HTML. Finish your CSS training by learning how to:

Indicate the difference between screen and print stylesheets

Designate a print stylesheet for your web page

Select print-friendly colors and backgrounds

Implement print-appropriate units of measurement including inches and points

Direct which page elements should be hidden in the print version

Supervise where page breaks should occur

Prerequisites:

Intermediate HTML/CSS or equivalent previous experience with HTML and some basic familiarity with CSS