| home / programming / css_color / 1 |   [previous] |
|
|
|
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).
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 | [previous] |
Created: March 27, 2003
Revised: February 2, 2005
URL: http://webreference.com/programming/easy_css/1
