CSS Introduction

What Is CSS, Really?

CSS is simply a style language that allows you to describe how to define presentational aspects of a document. It is not a difficult language per se. In fact, it is easy to learn, but it is complex, that’s why it’s hard to master.

The term style language refers broadly to any language that influences the presentational properties of documents. Think of style as any design characteristic: typeface, background, text, link colors, margin controls, and placement of objects on a page.

CSS advantages

Performance Usually, the use of CSS will decrease the amount of overhead. Where previously you might have used complex tables and images to achieve layout, CSS will streamline your presentation as well as the number of requests sent to the server during an active session. Streamlining results in not only improved browser rendering of documents, but also better network performance.

Compatibility The W3C created CSS to be both backward and forward compatible. Any browsers with CSS2 support should contain support for CSS1, and any browser with CSS1 support should read what it can of CSS2 style sheets and ignore what the browser doesn’t recognize.

Structured CSS should be based on the structure of the documents to which they are attached. This is why it was so critical to study and understand the structure of documents. Changing a style sheet should have no actual impact on the markup and content structure, but of course it will impact the presentation of that document.

Vendor, device, and platform independence Both CSS as a language and the documents to which CSS extends are ideally independent of any vendor, device, or platform. This independence was an original reason that the Web and HTML were developed in the first place. Part of the challenge at this point is to regain this independence, because it frees us of the heavy multibrowser, multiplatform testing responsibilities we’ve endured these past years.

Improvement of document maintenance Web designers and developers can manage the presentation of their documents much more efficiently with CSS. One style sheet can style countless documents, so managing style within a site means editing that style sheet and not the numerous, individual documents with which it is integrated.

Binding to other technologies CSS can be used along with other technologies, such as JavaScript, and its meaning can be altered by such scripts. This provides even deeper control for authors and designers, and it offers a means of using CSS as part of dynamic content development.

Accessibility By successfully separating structure from presentation with style sheets, you automatically end up with a more accessible document because the remaining document is logical and free of complicated tables. Beyond that, CSS features help make web documents more accessible by controlling fonts, reducing confusing and problematic table layouts and single-pixel GIF images, and providing access to multiple media outputs such as aural and Braille

Applications of CSS

What’s especially interesting is that CSS is not reserved for use only in the web browser; it’s also used for a variety of media types. What’s more, you can define multiple style sheets so your page can be differently rendered depending upon the media in question.

Style sheets can in fact describe the presentation of a document for the following types of delivery:

Aural Aural CSS is built primarily for speech synthesizers used by those with blindness. Aural style sheets allow you to define various aspects of how the document will be read, such as the volume and voice characteristics to use.

Braille and embossed Braille These media types allow you to use CSS to define the presentation of a document for output to Braille devices and printers.

Handheld This media type is used when styling a document’s presentation in small devices such as PDAs, pagers, and cell phones.

Print Want your pages to look good in print as well as screen? Well, you can define print styles using the print media type to do just that.

Projection Styling documents for this media type allows authors to use their documents for projected presentations.

Screen The screen media type is for styling documents to appear onscreen.

TTY This media type is for use with devices having limited display features, such as teletype machines.

TV This media type is for television and related devices.

Understanding mark up

What Are Web Standards?

-The term web standard is a confusing one not just because it’s inaccurate, but because it also suggests conformity. I use the term to refer to what is actually a series of specifications and recommendations created by the World Wide Web Consortium (W3C). The W3C is not an authoritative standards body per se. They’re not going to drop by your office and give you a ticket for noncompliance. The primary functions of the W3C are to research, develop, and publish information on technologies and activities related to the Web.

But Why Web Standards?

So why should you follow standards? A lot of people say, “Hey, I can use nonstandard markup that works just fine.”

There are several reasons why understanding and following standards makes sense. Here are a few:

• You will save time. If your documents follow standards, you achieve a level of efficient work practices. Troubleshooting becomes easier because of document consistency. Team members will work more efficiently in an environment where documents follow structure and logic.

• Saving time means saving money. If you are able to save time by ensuring that your documents are standards compliant, stable, and use CSS for style, you will be able to both profit from the process and pass the resulting savings on to your clients.

• You’ll reduce complicated pages so browsers will interpret and display a page quickly and accessibility concerns will be addressed. This means a happier end user.

  • You’ll have better job opportunities. If you are still creating web pages in a visual editor without understanding the underlying markup and have not spent any time studying standards, you are restricting yourself in terms of advancement within the profession.

• You will become part of the solution, not the problem, as the infrastructure of the web becomes increasingly more complex.

• Standards set the stage for extending content beyond the limits of the Web to wireless devices such as smart phones, pagers, and PDAs; alternative devices such as MSNTV (formerly WebTV); and a range of devices yet to come.

To sum up, early case studies suggest that compliance probably saves money for everyone in the website food chain—from site owner to developer to ISP. Those are the immediate advantages. Longer term, working with standards addresses many technical, creative, and even social concerns. Technically, websites will be more easily maintained and also readily available for many platforms beyond the Web. Creatively, you can apply style sheets that will easily make a site look good on a computer screen, on a PDA screen, even in print. Socially, you remove barriers to access by cleaning up your hacked markup and paying attention to accessibility concerns.

Separation of Document Structure and Style

One of HTML 4’s prime directives is to separate document formatting from the presentation of that document. This is a critical issue, because most of the HTML in use today is misused—it’s filled with errors that provide endless problems and make accessibility, document rendering speed, and cross-browser consistency nightmarish to achieve.

What Is Document Structure?

For the purposes of this book, document structure for the purposes of this book is the skeletal structure of a Web document. This skeletal structure includes:

• • A DOCTYPE declaration

  • An html element

  • A head with title

  • A document body

• Structural elements only, used in a logical manner for managing content. In this category you’ll find such things as headings (h1, h2, h3, h4, h5, h6), paragraphs and breaks (p, br), and lists (ul, ol, dl).

Note :DOCTYPE declaration defines the document type and DTD version. DOCTYPE declarations appear at the top of a structured document. There are 3 flavors of Doctype; Strict, Transitional, and Frameset.

A structured document results in a tree. Listing 1.1 shows a valid HTML 4 document with the required structural components and some content marked up with basic elements.

An HTML 4 Document with Basic Structure

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

<head>

<title>Working with Structure</title>

</head>

<body>

<h1>Welcome</h1>

<p>Welcome to the site where structure matters!</p>

<h2>Getting Into Structure</h2>

<p>In order to begin working with structure, you need to be aware of:</p>

<ul>

<li>DOCTYPE declarations</li>

<li>Properly structured head and body components</li>

<li>Logical structures for content markup</li>

</ul>

</body>

</html>

Accessibility

Many people with impaired or no vision have tremendous difficulty accessing today’s World Wide Web. This is largely because electronic screen readers that browse the screen and read the content aloud are significantly more challenged by complex graphical pages. However, with a little forethought, authors can make this process much easier. Individuals with other physical limitations are also assisted by devices—and whether it’s a screen reader or special keyboard, the methodologies that HTML 4 proposed to aid access have begun to play a growing role in accessibility and improved rendering of documents.

Accessibility is becoming a hot topic due to recent legislation worldwide that certain kinds of sites must be made accessible to all people, including those with disabilities. In the United States, accessibility has become especially important for federal agency websites as well as those sites created by anyone receiving federal contracts to fund their sites. This is due to legislation regarding accessibility in the U.S.; specifically, it relates to a portion of legislation known as Section 508.

Resources:

www.w3.org/WAI/

www.pwag.org/

XHTML 1.1 Document with Content

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Structured XHTML 1.1 Document</title>

</head>

<body>

<h1>weblog</h1>

<p><em>left turn</em></p>

<h2>August 17, 2002</h2>

<p>Sitting at the light at Fort Lowell. I’m facing East waiting to take a left turn onto Campbell. Boys in a car next to me, shirtless in the summer heat. The driver is tall, built. I can smell their beer sweat from here, hear hardcore music pound.</p>

<p>Not meaning to, I find myself staring at the young boy in the passenger seat. He looks like someone I once knew.</p>

<p>He sees me looking. Suddenly, he comes up out of his seat in a leap of ferocity. Or maybe, insanity. He throws himself across his friend, he’s reaching out the window for me, screaming.</p>

<p>The light turns green so his friend takes off and I turn left.</p>

<hr />

</body>

</html>

Validating the Document

The W3C validator can validate a document online or by upload. To validate your document online, you’ll first need to place it on a web server. To validate your document by upload, be sure you know the name and location of the document.

Then, follow these steps:

Point your web browser to http://validator.w3.org/

If you are validating an online document, enter the address of your document in the Validate by URI address field. If you are uploading your file, click the Upload Files link and add the file from your hard drive. Leave all the other options as they are.

Select the Validate This Page or Validate This Document button. The validator will now compare your document to the DTD you described in the document.

First validate your HTML document, then repeat this step with your XHTML document. You may find that the validator returns errors as well as warnings. An error is a problem with the markup that must be fixed for the document to be valid. A warning provides you with information that might assist you in improving your document. Warnings will not affect your document’s validity.

If any errors are reported, examine what they are, troubleshoot your document, make any necessary changes, and revalidate until your document passes the validation test.

Integrating Style

In theory, there is no difference between theory and practice; In practice, there is.

—Chuck Reid

Inline Style Sheets

The inline integration method allows you to take any tag and add a style to it. Using inline style gives you maximum control over a precise element of a web document, even just one character. Say you want to control the look and feel of a specific paragraph. You could simply add a style="x" attribute to the paragraph tag, and the browser would display that paragraph using the style values you added to the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Inline Style Sample</title>

</head>

<body>

<h1 style="font-family: Arial">Welcome!</h1>

</body>

</html>

Embedded Style Sheets

Embedding allows for control of a full document. Using the style element, which you place within the head section of a document, you can insert detailed style attributes to be applied to the entire page.

Embedding is an extremely useful way of styling individual pages that may also have other style methods influencing them. You can also style a single page or use multiple embedded sheets. The latter is especially useful if you’d like your document to have different styles for different media types.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Embedded Style Sample</title>

<style type="text/css" media="screen">

h1 {

font: Arial;

}

</style>

</head>

<body>

<h1>Welcome!</h1>

</body>

</html>

Linked Style

Also referred to as an “external” style sheet, a linked style sheet contains as many style rules as you like and helps to provide a most powerful means for you to create master styles that you can apply to one page or one billion pages.

An external style sheet is exactly that—all of the style is placed in an external file. You can link to the style sheet from any document you wish, using the link element in the head portion of those documents with which you’d like to integrate the style.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Linked Style Sample</title>

<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

</head>

<body>

<h1>Welcome!</h1>

</body>

</html>

Imported Styles

Imported styles work similarly to the linked style except that it uses the @import rule, a specialty rule that allows you to import a style sheet rather than link to it directly. Imported styles have inconsistent support so using linked style is typically recommended.

However, it’s become a convention among designers and developers using CSS to exploit the lack of support for @import rules in certain browsers. This way, if a style isn’t supported by a browser that doesn’t support the @import rule, using @import means you can completely mask your imported styles from those browsers. This has become especially useful when using CSS for layout and attempting backward compatibility with certain problematic browsers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Linked Style Sample</title>

<style type="text/css" media="screen">@import "style.css";</style>

</head>

<body>

<h1>Welcome!</h1>

</body>

</html>

User-Defined Style Sheets

While it’s something you are rarely likely to use, a user-defined style sheet is any style sheet that the user can use to override other CSS and HTML or XHTML styles included in a document.

Most site visitors don’t know how to do this, of course, so it’s not something that’s talked about a great deal. However, a user-defined style sheet can be helpful to anyone who requires special rendering of documents. If you have a certain type of color blindness or require your fonts to be quite large to read a document, the creation and implementation of such a sheet could be invaluable. For example, if you were colorblind you could create a sheet that would force all pages viewed to render with specific background and text colors that you can see. Similarly, you could use a user-defined sheet to ensure that all fonts appeared at a size that was readable to you.

Specificity

Yet another component of CSS that works to resolve conflicts within rules is specificity. Specificity explains the importance (also referred to as weight) of a given rule within a style sheet.

Specificity is broken down by selector types. Different kinds of selectors are given different kinds of weight within CSS. An id, for example, carries more weight than a simple selector such as p. That means that any rule relating to the id will have higher specificity than the rule pertaining to the p, and if there are any conflicts between the style rules for id and p, the rule related to id, having greater weight, will be the style that is applied.

Box Model

Box generation relies in part on the type of element the box will be generated for. There are two primary types of elements of note:

Block-Level Elements A block-level element is one that is visually formatted as a box. Block-level elements can contain both inline elements and other block-level elements. Typically, these elements start on a new line. Examples include: h1-h6, p, form, table, ol, ul.

Inline Elements An inline element is one that appears within the content, and may contain text or other inline elements. Usually there is no break after an inline element. Examples include: a, em, strong, img, input.

A block-level element generates a principal box. This is a primary box that has the capacity to contain other boxes, or other block-level elements. I like to think of this as being like the old Chinese lacquered boxes that come nested inside one another. The largest box is the principal box, and the smaller boxes contained within it relate to other block-level children of the main parent element’s box.

With inline elements, boxes are laid out on the horizontal with what is referred to as a line box.

Every box is broken down into the following areas:

Content area (text, objects) A content area has a content edge that surrounds the elements actual contents.

Padding Padding edges surround a box’s padding.

Borders The border edge denotes a box’s border.

Margins The margin edge surrounds the box margin and is further defined by its specific edges: left, right, top, bottom.

If a margin has a width of 0, it becomes the same as the border edge. If the border edge has a width of 0, it becomes the same as the padding edge. If a padding edge has a width of 0, it becomes the same as the content edge.

Common ways to position CSS elements include:

Static A static box has normal flow based on its block or inline features.

Float A floating box shifts to the left or right.

Absolute position An absolute box is positioned specifically using demarcations along the x-y axis.

Relative position A relative box is positioned relative to where that box is expected to be within the flow of the document.

CSS Structuring

Document Tree

With map in hand, you can confidently begin to prepare your style sheet by listing out the obvious elements that are to be styled, as follows:

Validating Your CSS

Validating your CSS eliminates errors and makes your work standards compliant. You can do this easily whatever tool you are using to write css. The web developer toolbar for firefox includes a css validator.

Or point your browser to http://jigsaw.w3.org/css-validator/