best practices and css

Best Practices and CSS

An Overview

What is CSS? Cascading Style Sheets

• 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 (eXtensible HyperText Markup Language• 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 Code1. Declare a DOCTYPE, Strict or Transitional2. Declare an XML namespace,

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

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

4. 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.

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

6. 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.

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

8. Attributes must have values and must be quoted, <a href="http://www.ryderwebdesign.com"> vs <a href=http://www.ryderwebdesign.com>

9. 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"></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;}h2 {color:blue; font-weight:bold;}h3 {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.

Flexible Text Using Ems (cont.)

• 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.

Flexible Text Using Ems (cont.)• 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:

Anchor Link Pseudo-Classes– 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!”

Anchor Link Pseudo-Classes– 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.

Anchor Link Pseudo-Classes

• 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.

Anchor Link Pseudo-Classes• 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:hover 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:


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> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</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> <p>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 thenavigation div, which is a set of linksorganized within a list, and the secondis the content div, which is a headingand 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 3div#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

Technology

navigation styles navigation

link styles

regular link

type of link

navigation bars

particular links

external links

horizontal navigation