Best Practices and CSS

Best Practices and CSS An Overview

What is CSS? C ascading S tyle S heets

Cascading Style Sheets is a means to separate the presentation from the structural markup (xhtml) of a web site. By applying a CSS style you have the ability to keep the structure of your document lean and fast, while controlling the appearance of content.

Content

Content is the collective term for all the text, images, videos, sounds, animations, and files (such as PDF documents) that you want to deliver to your audience.

XHTML (e X tensible H yper T ext M arkup L anguage

XHTML enables you to define what each element of your content is. Is it a heading or a paragraph? Is it a list of items, a hyperlink, or an image?

You determine this by adding XHTML markup to your content. Markup comprises tags (the tag name is in enclosed in angle brackets<>) that identify each element of your content.

XHTML defines a document’s structure .

Key Requirements for XHTML Code

Declare a DOCTYPE, Strict or Transitional

Declare an XML namespace,

<html xmlns= http://www.w3.org/1999/xhtml lang=“en” xml: lang=“en”>

Declare your content type, <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

Close every tag, <img src="cat.jpg" alt="My cat" / > <br / > <hr / >

NOTE: YOU MUST USE ALT TAGS ON EVERY IMAGE, EVEN IF THE VALUE IS “”, OR YOUR CODE WON’T VALIDATE.

All tags used must be nested correctly, <strong><em> The <em> needs to be closed before the <strong>. </em></strong>

Inline tags can’t contain block level tags,

If you nest a block element, such as a paragraph p , inside an inline element, such as link a , your code won’t validate.

Write tags in lowercase, <span> vs <SPAN>

Attributes must have values and must be quoted,

<a href= " http://www.ryderwebdesign.com " > vs <a href=http://www.ryderwebdesign.com>

Use encoded equivalents for left bracket and ampersand.

< vs < & vs &

Start With a Blank Page of Content

After you have a design, start with a blank page of content. “Include your headers, your navigation, a sample of the content and your footer. Then start adding your xhtml markup. Then start adding your CSS.

Use HTML tables semantically–for tabular data, not layout.

The Style sheet

A style sheet is a set of stylistic CSS rules that tell a browser how the different parts of a XHTML document are presented.

A style sheet is simply a text file with the file name extension .css

There are three different ways to add CSS to your web pages, inline, embedded, and linked from a separate CSS style sheet.

Inline

Inline styles (also known as local styles) are added to a tag using the XHTML style attribute, like this

<p>This paragraph simply takes on the browser’s default paragraph style</p>

<p style=“font-size: 25pt; font-weight:bold; font-style:italic; color:red;” >By adding inline CSS style to this paragraph, we can override the default styles.</p>

<p>And now we are back to a regular default paragraph without any inline styles.</p>

An inline style only affects the tag to which it is attached. Adding inline styles everywhere is bad for the portability and editability of your markup. Inline styles should be generally avoided.

Embedded (internal)

You can place a group of CSS styles in the head of your XHTML document—these are known as embedded styles.

The scope of embedded styles is limited to the page that contains the styles.

When you embed the styles in the head of the document, you are not truly separating the styles from the content; they are still in the same document.

<head>

<title>Embedded Styles Example</title>

<meta http-equiv=“Content-type” content=“text/html”; charset=iso-8859-1” />

<meta http-equiv=“Content-Language” content=“en-us” />

<style type="text/css">

<!--

h1 { font-size: 16pt; font-weight:bold; }

p { color: blue; }

-->

</style>

</head>

Linked Styles

You can place styles in a separate document (a style sheet) that links to multiple pages so that the styles have global (site-wide) scope —the styles defined in this style sheet can affect every page of your site, not just a single page or a single tag.

This is the only method of the three that truly separates the presentational styles from the structural markup.

Using this method allows web site design and editing to become easier. If you need to make changes that affect the whole site, doing so is as quick and painless as modifying one CSS style.

You can link your style sheet to as many XHTML pages as you wish with a single line of code in the head of each XHTML page.

<link href=“my_style_sheet.css” media=“screen” rel=“stylesheet” type=“text/css” />

Anatomy of a CSS Rule

A CSS rule is made up of two parts: the selector , which states which tag the rule selects, (or targets), and the declaration , which states what happens when the rule is applied.

The declaration itself is made up of two elements: a property , which states what is to be affected, and a value , which states what the property is set to.

p {color:red;} selector declaration property value

Writing CSS Rules

This basic structure of the selector and the declaration can be extended in three ways:

Multiple declarations can be contained within a rule.

p { color:red; font-size:12px; line-height:15px;}

Note that each declaration ends with a semicolon to separate it from the next.

Writing CSS Rules

Multiple selectors can be grouped. If, say, you want text for tags h1 through h3 to be blue and bold, you might type this:

h1 {color:blue; font-weight:bold;}

But you don’t have to; you can group selectors in a single rule like this:

h1, h2, h3 {color:blue; font-weight:bold;}

Just be sure to put a comma after each selector except the last.

Writing CSS Rules

Multiple rules can be applied to the same selector. If, having written the previous rule, you decide that you also want just the h3 tag to be italicized, you can write a second rule for h3, like this:

h1, h2, h3 {color:blue; font-weight:bold;}

h3 {font-style: italic;}

Reset the Styling

Before you do anything else when coding a website, you should start by overriding all the browser styles.

Because of browser differences, it’s a good idea to “zero out” the formatting for commonly used tags. All you have to do is set up some basic styles at the beginning of your style sheet that remove the offensive formatting.

Reset the Styling

Here are some things you may want to do to make browsers stop meddling with your designs:

Remove padding and margins . Browsers add top and bottom margins to most block-level elements—the familiar space that appears between <p> tags, for example. It is best to remove padding and margins from the block-level tags you use and then purposely add the amount you want by creating new styles.

Reset the Styling

Apply consistent font sizes. While text inside a <p> tag is displayed as 1em, Web browsers apply different sizes to other tags. You can force all tags to be 1em to begin with, and then create additional styles with specific font sizes for the different tags. That way, you stand a much better chance of getting consistent font sizes across browsers.

Reset the Styling

Remove underlines from links. You can create visually exciting navigation bars that use plain old text links. In fact, most of the links in your site look more like buttons, or you use other formatting to indicate an element’s clickability (maybe by adding hover effects), then start off by removing the underlines. You can later selectively add underlines when you want them.

Reset the Styling

Remove borders from linked images. Internet Explorer, Firefox, and other browsers add a colored border around any image inside of a link.

To put these ideas into action, here are a few basic styles you can add at the beginning of your style sheet:

Reset the Styling

/* Normalizes margin, padding */

body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, dt, dl, dd, form, blockquote, fieldset, input {

padding: 0;

margin: 0;

}

/* Normalizes font-size for headers */

h1, h2, h3, h4, h5, h6 {

font-size: 1em;

}

/* Removes list-style from lists */

ol, ul {

list-style: none;

}

/* Removes text-decoration from links */

a {

text-decoration: none;

}

/* Removes border from img */

a img {

border: none;

}

The first two styles here are group selectors that apply the same formatting to every one of the tags listed. Add these styles to the beginning of your style sheet, then, further down the style sheet, override them on a case-by-case basis. Thanks to the cascade, as long as a new style appears after the group selectors removing the margins and changing the font size, the new values take precedence.

Reset the Styling Examples

Here are styles before they are “zeroed out”.

Web Page Before Being Reset

Here are styles after they are “zeroed out”.

Web Page After Being Reset

Flexible Text Using Ems

Sizing text using em units—allows users to resize text. While ems are relative units, they also offer a bit more precision and control.

What does an em actually mean? Robert Bringhurst, author of The Elements of Typographic Style , writes:

The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.

Flexible Text Using Ems (cont.)

Applying that to the Web world, if the current font-size is the default medium setting (16px in most browsers), 1em would equal 16px . If the default is set smaller at 11px, 1em would equal 11px . The advantage to using ems for font size, line height, and spacing between elements is that as text size is adjusted, those measurements will adjust proportionately.

Richard Rutter explains a crafty method for normalizing a base font size using ems ( http://clagnut.com/blog/348/), where the units match (more or less) to pixel equivalents. The technique assumes a default browser text size set at medium, which is most often 16px.

Richard’s method begins by knocking down the base font-size of the page to 62.5% on the <body> element:

body { font-size: 62.5%; }

This magic percentage essentially takes the default medium text down from 16px to 10px. The reasoning, Richard explains, is that having a base of 10px means you’ll have a nice round number to deal with and you can think in pixels while actually setting type in ems.

Flexible Text Using Ems (cont)

For example, after you apply 62.5% to the <body>, 1em would appear as 10px, 1.2em as 12px, .9em as 9px, 1.8em as 18px, and so on. If we were specifying different values for various elements on the page, we might do something like this:

Flexible Text Using Ems (cont)

body { font-size: 62.5%; } /* gives us a base of 10px */

h1 { font-size: 2em; } /* 20px */

h2 { font-size: 1.8em; } /* 18px */

p { font-size: 1.2em; } /* 12px */

#sidebar { font-size: 1em; } */ 10px */

Flexible Text Using Ems-Examples

Flexible Text without styles removed.

Flexible Text with Styling Reset

Flexible Text with New Font Styles applied.

Flexible Text with the rest of the CSS markup applied.

Anchor Link Pseudo-Classes

Style for Links

Four psuedo-classes let you format links in four different states based on how a visitor has interacted with that link. They identify when a link’s in one of the following four states:

a:link selects any link that your guest hasn’t visited yet, while the mouse isn’t hovering over or clicking it. This style is your regular, unused Web link.

a:visited is a link that your visitor has clicked before, according to the web browser’s history. You can style this type of link differently than a regular link to tell your visitor, “Hey, you’ve been there already!”

a:hover lets you change the look of a link as your visitor passes the mouse over it. The rollover effects you can create aren’t just for fun—they can provide useful visual feedback for buttons on a navigation bar.

a:active lets you determine how a link looks as your visitor clicks. In other words, it covers the brief nanosecond when someone’s pressing the mouse button before releasing it.

In most cases, you’ll include at least :link , :visited , and :hover styles in your style sheets for maximum design control. But in order for that to work, you must specify the links in a particular order: link, visited, hover, and active.

Use this easy mnemonic to remember it: LoVe/HAte . So here’s the proper way to add all four link styles:

a:link { color: #f60; }

a:visited { color: #900; }

a:hover { color: #f33; }

a:active { color: #b2f511; }

If you change the order, the hover and active states won’t work. For example, if you put a:hove r before a:link and a:visited , then the color change won’t take effect when hovering.

Here’s what it looks like

Targeting Particular Links

The styles in the previous section are basic a tag styles. They target certain link states, but they style all links on a page. What if you want to style some links one way and some links another way? A simple solution is to apply a class to particular link tags.

Say you have a bunch of links within the body of an article, some of which point to other stories on your web site and others that point outside to other sites. You may want to identify external links in some way so visitors can tell they’re about to leave your site. In this case, you can apply a class to these external links, like this:

<a href=“http://www.csszengarden.com/” class=“external”>Visit this great resource.</a>

To style this link in it’s own way, you’d create styles like this:

a.external:link { color: #990000; }

a.external:visited { color: #000066; }

a.external:hover { color: #3F5876; }

a.external:active { color:#990000; }

Here is what the page will look like: Targeting Particular Links

Building Navigation Bars

Every site needs good navigation features to guide visitors to the information they’re after—and help them find their way back. CSS makes it easy to create a great looking navigation bar, rollover effects and all.

At heart, a navigation bar is nothing more than a bunch of links. More specifically, it’s actually a list of the different sections of a site. Lists provide us with a way of grouping related elements and, by doing so, we give them meaning and structure.

A navigation menu is based on a simple list inside a div, like this:

<ul id=“listMenu">

<li><a href="#">Customers</a></li>

<li><a href="#">Members</a></li>

<li><a href="#">Dealers<a/></li>

<li><a href="#">Distributors</a></li>

</ul>

Sample Vertical Navigation Bar

Here is the list without the CSS applied

Here is the list with the CSS applied

Samples of Horizontal Navigation

Here is an example of the horizontal navigation bar based on the same list as the vertical navigation.

Horizontal navigation bar without CSS applied.

Horizontal navigation bar with CSS applied.

Samples of My Navigation

Here is a sample of a navigation I did for one of my clients and here’s the markup:

<div class="menu">

<ul>

<li><a href="krueter.html" id="peepshow"><img src="images/peepshow.gif" width="92" height="22" border="0" alt=“Peepshow" /></a></li>

<li><a href="krueter.html" id="ann">Ann von Kreuter</a></li>

<li><a href="breyer.html" id="barbara">Barbara Breyer</a></li>

<li><a href="chocolateBox.html" id="chocolate">Chocolate Box</a></li>

<li><a href="eastBalt.html" id="east">East Balt</a></li>

<li><a href="kapnick.html" id="elise">Elise Kapnick</a></li>

<li><a href="haven.html" id="haven">Haven Youth Services</a></li>

<li><a href="heartland.html" id="heartland">Heartland Alliance</a></li>

<li><a href="kindermusik.html" id="kindermusik">Kindermusik</a></li>

<li><a href="landgraf.html" id="landgraf">Landgraf Group</a></li>

<li><a href="mphc.html" id="mphc">MPHC</a></li>

<li><a href="pupule.html" id="pupule">Pupule</a></li>

<li><a href="reading.html" id="reading">Reading Is Fundamental</a></li>

<li><a href="tpm.html" id="tpm">The Present Moment</a></li>

<li><a href="zoobooks.html"id="zoobooks">Zoobooks</a></li>

</ul>

</div>

Samples of My Navigation Styles

Navigation with no CSS styles applied.

Navigation with CSS styles applied.

Divs

One element that can help add structure to a document is a <div> element. Div actually stands for division and is used to mark a logical group of elements on a page.

Divs’ divide the page into rectangular, box-like areas. These areas are invisible unless you turn their borders on or color their backgrounds.

You should include <div> tags for all the major regions of your page, such as a banner, main content area, sidebar, footer, etc.

Divs

Once you’ve got your <div> tags in place, add either a class or ID to each one, which becomes your handle for styling each <div> separately.

For parts of the page that appear only once and form the basic building blocks of the page, web designers usually use an ID. You can use an ID only once per page, so when you have an element that appears multiple times, use a class instead.

ID selectors are identified using a hash character; (#) class selectors are identified with a period(.).

Type of Web Page Layouts

Nearly every page design you see falls into one of three types of layouts— fixed width , liquid, or elastic .

A fixed width gives you the most control over how your design looks, but can inconvenience some of your visitors. People with really small monitors have to scroll to the right to see everything, and those with large monitors have wasted space that could be showing more of your excellent content.

Liquid designs make controlling the design of the page more challenging, but make the most effective use of the brower window.

An elastic design combines some advantage of both.

Fixed Width

Many web designers prefer the consistency of a set width. Regardless of the browser window’s width, the page content’s wide remains the same. In some cases, the design clings to the left edge of the browser window, or more commonly, it’s centered in the middle. With the fixed-width approach, you don’t have to worry about what happens to your design on a very wide (or small) monitor.

Many fixed width designs are about 760 pixels wide—a good size for 800 x 600 screens since you have to leave a little room for scrollbars.

However, more and more sites are about 950 pixels wide, on the assumption that visitors have at least 1024 x 768 monitors.

Liquid

A liquid design adjusts to fit the browser’s width—whatever it may be. Your page gets wider or narrower as your visitor resizes the window. While this type of design makes the best use of the available browser window real estate, it’s more work to make sure your design looks good at different window sizes.

On very large monitors, these types of designs can look really wide.

Elastic

An elastic design is really just a fixed-width design with a twist—type size flexibility. With this kind of design, you define the page’s width using em values. An em changes when the browser’s font size changes, so the design’s width is ultimately based on the browser’s base font size.

Elastic designs keep everything on your page in the same relative proportions, and makes sure that when someone with poor vision has to pump up the text size, the columns holding the text grow as well.

A Simple Two-Column Fixed Layout

In this first example, I introduce a very common layout; it contains a narrow left column for navigation and a right column that houses the rest of the page’s content. In this example, the navigation column is a fixed width, but the content area is fluid—that is, it changes width depending on the width of the browser window.

Two Column Layout-Content

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<head>

<meta http-equiv="Content-Type" content=" charset=iso-8859-1 " />

<title>A Simple Two Column Layout Without CSS Applied</title>

</head>

<body>

<div id="nav">

<ul>

<li><a href="#">Link 1</a></li>

</ul>

</div>

<div id="content">

<h1>A Simple Two column Layout</h1>

<p><strong>Step X - bold text here... </strong>More text here...</p>

<p>More text here</p>

</div>

</body>

</html>

Two Column Fixed-Content Only The markup has two divs; the first is the navigation div, which is a set of links organized within a list, and the second is the content div, which is a heading and some paragraphs. Here’s what it looks like:

Two-Column Layout-CSS

CSS Applied-

body {

margin: 0px;

padding: 0px;

}

div#nav {

position:absolute;

width:150px;

left:0px;

top:0px;

border-right:2px solid red;

}

The first step in creating your two-column layout is to break the navigation out of the flow of the document by positioning it absolutely. Note that you also need to set the margins and padding of the body to zero to remove any default settings. In addition, you should set the width of your navigation to 150px to create the width of the column and temporarily turn on the right border so that you can see exactly where the div is now positioned. Here’s what it looks like: Two-Column Layout-Step 2 The navigation is now absolutely positioned, and by setting the left and top to zero, you ensure that its top left corner is aligned with the top left corner of its containing element, body . The content area now takes the navigation div’s place as the first element in the regular flow of the document, so it moves to the top left corner of the parent body element. The page looks a bit of a mess at this point. However, the tops of both elements are now aligned, and all you have to do next is push the content div over to the right. We do this by setting its left margin. Here’s what it looks like after setting the content div’s left margin: Two-Column Layout-Step 3 div#content { margin-left: 150px; }

Two-Column Layout-Step Three CSS

CSS Applied-

body {

margin: 0px;

padding: 0px;

font: 1em Verdana, Arial, Helvetica, sans-serif; [ SET THE BASELINE FONT AND FONT-SIZE ]

}

div#nav {

position:absolute; [ RED BORDER REMOVED ]

left:0px; top:0px; width:150px;

padding:.5em 0 0 0; [ PUSH THE LIST DOWN FROM THE TOP OF THE NAV DIV ]

margin: 22px 0 0 15px; [ MOVE THE NAV DIV DOWN AND IN FROM EDGE ]

border-top:2px solid #069 ; [ ADD A RULE ACROSS THE TOP AND BOTTOM OF THE NAV ]

border-bottom:1px solid #069 ;

}

div#nav ul { margin-top:0px; margin-bottom:.8em; } [ POSITIOIN LIST VERTICALLY WITHIN CONTAINING DIV ]

div#nav li {

margin-bottom:.5em; [ ADD SPACE BELOW EACH LIST ITEM ]

font-weight:bold; [ STYLE LINKS ]

font-size:.75em;

}

div#content {

margin:20px 0 0 165px; (width (150) + left-margin(15) in div#nav ) [ MOVE CONTENT DIV DOWN AND TO LEFT TO CLEAR NAV ]

padding: 0 1em; [ PUSH THE CONTENT IN ON THE LEFT AND RIGHT ]

}

div#content h1 { font-size:1em; } [ STYLE THE TEXT ELEMENTS ]

div#content p { font-size:.8em; }

div#content li { font-size:.75em; }

Now that you have your two-column layout, you need to think about making it look more presentable. Two Column Fixed with CSS Applied-Step 4

Sample of Liquid Layout

No CSS Applied page

Web Page with CSS applied

Best Practices and CSS

9 comments

Notes on slide 1

23 Favorites