CSS Advanced Course

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
• Add a simple drop shadow to photograph
• Tackle more sophisticated drop shadow techniques with relative positioning
• Weigh the benefits of using image replacement techniques for logos

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

Advanced CSS courses offered at four locations::

• CSS course San Francisco
  
• CSS course Los Angeles
  
• CSS course San Jose
• CSS course Sacramento