The Basics of XHTML & CSS | HCDE537

In the 1990s, early versions of HTML mixed content and presentation in the same file. In 1997, HTML 4 recommended against mixing presentation with content. Today, clean separation of content (HTML) and presentation (CSS) is strongly recommended.

What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML
XHTML is HTML defined as an XML application
XHTML is a W3C Recommendation

See Also: XHTML Introduction | W3 Schools

XHTML Syntax Rules

Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
The XHTML DTD defines mandatory elements

See Also: XHTML Syntax | W3 Schools

Structure of an XHTML File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- tells the browser what markup language is being used -->
<html xmlns="http://www.w3.org/1999/xhtml"> <!-- begin contents of the web page -->
<head> <!-- begin information about the web page -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <!-- tells the browser what content type is being used -->
<title>Premium Design Works</title> <!-- the page title -->
<link rel="stylesheet" href="styles.css" type="text/css" media="all" /> <!-- link to stylesheet -->
</head> <!-- end information about the web page -->
<body> <!-- begin visible page content -->
<h1>Premium Design Works</h1> <!-- displayed as a level 1 heading -->
<p>Premium Design Works is a small design and development group in Seattle, Washington. We specialize in handling the visual communication needs of your business, organization or artistic endeavor.</p> <!-- displayed as a paragraph -->
<h2>About Us</h2> <!-- displayed as a level 2 heading -->
<p>For over ten years now, Premium Design Works has been helping local Seattle businesses, non-profit organizations and artists succeed in their marketplace by effectively presenting their message to their audience.</p>
<p>We do this by being a part of the local business and artistic community ourselves and by utilizing the same communication tools we share with you to compete in our visual and technology driven lifestyle.
<h2>Our Services</h2>
<p>Premium Design Works understands that visual communication services play an instrumental role in achieving the business goals of your company. We understand that you are investing in us and are expecting a return on that investment.</p>
<p>We offer the following services:</p>
<ul> <!-- displayed as an unordered list -->
<li>Brand Strategy</li> <!-- displayed as a list item -->
<li>Graphic Design</li>
<li>Web Development</li>
<li>Search Engine Visibility</li>
</ul>
<h2>Contact Us</h2>
<p>13612 14th Avenue South<br />Burien, Washington 98168</p>
<p>206.851.7636</p>
<p><i><a href="mailto:msinkula@premiumdw.com">msinkula@premiumdw.com >></a></i></p>
</body> <!-- end visible page content -->
</html> <!-- end contents of the web page -->

View: Bio Page XHTML| Premium Design Works

See Also: HTML HOME | W3 Schools

The !DOCTYPE

Doctypes are the web authors way of declaring to the browser what standards they are adhering.

Doctypes are placed at the top of an HTML page:

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

See Also: XHTML Doctypes | W3 Schools

What Is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

An HTML document can be displayed with different styles: See how it works

See Also: CSS Introduction | W3 Schools

Structure of a CSS File

* { margin: 0; padding: 0; border: 0; }
body { /* CSS Selector */
background-color:#FFFFFF; /* CSS Rule */
font-family: Arial, Helvetica, sans-serif;
color: #000;
}
h1 {
width: 500px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 50px;
border-bottom: 1px solid #85898A;
}
h2 {
width: 500px;
font-size: 21px;
line-height: 21px;
font-style: normal;
padding-top: 8px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 50px;
}
p {
width: 500px;
font-size: 14px;
line-height: 21px;
letter-spacing: 0px;
text-align: justify;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 50px;
}
ul {
width: 500px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 50px;
}
li {
font-size: 14px;
line-height: 21px;
letter-spacing: 0px;
margin-left: 20px;
}
a {
color:#000;
text-decoration: underline;
}
a:hover {
color:#F20017;
text-decoration: none;
}