Smart Solution

Video Clips

You may download these files and do with them as you wish, however we will not be held responsible if these files damage your computer (very unlikely). Free Download

Start with a simple unordered list

We want to take a simple unordered list and convert it into a horizontal navigation bar
We will start with a simple unordered list. The UL is styled with an ID selector (id="navlist"). For this tutorial, an obvious name has been used to help illustrate the point, but any name can be used. However, it is better to name classes based on their meaning, rather than their appearance

CSS CODE
None

HTML CODE

<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none". To target the specific UL, we use "ul#navlist", otherwise all UL’s on the page would be affected

CSS CODE
ul#navlist { list-style-type: none; }

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.
To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Display inline

To force the list into one line, apply "display: inline;" to the "LI". To target the specific list we use "ul#navlist li". This means we want to target the LI element within the UL, styled with a ID called "navlist".

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li {
display: inline;
}

HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>

Float the "a" state

When list items are converted to inline, they have a set amount of padding on their left edges that cannot be removed. To make the list items sit beside each other without any gap, they must be set to "float: left". At this stage we cannot see that the gap has closed.
A width is also required when floating an element - unless it is an image.

CSS CODE

ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
}

Add a background color

At this point a background color and text color can be applied. There are many color combinations that can be used.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
}

Add padding to the "a" state

To make each list item into a box, we need to add padding to the "a" state. In this case we are using a shorthand rule. The padding is set to 0.2em for the top and bottom and 1em for the left and right.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
}

Removing text decoration

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
}

Add a border to separate the list items

A border is set to the right of the list items to separate them.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

Add a rollover color

Use the "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.

CSS CODE
ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover {
background-color: #369;
color: #fff;
}

Float the UL

To make the entire list into a navigation bar, we need to color the UL and stretch it to the full width of the browser window. Before we can do that, we need apply "float: left" to the UL - otherwise it will not show. So, apply float to the UL and set the width to "100%".
A width is also required when floating an element - unless it is an image.

CSS CODE

ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover {
background-color: #369;
color: #fff;
}

Add a background color to the UL

At this point a background color and text color can be applied to the UL. There are many color combinations that can be used.

CSS CODE

ul#navlist {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #036;
}

ul#navlist li { display: inline; }

ul#navlist li a {
float: left;
width: 5em;
color: #fff;
background-color: #036;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover {
background-color: #369;
color: #fff;
}

By : Ian

The Cascade

There are a number of complex rules regarding the Cascade, which, for the purpose of this book, can be boiled down to two simplified statements

• The closest rule wins.
• The most specific rule wins.

Begin with the Browser

Each browser has a set of style rules.
These rules commonly set up basic display properties such as black text and font sizes for various elements.
The browser style rules are at the beginning of the Cascade.

A Basic XHTML Page

<!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>Chapter 2: a paragraph</title>
</head>
<body>
   <p>This is a paragraph. This paragraph appears on a Web page and is rendered by a browser.</p>
</body>
</html>

User Styles

All browsers allow users the option of setting up style rules of their own.
Many people who don’t have any barriers to accessing the Web, such as poor eyesight, are not aware that these options exist
If a user chooses to do so, they can set their own rules to be more important than any style rules created by the web page designer.

External Styles

The browser and user stylesheets are out of your control. The first opportunity you as a designer have to enter the Cascade is with an external stylesheet.
An external stylesheet is a text document created in Notepad or some similar text editor and saved with the file extension .css
You integrate that external style rule with your XHTML page by adding a link element to it.
The link element is inserted into the document head

External Styles

<title>Chapter 2: a paragraph</title>
 <link href="ch2external.css" rel="stylesheet"  type="text/css" />
 </head>
 The link element links the XHTML page to a document whose relation (rel) to it is that of “stylesheet”. The stylesheet type is text/css. The href attribute is the URL of the stylesheet.
 A Simple Stylesheet: ch2external.css
 p {
 font: 0.9em Arial;
 color: #000;
 }

Embedded Styles

Style rules may be inserted in the head of the XHTML document itself.
Such styles are referred to as internal styles or embedded styles.
Embedded styles apply only to the document in which they are placed.
Embedded styles also make sense when you have an external stylesheet linked to a page but you want to change something slightly on just one page

Embedded Styles

<head>
<title>Chapter 2: a paragraph</title>
<style type="text/css">
p {
font: 0.9em Georgia;
color: #000;
}
</style>
</head>

Inline Styles

Inline (in the flow of the text) styles are a one-time-use affair.
Using inline styles extensively is not the best practice.
Each time you want to use an inline style, you have to type it right into the specific element.
 
 <p style="color: #00F">This is a paragraph. This paragraph appears on a Web page and is rendered by a browser.</p>
 
 This style rule changes the color to #00F (blue) for this single paragraph element.

Inheritance

Inheritance affects the rendering of styles because styles are inherited from antecedent (or parent) elements.
Everything in the document is a descendant of the html element.
The next level in the hierarchy (or document tree) is the body element.

 <html>
    <body>
        <p></p>
     </body>
 </html>

Let’s examine the relationship the Cascade and inheritance have in how a particular element might render.

 body {
 font-family: Arial;
 }

If there were no other style rules for the p element anywhere in the Cascade, the value Arial would be inherited by the p element as a descendant of the body element.

Using @import

There are two ways to link your XHTML page to an external stylesheet :
with a link element, which we discussed earlier in the chapter
with an @import directive.
An external stylesheet can be imported into another stylesheet using an @import directive such as

 @import url(http://www.example.com/styles.css)
or
 <style type=”text/css”>
 @import url(myotherstyles.css);
 </style>

Comments

Comments can be used within CSS style definitions.
CSS comments begin with /* and end with */.
CSS comments tell the browser to ignore the material enclosed in the comment markers.
An example of a CSS comment:
 
 p {
 font: 0.9em Georgia;
 /*color: #000;*/
 }

By : Ian

Introduction

The distinction between structure and presentation is basic to the successful integration of XHTML and CSS
If you take the raw text that will become the content of your website and mark it up with XHTML elements such as headings, paragraphs, lists, and block quotes, you are structuring your document.

The div & id

The div (for division), is what the W3C calls a generic mechanism for adding structure.
A div, with a class or unique id attribute assigned to it, can assume a structural role on the page according to your particular needs.
If you need a banner, a content area, a sidebar, and a footer, you can create that structure with div elements.
Using id labels like "banner", "content", "sidebar", and "footer“ with the div element gives you the ability to create page components

Structural XHTML markup

To make CSS really capable of meeting the demand for beautiful presentation, certain elements and attributes are needed in XHTML to allow the specificity of selectors and the inheritance of the cascade to shine in all its glory.
You will use four of these markup elements and attributes to pry structure and presentation apart:

• div
• span
• id
• class

div

Pages fall into logical divisions (divs), such as banners, navigation, subnavigation, search boxes, ads, content, and footers. By enclosing these page divisions in a generic container with a named id, e.g.

 <div id="search">search content here</div>

You create a unique structural element on the page that can be presented to the viewer using specific CSS rules.The div is a block level element.

span

When the element you wish to style is inline, for example, just a few words in a sentence, the span element creates boundaries for the styling to apply to. Consider this example:

<p>Author <span class="author">Alice Walker</span>is our greatest living writer. She is closely rivaled by the wonderful <span class="author">Elizabeth Berg</span>.</p>

In that paragraph, only the words “Alice Walker” and “Elizabeth Berg” are styled according to whatever rules were specified for the class "author". The two names have the same presentation values since they share the same class rule.

id

The id attribute, which identifies the element it’s assigned to, does more than merely serve as a stylesheet selector, although that is certainly an important job. The id attribute can also be a target for a hypertext link or a referenced object in a script.
Remember that any id can only be used one time on a page; it must be unique. An id attribute must begin with a letter or an underscore and cannot contain blank spaces.

class

For elements that are not unique on the page—that is, styles you plan to use more than one time per page—there is the class attribute. A class attribute can be assigned to any element, either block or inline. The class attribute creates context on the page, so that the element can be presented to the viewer using specific CSS rules.

By: Ian

Paragraphs

Paragraphs are defined with the <p> tag.

 <p>This is a paragraph</p>
 <p>This is another paragraph</p>

HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks

The <br> tag is used when you want to end a line, but don’t want to start a new paragraph. The <br> tag forces a line break wherever you place it.

 <p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Comments in HTML

The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date
 
 <!– This is a comment –>

Note that you need an exclamation point after the opening bracket, but not before the closing bracket

By: Ian