spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / css_color / 1 To page 1current page
[previous]

CSS: Cascading Style Sheets Made Easy

Technical Lead
Thomson Reuters (Markets) LLC
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?


Refer to figure 1-1 above for an explanation of each line (as shown below):

Line 1: h1 states you wish to define the style for the HTML tag h1; you can apply formatting just like this for other elements, <img> for instance.

Line 2: defines the color of the h1 tag

Line 3: The font size of the h1 tag

Line 4: Indicates an end to the style for h1

Line 5: .content defines content as a class available for use in HTML. You could name it whatever you wish but be sure to include the period. To use the style in html for a paragraph use the following: <p class=”stylename”> OR <span class=”stylename”>

Line 6: Defines the color of the style

Line 7: Defines the size of the style

Line 8: Defines the font to use. Using font-family you can specify which font to use if someone does not have the font you’re trying to use. For example, someone on a Mac may not have the same fonts as a PC user. By defining a few different fonts you can be sure your website will have a similar look and feel.

Here’s an application of inserting CSS information in an HTML file (index.html). Note the changes in bold text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>CSS: Cascading Style Sheets</h1>
<p class="content">I love CSS, it’s so easy to use and it makes changes much easier! I can do things in CSS not possible with HTML!</p>
</body>
</html>

Figure 1-2

That’s it; now you can preview the index file in your browser. It’s that simple to format your text! Of course, there’s much more to CSS than this relatively simple example. This article serves as a starting point for those of you who have wanted to know about the basics of CSS and how it can benefit your web site(s).

About the Author

Taylor Anderson is the owner of a successful web site development company in Memphis, TN. He enjoys sharing what he has learned with others in the hope that one day more web masters will clean up their code! To learn more about what he offers, visit his website: Memphis Web Design.

home / programming / css_color / 1 To page 1current page
[previous]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business

Created: March 27, 2003
Revised: February 2, 2005

URL: http://webreference.com/programming/easy_css/1