CSS in an HTML document
Takeaway: Learn about the ways you can combine styles with HTML.
By Matt Rotter, Charity Kahn, and Paul Anderson
There are four ways to combine styles with HTML. The two simplest ways are by defining styles in the head or the body of an HTML document. You can also create a separate style sheet and attach it to the HTML file in two different ways.
Defining Styles in the Head of the Document
The best way to define styles for a single HTML document is within the head of the document. (If you want to create a style sheet for use on several documents, link to an external style sheet instead.) Just place the selectors and their style definitions inside comment tags nested within a <STYLE> element, like so:
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
H3 { font-family: Arial; font-style: italic; color: green }
-->
</STYLE>
</HEAD>
<BODY>
<H3>This is a green, italic, Arial H3 header.</H3>
<P>
<H3>So is this.</H3>
</BODY>
</HTML>
The type attribute of the <STYLE> element defines the type of style sheet being used--in this case, CSS. (At the moment, the only other possibility is "text/javascript" for Netscape's proprietary JavaScript style sheets. In the future, other style sheet languages may be added.)
The comment tags nested within the <STYLE> element ensure that the style rules won't appear or cause errors in older browsers. Any browser that doesn't support <STYLE> will simply ignore the element and the information inside.
Defining Styles In-Line
You can also define styles in the body of the document by adding the style attribute to an HTML tag. For instance, the following HTML code makes the first <H3> text (the one with the style attribute) green, italic, and Arial, but not the second:
<HTML>
<BODY>
<H3 style="font-family: Arial; font-style: italic; color: green">This is a green, italic, Arial H3 header.</H3>
<P>
<H3>This is an H3 header, but it's not green, italic, or Arial.</H3>
</BODY>
</HTML>
In most cases, this method defeats the purpose of using style sheets as global templates. It is useful, however, to create unique instances or exceptions. The <DIV> and <SPAN> elements are useful for applying a style to an arbitrary segment of the page.
While including styles in the HTML document is useful for small projects, it touches only the surface of style sheets' usefulness. Things really get interesting when you link to an external style sheet.
Matt Rotter and Charity Kahn are software engineers for CNET.com.
Paul Anderson is an associate technical editor for CNET Builder.com.
SponsoredWhite Papers, Webcasts, and Downloads
- Sprint IPVoice Connect Fact Sheet Sprint
- Leveraging Information for Innovation and Competitive Advantage IBM
- IBM Multiform Master Data Management: The evolution of MDM applications IBM
- IBM Master Data Management: Effective Data Governance IBM
- Advances in Data Warehouse Performance: I/O Elimination in DB2 IBM
Article Categories
- Security
- Security Solutions, IT Locksmith
- Networking and Communications
- E-mail Administration NetNote, Cisco Routers and Switches
- CIO and IT Management
- Project Management, CIO Issues, Strategies that Scale
- Desktops, Laptops & OS
- Windows 2000 Professional, Microsoft Word, Microsoft Excel, Microsoft Access, Windows XP,
- Data Management
- Oracle, SQL Server
- Servers
- Windows NT, Linux NetNote, Windows Server 2003
- Career Development
- Geek Trivia
- Software/Web Development
- Web Development Zone, Visual Basic, .NET
