logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

Using HTML and XHTML Tags With Cascading Style Sheets

Guest Author - Diane Cipollo

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.




This site needs an editor - click to learn more!

Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to Twitter Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to Facebook Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to MySpace Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to Del.icio.us Digg Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to Yahoo My Web Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to Google Bookmarks Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to Stumbleupon Add Using+HTML+and+XHTML+Tags+With+Cascading+Style+Sheets to Reddit




RSS | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor