web designing using css

How To: Resizeable Background Image

2010-04-09T06:32:00.000-07:00

http://css-tricks.com/how-to-resizeable-background-image/

Sizing Fonts Using Units of Measurement

2007-11-21T06:11:00.000-08:00

Unit Identifier

Corresponding Unit

points

picas

pixels

ems

exes

percentage

Points and Picas
You should avoid using points and picas to style text for display on screen. This unit is an excellent way to set font sizes for print design, as the point measurement was created for that purpose. A point has a fixed size of 1/72 of an inch, while a pica is one-sixth of an inch.

Pixels
Many designers like to set font sizes in pixel measurements, as this unit makes it easy to achieve consistent text displays across various browsers and platforms. However, pixel measurements ignore any preferences users may have set in their own browsers and, in many browsers, font sizes that the designer has dictated in pixels cannot be resized by users. This limitation presents a serious accessibility problem for users who need to make text larger in order to read it clearly.

Ems
The em is a relative font measurement: one em is equal to the height of the capital letter M in the default font size. Where CSS is concerned, 1em is seen to be equal to the user’s default font size, or the font size of the parent element when it is set to something other than the default.
If you use ems (or any other relative unit) to set all your font sizes, users will be able to resize the text, which will comply with the text size preferences they have set in their browsers. As an example, let’s create a declaration that sets the text within a p element to display at a size of 1em:

Exes
The ex is a relative unit measurement that corresponds to the height of the lowercase letter x in the default font size. In theory, if you set the font-size of a paragraph to 1ex, the uppercase letters in the text will display at the height at which the lowercase letter x would have appeared if the font size had not been specified (and the lowercase letters will be sized relative to those uppercase letters).

Unfortunately, modern browsers don’t yet support the typographical features needed to determine the size of an ex precisely—they usually make a rough guess for this measurement. For this reason, exes are rarely used at the time of writing.

Percentages
As with ems and exes, font sizes that are set in percentages will honor users’ text size settings, and can be resized by the user. Setting the size of a p element to 100% will display your text at users’ default font size settings (as will setting the font size to 1em). Decreasing the percentage will make the text smaller

Absolute Keywords
We can use any of seven absolute keywords to set text size in CSS:
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large

from: the css anathology (by Rachel Andrew)

Managing CSS File

2007-11-19T23:15:00.000-08:00

Deciding how many style sheets to maintain and what they should contain is more difficult. In a small, simple site it may be fine to keep all of your declarations in one file. But as sites grow larger, there seems to be a point at which it becomes simpler to deal with multiple files than it is to find the declaration or attribute you’re looking for in amile-long single style sheet. Because CSS includes the ability to import other style sheets, it’s relatively simple to link to one style sheet from your (X)HTML file, and then import additional style sheets from that one. Take a look at the following example:

index.html:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>untitled</title>
<link rel="stylesheet" type="text/css" href="http://yoursite.com/media/css/base.css" />:
</head>

<body>
<p>The content of our page.</p>
</body>
</html>

base.css:
@import url("layout.css");
@import url("typography.css");

Here, our linked style sheet, base.css, imports two additional style sheets, layout.css and typography.css. We’ve split our CSS into three separate files, but the browser will treat them as if they were one long style sheet. Personal preference is involved in deciding which is easier to wrap your brain around— one file or multiple files. Oftentimes, the scope of the project will dictate your methodology.

A small project with only a few pages may have far fewer styles, and thus be quite manageable in a single file. Larger projects are more likely to get complex, and breaking their style into multiple files may help you keep track of things more efficiently. You also may find special cases that warrant their own style sheet, such as groups of hacks and workarounds to compensate for browser bugs or styles specifically for a particular media type (such as print or handheld).

Whether you decide to break up your styles into multiple files is entirely up to you. With a little experimenting, you’ll find methods that make sense for you and your team.

from: pro css technique (Jeff Croft, Ian Lioyd and Dan Rubin)

Anchor Pseudo Element

2007-11-13T20:19:00.000-08:00

Anchor Pseudo-element is used to control the links in web page.Link can all be displayed in different ways in a CSS-supporting browser:

It sub properties are:
Link : this is a link that has not been used, nor is mouse pointer hovering it
visited : this is a link that has been used before, but has no mouse on it.
hover : this is a link currently has a mouse pointer hovering over it/ on it.
active : this is a link that is in process of being click

Note:
1) a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
2) a:active MUST come after a:hover in the CSS definition in order to be effective!!
3) Pseudo-class names are not case-sensitive.

Example:
-----------------------------------------------------------------------------------
a:link {
color:#999999;
text-decoration:none;
}

a:visited {
color:#0000FF;
}

a:hover {
color:#CCCCCC;
text-decoration:underline;
}
a:active {
color:#FF0000;
}

Pseudo Classes

2007-11-11T20:35:00.000-08:00

In CSS, there are certain selectors you can use that act like you've injected new HTML into the page and have the flexibility to style those new imaginary elements. These are known as pseudo-elements.

Pseudo-elements can only be applied to the last "simple selector in a chain", as the recommendation says. A simple selector is either the univeral selector (*) or a type selector (I tend to call them element selectors) followed by attribute, ID or pseudo-class selectors.

The Syntax
The syntax for pseudo elements is a bit different than that of regular CSS, but it's real close.
selector:pseudo-element {property: value}
As you can see the only difference is that you place the pseudo element after the selector, and divide the 2 with a (:) colon.

There are a number of common typographical layout techniques (such as drop-cap letters, or special text formatting applied to the first line or letter of text in a paragraph) that, while commonplace in print media, are not easy to reproduce using standard HTML. These do not conform to the idea of typical structural elements contained in a Web page, but are better thought of as pure typographical layout formatting features. CSS enables the Web author to accomplish this using the pseudo-elements

The list of Pseudo element and classes

1. anchor
2. first-line
3. first-letter
4. lang
5. left, right & first
6. focus and hover
7. first-child

CSS Selectors

2007-10-31T07:03:00.000-07:00

CHILD SELECTOR

Despite Internet Explorer 6 not supporting the CSS child selector, it's actually been used a lot as a way of hiding CSS commands from Internet Explorer. This is no longer possible as IE7 now understands the child selector. To understand, what is the child selector? Imagine the following HTML structure:

<div><p><span>Text goes here</span></p></div>

In the above example, the <p> is a child of the <div> and the <span> is a grandchild of the <div>. We can make the text in the <span> red by using the following CSS rule:

div span {color: red;}

This basically means that the contents of the <span> will be red, provided that the <span> is nested within a <div>. That <span> could be a child, grandchild, great-grandchild etc. of the <div>.

If we were however to use the following CSS code:

div>span {color: red;}

...Then the text within our <span> wouldn't turn red. This is because we've inserted the child selector between the div and span (the greater than sign), which basically means that our span has to be a child of a div. In the above example, the <span> is a grandchild of the <div>.

So, by using the child selector, we can assign rules to any HTML element that's a child (and not a grandchild) of another element. Let's say for example we want a top margin to be assigned to the first <div> in our body, but not to any others. Without the child selector we would be forced to assign a class or id to this <div> and reference that class or id in our CSS command. Now though, we can reference this <div>, and only this <div>, without the need for a class or id through the CSS:
body>div {margin-top: 10px;}

ADJACENT SELECTOR

The adjacent selector is another extremely useful CSS selector that up until now Internet Explorer hasn't understood. Fortunately, IE7 does understand it. The adjacent selector basically allows you to reference an HTML element that's adjacent to another element:

blockquote+p {margin-top: 0;}

The above CSS code basically says that any paragraph that's preceded by a quote shouldn't have a top margin. This is useful as you may always wish to cite the person making the quote in a paragraph after the quote and may want to get rid of the space between the paragraph and quote.

Another great example of when you may use the adjacent selector is in horizontal lists. Often, you may want to format the first item slightly differently to the other items in the list. So, if you wanted to assign a left border to each navigation item except for the first, you could use this CSS code:

li+li {border-left: 1px solid black;}

This basically means that any <li> that follows another <li> (i.e. all of them except the first) should have a left hand border.

Why we need of CSS ?

2007-10-29T22:39:00.000-07:00

Separate Presentation from Content
The first and foremost mission was to disconnect the tight stranglehold that HTML style tags brought to a Web page. By isolating the control of a page’s look-and-feel from the content, a clear pathway to building structured pages opens up where you can still get the design you want. Additionally, both content and design benefit in terms of accessibility. Search engines can get at the content easier for indexing, while designers have hands-on control of their presentation. The core concept of separating presentation from content leads to many other benefits of the CSS model.

Flexible Design Model
Even with the most basic implementation of text styling, CSS runs rings around HTML. Whereas font tags are limited to seven browser-dependent sizes, CSS offers both absolute, number-based systems in the measurement unit of your choice (points, pixels, ems, percentages, and many others) and relative keyword-based systems (that is, small, medium, large, smaller, larger, and so on). Design considerations common in print publishing (such as line spacing) are impossible in HTML but a snap in CSS. Aside from the specific properties available, the CSS methodology of assigning those properties is wonderfully robust. With CSS, you can re-style existing HTML tags or create custom styles in a variety of ways with classes, IDs, and through selectors. Selectors (whether as common as a descendent selector or as rare as adjacent-sibling selectors) encourage structural Web coding while delivering enhanced design control.

Faster Loading Times
To the casual Internet user, a Web page is completely virtual with no real substance or weight. Web designers, however, are very aware of the weight of their pages; the more code that’s in a page, the heavier it is and the longer it takes to load. For example, here’s the minimum code it takes to place a sentence on the page in the common HTML container, a font tag:

<table> <tr> <td> Welcome to my world. </td> </tr> </table>

Now, here’s the same content in the standard CSS container, a div tag:
<div> Welcome to my world. </div>

Multiply that doubled-difference many, many times for a single page—and then again for an entire Web site—and you have some idea of CSS’s edge in speed.

Easy, Instant Maintenance
As noted earlier, it’s a nightmare to change an HTML style across a site because styles are all applied at the lowest level, the tag. Not only must all pages with all the styles be altered one at a time, each page must be re-saved and then re-put to the server.With well-structured CSS, on the other hand, your styles are kept in a separate file where they can be modified in any text editor. Once published, a style change is immediately seen by anyone who views an affected page within the site.

Portability
Although the Internet may at times seem pervasive, it’s just one of many media. For example, many sites strive to have their Web pages available for print as well.With HTML-styled pages, the only viable route is to redesign the page with print in mind—a terrible chore to do it once and a never-ending time-suck if the site is updated frequently. CSS turns the HTML model on its head and allows you to simply specify a different style sheet for print—and, if desired, one for speech synthesizers, rojectors, and hand-held devices, among others—and you’re done.

Advanced Design Possibilities
As defined, CSS is highly interactive and throws open the door to a multitude of design options. Just a few of the advanced text options were mentioned earlier; in addition to advanced sizing and line spacing, CSS also provides more robust alignment and far more specific margin and padding options. Text is not the only element to gain a power surge under CSS. The capability to control the position and tiling of background images (see the below Figure) is reason enough to use CSS in and of itself.

FIGURE -1: With CSS image control, you can place a single, non-tiling image like thiscontrol panel in the background, precisely positioned.

Another key element in the CSS toolchest is the div tag, commonly referred to in Web authoring programs like Macromedia Dreamweaver as layers. Content within a div tag can be placed anywhere on a page or made to flow in the context of a document. A div tag, like span, is a non-semantic tag that is used as a generic container; div tags are nothing more than block elements that enable you to mark up broad sections of a document. From a dynamic point of view, div tags can be programmatically hidden, revealed, change style, and even move across (or off ) the page.

Enhanced User Control
While CSS provides a great deal of design-time flexibility, it also opens up the run-time options for Web page visitors. The entire notion of the cascade in Cascading style Sheets stems from the originators’ desire to blend the designer’s style sheet with the user’s. The end result is a cascade of several style sheets all coming together to render the page optimally. Some CSS-savvy designers have taken this a step further and designed their sites with multiple CSS styles attached to each page. Modern browsers include a style switching command that lists available style sheets.

One of the most commonly adjusted user settings is font size. The smallish text that looks good on the design spec may be too tiny to be read by a particular visitor—and that’s okay, if the page is styled properly with CSS and the text can expand to a readable size, as shown in Figure 1-2.When designed correctly, the text grows and the layout flows: site designer, site visitor, and site owner are all happy.

Accessibility
Adjustable text size is just one aspect of a vital trend in Web design: accessibility. Fueled by the Federal Rehabilitation Act, a U.S. law mandating that all government-run Web sites follow the guidelines established in Section 508 of that act, accessibility is on every designer’s watch list. The very core of Cascading Style Sheets—separating presentation from content—makes the content within the pages more available. This openess, or accessibility, is immediately noticeable when you listen to software screen readers. Screen readers are a crucial assistive technology. If you ever want to demonstrate the benefit of CSS, just point a screen reader–enabled browser to a page in a CSS-based layout—and then visit the same page in a table-based layout, especially those with deeply nested tables. You won’t believe your ears when you hear what a difference CSS makes.

FIGURE-2: Define your font sizes correctly with CSS, and text is easily rescaled with no sacrifice of design integrity.

One CSS 2.1 specification goes to the next level in aiding the visually impaired to browse the Web by carving out a new media type: speech. Speech is a separate media type (just like print or hand-held devices) that allows designers to control how CSS classes and other selectors sound, just like the screen media type controls how CSS selectors look. Support for the speech media type is pretty much nonexistent at this time, but a much fuller implementation already on the table for CSS 3 bodes well for this much-needed functionality.

List of CSS Property and Browser Support

2007-10-25T21:30:00.001-07:00

Basic concepts browser support
Browser	Internet Explorer						Netscape	Gecko	Safari	Opera
Platform	Windows					Mac	All	All	All	All
Version	4.0	5.0	5.5	6.0	7.0	5.0	4.x	1.0+	1.2+	7.0 +
Linking to a style sheet	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
@import	Y	Y	Y	Y	Y	Y	N	Y	Y	Y
@media	N	N	Y	Y	Y	Y	N	Y	Y	Y
@font-face	N	N	N	N	N	N	N	N	N	N
Comments	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
HTML comment tags	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
Specificity	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
Inheritance	Y	Y	Y	Y	Y	Y	B	Y	Y	Y

Selectors browser support
Browser	Internet Explorer						Netscape	Gecko	Safari	Opera
Platform	Windows					Mac	All	All	All	All
Version	4.0	5.0	5.5	6.0	7.0	5.0	4.x	1.0+	1.2+	7.0 +
Type selectors	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
Class selectors	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
ID selectors	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
Descendent selectors	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
Link pseudo class selectors	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
Dynamic pseudo class selectors	N	N	N	N	P	P	N	Y	Y	Y
Pseudo element selectors
:first-line	N	N	Y	Y	Y	Y	N	Y	Y	Y
:first-letter	N	N	Y	Y	Y	Y	N	Y	Y	Y
:before	N	N	N	N	N	N	N	Y	Y	Y
:after	N	N	N	N	N	N	N	Y	Y	Y
Selector groups	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
Language pseudo class selectors	N	N	N	N	N	Y	N	N	N	N
Child selectors	N	N	N	N	Y	Y	N	Y	Y	Y
First child selectors	N	N	N	N	Y	Y	N	Y	Y	Y
Adjacent selectors	N	N	N	N	Y	Y	N	Y	Y	Y
Attribute selectors	N	N	N	N	Y	N	N	Y	Y	Y

Background properties browser support
Browser	Internet Explorer						Netscape Navigator			Opera
Platform	Windows				Macintosh		(All Platforms)			(All Platforms)
Version	4.0	5.0	5.5	6.0	4.0	5.0	4.x	6.0	7.0	3.5	5.0	7.0
background-color	Y	Y	Y	Y	Y	Y	B	Y	Y	Y	Y	Y
background-image	Y	Y	Y	Y	Y	Y	B	Y	Y	Y	Y	Y
background-attachment	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y
background-repeat	B	Y	Y	Y	B	Y	N	Y	Y	Y	Y	Y
background-position	Y	Y	Y	Y	Y	Y	N	Y	Y	Y	Y	Y
background	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y

Border properties browser support
Browser	Internet Explorer						Netscape	Gecko	Safari	Opera
Platform	Windows					Mac	All	All	All	All
Version	4.0	5.0	5.5	6.0	7.0	5.0	4.x	1.0+	1.2+	7.0 +
border-width	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
border-top-width	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
border-left-width	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
border-bottom-width	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
border-right-width	Y	Y	Y	Y	Y	Y	B	Y	Y	Y
border-color	Y	Y	Y	Y	Y	Y	P	Y	Y	Y
border-style	P	P	Y	Y	Y	Y	P	Y	Y	Y
border	P	P	Y	Y	Y	Y	N	Y	Y	Y
border-top	P	P	Y	Y	Y	Y	N	Y	Y	Y
border-left	P	P	Y	Y	Y	Y	N	Y	Y	Y
border-bottom	P	P	Y	Y	Y	Y	N	Y	Y	Y
border-right	P	P	Y	Y	Y	Y	N	Y	Y	Y

Margin & padding properties browser support
Browser	Internet Explorer						Netscape	Gecko	Safari	Opera
Platform	Windows					Mac	All	All	All	All
Version	4.0	5.0	5.5	6.0	7.0	5.0	4.x	1.0+	1.2+	7.0 +
margin	B	B	Y	Y	Y	Y	Y	Y	Y	Y
margin-top	B	B	Y	Y	Y	Y	B	Y	Y	Y
margin-left	B	B	Y	Y	Y	Y	B	Y	Y	Y
margin-bottom	B	B	Y	Y	Y	Y	B	Y	Y	Y
margin-right	B	B	Y	Y	Y	Y	B	Y	Y	Y
padding	B	B	Y	Y	Y	Y	B	Y	Y	Y
padding-top	B	B	Y	Y	Y	Y	B	Y	Y	Y
padding-left	B	B	Y	Y	Y	Y	B	Y	Y	Y
padding-bottom	B	B	Y	Y	Y	Y	B	Y	Y	Y
padding-right	B	B	Y	Y	Y	Y	B	Y	Y	Y

Page layout properties browser support
Browser	Internet Explorer						Netscape	Gecko	Safari	Opera
Platform	Windows					Mac	All	All	All	All
Version	4.0	5.0	5.5	6.0	7.0	5.0	4.x	1.0+	1.2+	7.0 +
position	P	P	P	P	Y	B	P	Y	Y	Y
top	P	P	Y	Y	Y	Y	B	Y	Y	Y
left	P	P	Y	Y	Y	Y	B	Y	Y	Y
bottom	N	N	Y	Y	Y	Y	N	Y	Y	Y
right	N	N	Y	Y	Y	Y	N	Y	Y	Y
width	P	Y	Y	Y	Y	Y	B	Y	Y	Y
min-width	N	N	N	N	Y	N	N	Y	Y	Y
max-width	N	N	N	N	Y	N	N	Y	Y	Y
height	Y	Y	Y	Y	Y	Y	P	Y	Y	Y
min-height	N	N	N	N	Y	N	N	Y	Y	Y
max-height	N	N	N	N	Y	N	N	Y	Y	Y
z-index	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
visibility	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
overflow	N	Y	Y	Y	Y	B	N	Y	Y	P
float	B	B	Y	Y	Y	Y	B	Y	Y	Y
clear	B	Y	Y	Y	Y	Y	B	Y	Y	Y
clip	N	N	Y	Y	N	P	N	Y	Y	Y

Birth of CSS

2007-10-21T22:47:00.000-07:00

The World Wide Web began in 1991 as the result of a project by computer engineer Tim Berners-Lee at the European Centre for Nuclear Research (CERN) in Geneva, Switzerland. His goal was to get different computers to communicate with each other and display information across the Internet. Berners-Lee's work soon blossomed into the Web we know today.

The Web was founded on two major protocols: the Hypertext Transport Protocol ("HTTP"), which transfers Web page information across the Internet, and the Hypertext Markup Language (better known as "HTML"), which formats the way in which a page is displayed within a Web browser. In the days of the original HTML 1.0 specification, things were pretty simple, as there were only a few HTML tags, designed primarily to handle such things as modest text formatting, hypertext links and the inclusion of images within a Web page.

The Web quickly grew in popularity, especially with the release of the Mosaic browser from the National Center for Supercomputing Applications in 1993, the first relatively easy-to-use browser for the popular Microsoft Windows and Macintosh operating systems. The initial version of Netscape Navigator, one of the first major commercial browsers, followed soon after, in 1994.

Arguably the first shot of what would become to be known as the "browser wars" was fired by Netscape when they sought to make their Web browser stand out from the crowd by creating new HTML tags for Webmasters — tags whose effects could only be viewed within Netscape's browser. Many of these new tags provided desirable options for Webmasters, giving them the ability to add such things as tables, frames and enhanced text formatting. This strategy not only lured Webmasters to create pages using these new tags, but also drew in viewers who realized they were "missing out" on things if they didn't have the Netscape browser. This strategy was one of the things that helped Netscape to quickly grab a majority of the Web-browser market. This strategy worked well for Netscape — while it may seem hard to believe now, back in the mid-1990s there were several dozen commercial Web browsers vying for market share, the majority of which have long since fallen by the wayside. (In fact, the author worked on one of these, the now largely forgotten "Cyberjack," produced by Delrina — best known at the time for its "WinFax" fax software — released in 1995.) One of Netscape's main competitors at the time was Spyglass, which had a license to sell a commercial version of the Mosaic browser. It was at this time that Microsoft's Bill Gates realized the impact the Web was going to make on the future of computing and communications, and so Microsoft decided to get into the browser market by purchasing the rights to Spyglass's browser code. The initial version of Microsoft's Internet Explorer came shortly thereafter.

Microsoft soon began to incorporate new HTML tags into their browser, in an attempt to get Webmasters to preferentially use their code and viewers to use Internet Explorer in order to see these new features in action. Thanks to the many features that these new tags brought to Web design, and the fact that Microsoft offered their browser for free, Internet Explorer soon took off in popularity.

Thus the "browser wars" began in earnest as Netscape and Microsoft competed for "mind share" by creating new HTML tags in an attempt to sway Webmasters to incorporate them into their Web pages.

Unfortunately for the Web community, this conflict means that Internet Explorer and Netscape Navigator don't agree about a lot of things. Both companies have introduced all sorts of HTML enhancements and technologies, some of which have been wildly successful (such as Netscape's HTML table standard or Internet Explorer's <font> tag) and some of which have failed to gain wide acceptance (such as Netscape's abortive layers standard or Internet Explorer's Active Channels feature). Even when the two companies incorporate the same technology within their browsers, there are often incompatibilities between the implementation of the technology (a point with which any JavaScript developer will readily agree).

These days, Webmasters still have to jump through hoops in order to make Web pages function and display properly in the two major browsers. Some Webmasters simply decide to craft their Web pages to look best in one browser, to the detriment of those using a different browser. A few Webmasters go so far as to write code that will detect the type of browser being used, and then deliver a Web page optimized for that browser. While in some ways this might be seen as an ideal circumstance, few Webmasters have the time or resources to do this properly. The majority simply design their Web sites to work optimally within the two major browsers, but this restricts the Web author to code Web pages that often cater to the "lowest common denominator" in Web design and functionality.

Many of the non-standard HTML tags introduced in both Netscape Navigator and Internet Explorer make it hard or impossible for people using command-line browsers (such as Lynx) or people with disabilities (such as blind users who use browsers that read content aloud) to "view" a Web site.

As a result of these issues, most professional Webmasters test their Web pages against different versions of each of the major browsers and several of the less popular browsers in order to examine their Web pages for general compatibility.

Clearly, something had to be done before HTML became too awkward and unwieldy for use. This is where the World Wide Web Consortium enters the picture.

Recommended DTDs to use in your Web document.

2007-10-21T22:08:00.000-07:00

Template

Use the following markup as a template to create a new XHTML 1.0 document using a proper DOCTYPE. See the list below if you wish to use another document type.

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

<!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" xml:lang="en" lang="en">

<head>

<title>An XHTML 1.0 Strict standard template</title>

<meta http-equiv="content-type"

content="text/html;charset=utf-8" />

<meta http-equiv="Content-Style-Type" content="text/css" />

</head>

<body>

<p>… Your HTML content here …</p>

</body>

</html>

DTD List

HTML 4.01 - Strict, Transitional, Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 - Strict, Transitional, Frameset:

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

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

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

XHTML 1.1 - DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.0: - DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

XHTML Basic 1.1 - DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

HTML 2.0 - DTD

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2 - DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

MathML 1.01 - DTD

<!DOCTYPE math SYSTEM
"http://www.w3.org/Math/DTD/mathml1/mathml.dtd">

MathML 2.0 - DTD

<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN"
"http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">

XHTML + MathML + SVG - DTD

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

SVG 1.01 - DTD

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

SVG 1.1 Full - DTD

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

SVG 1.1 Basic - DTD

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

SVG 1.1 Tiny - DTD

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

XHTML + MathML + SVG Profile (XHTML as the host language) - DTD

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

XHTML + MathML + SVG Profile (Using SVG as the host) - DTD

<!DOCTYPE svg:svg PUBLIC
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

List of DTDs for the CSS validator.

HTML 4.0

http://www.w3.org/TR/1998/REC-html40-19980424/strict.dtd

http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd

http://www.w3.org/TR/1998/REC-html40-19980424/frameset.dtd

HTML 4.01

http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd

http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd

http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd

XHTML 1.0

http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-frameset.dtd

Designing with CSS - Use of Wild Card

2007-10-19T21:27:00.000-07:00

Removing Default Values and Properties

Browsers apply default values to block level elements; unfortunately these default values are not consistent. These default values can, and do, vary greatly from browser to browser. With this in mind, we will create a CSS rule in our style sheet that will remove all the default values. This is an important first step, because without removing the default margin and padding values, the layout of the XHTML page will not display the same when viewed in different browsers. It is a best practice to always use this rule to "zero out" the default values, so that your page design is based on a standardized view, no matter which browser is used to view it. As you begin developing web pages with Dreamweaver CS3 that are formatted using CSS, remember to add this rule to every new page you create, because it may not be included in the default style sheet that is generated with your selected layout. As a general rule, removing the default properties and values inherent in the various browsers is not absolutely mandatory, although adding this rule does provide greater control. However, you must remember to specifically set margin and padding values for any page elements that require them.

To remove the default properties using the most efficient code, we will group selectors together. This is a new concept that is described in detail in the demo below. By grouping the selectors, we can create a single CSS rule that uses the wildcard selector to zero off all the default values. The wildcard selector is denoted with the asterisk symbol: *. The wildcard means "all"—which is a powerful way to refer to all page elements (body, etc.) at once. Remember that the order in which you list the rules in your style sheet is very important. The rule to remove the default values and start your design from a "zeroed out" space should always be the first rule in your CSS page. You could encounter odd display issues if the rule was placed below other rules, because when the browser "reads" the rule it would zero out all of the padding and margin values that were set in the rules that preceded it in the style sheet.