Using HTML and XHTML Tags With Cascading Style Sheets

CSS definitions can be applied to HTML and XHTML tags. It may seem that you can use any tag indiscriminately. But this is not exactly true. These tags are divided into logical categories.

<doctype>
The doctype tag is placed at the beginning of the webpage code. It is not a CSS style selector but it tells the web browser what DTD or Document Type Definition to use when displaying your webpage. You can think of a DTD as a set of rules that the web browser must follow. Anyone can make a set of DTD rules, but the ones used most often are those created by the World Wide Web Consortium. Some older web browsers do not recognize the DTD but the newer versions do. These newer versions are Netscape 6, Internet Explorer 5 (Mac), Internet Explorer 6 (Windows) and Mozilla 1. If no DTD is referenced by a doctype tag, the web browser will use its own default rules instead. For CSS webpages there are three DTD to choose from.

Strict - This DTD tells the browser to use only CSS formatting and no HTML formatting on the webpage.

Use for HTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.
Use for XHTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.

Transitional - This DTD allows you to use both CSS and HTML formatting. This is the best DTD to use until those older browsers are no longer in use.

Use for HTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.
Use for XHTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.

Frameset - You would use this DTD when making webpages that use frames.

Use for HTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.
Use for XHTML
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Note--The arrow indicates that the code is wrapped to a second line and should really be all on one line.

The HTML and XHTML selectors control where the CSS styles are applied. There are three categories of selectors that you can use to apply CSS styles. Click here for a chart.

Block-level tags - These tags will create a line break both before and after the element. For example, when you apply a CSS style to a title (the element) using the <center> center tag, this causes a line break before and after the title.

Inline tags - These tags will not create a line break. For example, when you apply a CSS style to text using the <b> bold tag, the section of bold text is not separated from the rest of the text that surrounds it.

Replaced tags - These tags have their own built-in dimensions. For example, when you apply a CSS style to an image using the <img> image tag, this tag has height and width dimensions.

	Editor Wanted BellaOnline's HTML Editor