Inline XHTML Styles
As I stated in Stylesheet Basics ⇒, another way to add styles is by using the style attribute of most XHTML tags or by adding a style tag on the XHTML’s head tag.
These approaches invalidate one of the goals of XHTML and CSS; which is to separate the data from the design that is why I discourage to use these methods. But sometimes, when handling complicated layouts and doing advanced javascripting on your XHTML page, you might need to use the style attribute to override the styles defined in your CSS or the style tag.
As you can see in the following example, I’ve added a style tag inside the head tag. And for some tags inside the body tag, I’ve added the style attribute that gives them a specified style.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Inline XHTML Styles</title>
<style type="text/css">
/* <![CDATA[ */
body {
font-family: "Tahoma", serif;
background: #000000;
color: #ffffff;
}
/* ]]> */
</style>
</head>
<body>
<h1 style="border-bottom: 1px solid #ffffff;">Inline <span style="color:#ff0000;">XHTML</span> Styles</h1>
<p>This example illustrates how to use inline XHTML styles.</p>
<p style="float:left; width: 200px; margin-right: 50px;">Lorem ipsum dolor <!-- Truncated Long Text --></p>
<h2>Sample Paragraphs</h2>
<p>Sed nisi felis, tincidunt et <!-- Truncated Long Text --></p>
<p>Vestibulum ante ipsum primis <!-- Truncated Long Text --></p>
<p>Duis felis justo, rutrum in, <!-- Truncated Long Text --></p>
</body>
</html>
Note the CDATA comment-like text that encloses the style data. This is required for style and script tags so that the XML Parser (used to validate XHTML pages) won’t be confused if it sees XHTML tags inside the style and script tags. Again, if you look at the style data, it is similar to the CSS syntax described here ⇒.
If you want to see how the page looks like, you can view it here.
For the inline style attribute, The syntax is the same as the code inside the CSS selectors (see Stylesheet Basics ⇒). To describe what these styles do, I would be teaching them in the next CSS tutorial. But if you inspect the code, I’m sure you can guess what the float property is for. Well it is a way to create sidebars without using tables in XHTML.
The first h1 tag got a border-bottom property set and that explains why it has a line beneath it. The span tag is used for inline text formatting. I used it to change the color of a part of the first h1 tag to ff0000 . The "Lorem Ipsum Dolor"-paragraph, I’ve set three style properties. I’ve set it to float on the left side, to have a width of 200 pixels (200px) and a margin of 50 pixels (50px) on its right side (margin-right).
Then save the file as my_second_page.htm and then view it in a browser. And by the way, isn’t it fun to see that all of your hardwork yields pages that are fully compliant to the XHTML 1.1 and CSS 2.1 standard? Well for me, it is.
