CSS: Cascading Style Sheets Made Easy Defining Styles Taylor Anderson
Defining Styles
OK, now that we've covered how to reference a style, let's look at defining styles. Open a new notepad document and write the following.
Figure 1-1
If you want to insert a comment:
/* Any text placed here will be ignored
You
Can
Have
Spaces
Too*/
When you’re done, save the file as style.css and open the index.html file again.
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: Defines 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 can 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 with CSS! Of course, there’s much more to CSS than this relatively simple example. This article serves as a starting point for those 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.
