How to Distinguish a Header and Paragraph in CSS

Add CSS to style a header and paragraph on your site.

Cascading Style Sheets (CSS) gives you the ability to define particular style features, such as the typeface and font size, of the header and paragraph on your Web page. When you create differences between these two text areas, you make it so they are recognized as distinct elements. This formatting gives your site a customized look and helps visitors navigate through your information. Use your computer's text editor application to add the CSS that distinguishes your header and paragraph, as you prefer.

Instructions

1. Bring up your text editor application and open the website file that has the header and paragraph you are styling. Type this CSS code before the closing </head> tag at the top of the page:

   <style type="text/css">

   </style>

2. Enter the header element, such as "h1," that contains your header text and follow this with a pair of curly brackets. Additionally type "p" for paragraph with the brackets like so:

   h1 { }

   p { }

   This action creates the individual style rules that format your header and paragraph separately.

3. Enter "color: ;" in each set of brackets and type a hexadecimal color value after each entry to assign the shade of the font in your header and paragraph. To illustrate:

   h1 { color: #cccccc; }

   p { color: #606060; }

4. Type "font-family: ;" after the color attribute and enter the name of a font combination in each rule as shown here:

   h1 { font-family: "Times New Roman", Times, serif; }

   p { font-family: "Comic Sans MS", cursive, sans-serif; }

   The font-family attribute presents the header and paragraph in the typeface you specify.

5. Enter "font-size: ;" and follow this with a number value in pixels (px) to determine the size of the text. For instance:

   h1 { font-size: 25px; }

   p { font-size: 14px; }

6. Save your file. Your completed CSS code looks similar to this example:

   <style type="text/css">

   h1 { color: #cccccc; font-family: "Times New Roman", Times, serif; font-size: 25px; }

   p { color: #606060; font-family: "Comic Sans MS", cursive, sans-serif; font-size: 14px; }

   </style>

Tips & Warnings

• The CSS rules are automatically applied to your header and paragraph once you save your file and upload the document back to your Web host to publish it.

References

• W3Schools: CSS Text
• W3Schools: CSS Font

Resources

• W3Schools: HTML Colors
• W3Schools: CSS Web Safe Font Combinations
• World Wide Web Consortium (W3C): Starting with HTML + CSS