CSS Classes

Is Your HTML Accessible?

The W3C accessibility guidelines explain how to make Web content accessible to people with disabilities... However, following them will also make Web content more available to your audience, whatever user agent they are have (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.)" - W3C. In this class you will learn:

• what HTML techniques hinder accessibility
• how to improve your content's structure
• what part CSS plays in improving accessibility

Creating Styles for Specific Items (Selectors)

CSS lets the developer assign or modify properties for elements on the page. These rules may be designated for every element of a certain type, specific identified or classified elements or for certain elements depending upon their location and relationship to other elements. We discuss the various selectors, or ways of indicating which element to select, while reviewing the use of internal style sheets. In this part of the class you will learn:

• how to create an internal style sheet
• how to create an external style sheet
• how to create a rule for all elements of a particular type
• how to specify a rule based upon the context of an element
• how to classify an element and assign it properties
• how to identify a single element (tag) for selection
• about pseudo-elements and pseudo-classes

Precedence and Inheritance

One powerful aspect of CSS is its cascading nature. When you specify a property for an item on the page, often the property is reflected in all embedded items as well. We explain when an element will or will not 'inherit' a CSS rule and what happens when two rules conflict. In the process, we will use inline, internal and external stylesheets. This class will teach you:

• what type of properties are not inheritable
• when elements will or will not inherit properties
• how a web user can override the developer's stylesheet
• how to increase the importance of a rule
• what happens when two rules conflict
• how to override rules in a global stylesheet
• known browser inheritance bugs

Common CSS Techniques

The CSS Level 2 standard introduced a plethora of properties. In this section, we explore the full list of properties identifying what currently works and speculating on support for the rest. In this class you will:

• remove the underlining of links
• positioning images in the background using CSS
• explore the use of color on backgrounds, foregrounds and borders
• use images as bullets in lists
• modify the font and text properties of blocks of text
• experiment with different units of measurement -- pixels, points, percentages, and "ems"
• understand the difference between absolute and relative positioning
• review properties of other media types including print and aural

Box Properties

Most HTML elements -- commonly known as "tags" -- have built-in properties, about which the browser is aware - for example, whether the text inside should be bold or whether a line break follows the element. CSS allows us to change these built-in properties. We will assign several element properties to illustrate the capabilities of CSS. In this class you will:

• use a specific element to create a 'layer' on the page
• modify the element's margins and padding
• set a background color and border for the layer
• learn how to set or strip an item's line break
• establish a width and height for the element
• advise the browser what to do with content that exceeds the height specified
• wrap other text around your layer

Positioning and Layout

For years, web developers have had to rely exclusively on HTML tables to establish page layouts and to position objects within a web page. CSS offers several layout properties which, when combined with the box properties covered in the previous exercise, can help a developer to reduce the number of tables on a web page. In this class you will:

• position elements absolutely & relatively on the page
• define the stacking order of overlapping elements
• review Netscape 4's now defunct LAYER element
• work with DIVs and SPANs to create layers
• discuss cross-browser techniques and bugs

Prerequisites:

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

Related web design classes in San Francisco:

• CSS Intro
• Dreamweaver Fundamentals
• Search Engine Optimiz.
• PPC Advertising
• JavaScript for Programmers