One of the biggest headaches in managing the code side of Web design is the variations that exist in how markup is formatted. I don’t mean how it will look on display, but how the code itself is formatted behind the scenes.  Read more

Lists for navigation make sense, because navigation boils down to being a list of links, no matter how it appears visually on the page.  Read more

Several terms and concepts are referred to throughout this chapter, so it’s good to let you know them up front  Read more

SSI (Server Side Includes) are directives that are placed in HTML pages, and evaluated on the server while the pages are being served. They let you add dynamically generated content to an existing HTML page, without having to serve the entire page via a CGI program, or other dynamic technology.  Read more

I've mentioned that HTML and XHTML documents have an inherent structure, and that's a point worth repeating. In fact, that's part of the problem with web pages of old: too many of us forgot that documents are supposed to have an internal structure, which is altogether different than a visual structure. In our rush to create the coolest-looking pages on the Web, we bent, warped, and generally ignored the idea that pages should contain information with some structural meaning.  Read more

Not everyone who accesses the Web can see the effects we've discussed in this book. Some 1.1 million people in the United States are blind, and they have a very different experience of the Web than sighted persons. Fortunately, CSS is not silent on the matter of non-visual access. CSS2 included the ability to apply styles in nonlo-screen media. While most of the Web's evolution has taken place on monitorsthat is to say, in a visual mediumCSS2 can be used in non-visual media, assuming that the user agent has proper support.   Read more

Pseudo-Classes and Pseudo-Elements.These kind of selectors allow that styles are applied to pieces of a document, based on something else than the structure of the document. The styles are based on circumstances that can not be predicted in advance. Pseudo-classes and pseudo-elements can be used in CSS selectors, but do not exist in the HTML source.  Read more

Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. Selectors are only case-sensitive if the document language is also case-sensitive (eg: HTML: not case-sensitive, XML: case-sensitive), ID selectors have a higher cascade specificity than an equivalent attribute selector (eg: the selector '#foo' has a higher specificity than '*[id="foo"]'   Read more

There may be times when you want your document to mimic the user's computing environment as closely as possible. An obvious example is if you're creating web-based applications, where the goal is to make the web component seem like a part of the user's operating system. While CSS2 doesn't make it possible to reuse every last aspect of the operating system's appearance in your documents, you can choose from a wide variety of colors and a short list of fonts.  Read more

Length Units Many CSS properties, such as margins, depend on length measurements to properly display various page elements. It's no surprise, then, that there are a number of ways to measure length in CSS. All length units can be expressed as either positive or negative numbers followed by a label (although some properties will accept only positive numbers). You can also use real numbersthat is, numbers with decimal fractions, such as 10.5 or 4.561. All length units are followed by a two-letter abbreviation that represents the actual unit of length being specified, such as in (inches) or pt (points). The only exception to this rule is a length of 0 (zero), which need not be followed by a unit.   Read more

As important as specificity may be to understanding how declarations are applied to a document, another key concept is inheritance. Inheritance is the mechanism by which styles are applied not only to a specified element, but also to its descendants. If a color is applied to an H1 element, for example, then that color is applied to all text in the h1, even the text enclosed within child elements of that h1.  Read more

This pseudo-class matches an element only if it’s the first child element of its parent element. For instance, li:first-child matches the first list item in an ol or ul element. It doesn’t match the first child of a list item. Requires Windows Internet Explorer 7 or later but altho there is a way to make it internet explorer 6. .  Read more

An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)  Read more

Attribute selectors have two parts. The first part is a selector that identifies an element - it might be a type selector, or a more specific kind of selector such as a descendant selector. The second part specifies a condition for the attributes of the element.  Read more

There are four types of positioning: static, relative, absolute, fixed. The element's box is generated as normal. Block-level elements generate a rectangular box that is part of the document's flow, and inline-level boxes cause the creation of one or more line boxes that are flowed within their parent element.  Read more

Writing Cross-Browser Indentation in Lists. Different browsers use different methods to pad or indent a list. Mozilla and Netscape 6+ browsers indent a list on the padding, while Internet Explorer and Opera pad a list through the margin of a list.  Read more

Simple Hover for ie6 for every elements. Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows using only CSS. IE however, with a market share of > 90%, does not natively support :hover on elements other than links , rendering the entire :hover concept useless. Or does it?  Read more

The Box Model description and basics for block level elements  Read more