Pin Me

CSS and HTML: Setting Up Header Tags and Paragraph Tags for Your Website

written by: •edited by: Michele McDonough•updated: 3/13/2011

This tutorial shows you how to set up header tags and paragraph tags in your cascading style sheet and also how to create new classes in order to have text in different styles.

  • slide 1 of 7

    Using CSS

    Cascading Style Sheets, or CSS for short, are a great way to control the style and layout of a number of web pages from one simple file. You can set up rules for various types of tags and even create multiple classes which will allow you to control every aspect of how your web pages appear online. Best of all if you decide to change the style or layout you only need to edit one file.

    To create a style sheet you can write into a word pad or notepad file and simply save it as a .css file. You’ll then need to reference the file in each HTML page within the <head> tags with this line -

    <link rel="stylesheet" type="text/css" href="yourstylesheet.css" />

  • slide 2 of 7

    Background Images and Color

    One of the first things you may want to do is set up your body style which will allow you to define a background color or use a background image. For example -

    body {background-color: #FFFFFF; background-image: url(images/blueback.jpg); background-repeat: repeat; font-family: Arial; }

  • slide 3 of 7

    CSS Headers

    Next up we’ll set up the rules for your header tags. Header tags are important for search engine optimisation so you should try to use them wherever appropriate. A large header for your article title and then smaller headers for sub-sections works best. To define the style of your header tags in your CSS you should add the following lines.

    h1 { font-family: Arial; font-size: 36px; color: #000000; }

    h2 { font-family: Arial; font-size: 24px; color: #000000; }

    h3 { font-family: Arial; font-size: 20px; color: #000000; }

    h4 { font-family: Arial; font-size: 18px; color: #000000; }

    h5 { font-family: Arial; font-size: 12px; color: #000000; }

    h6 { font-family: Arial; font-size: 8px; color: #000000; }

    This will give you six header tags which you would use in your HTML like this -

    <h1>Main Article Header</h1>

    <h2>Sub-Heading</h2>

  • slide 4 of 7

    Different Header Styles

    Chances are you won’t need six but you can always use them to create different styles of headers. In addition to selecting the color, font size and font used you can also use the following attributes –

    text-decoration: none;

    text-align: center;

    There are a number of choices for the text-decoration attribute. The names are fairly self explanatory. If you wanted to decorate the text simply replace “none" with one of these options –

    overline

    line-through

    underline

    blink

  • slide 5 of 7

    CSS Paragraph Tags

    You would set up your paragraph tags in much the same way so you would have a line in your CSS that looks like this –

    p {color:#000000; font-size:14px; text-align: left; font-family : Arial; }

  • slide 6 of 7

    Different Paragraph Styles

    In terms of visual design, you may find that sometimes you want a different look for your text. While your basic text would appear in paragraph tags as usual.

    <p>This is your text.</p>

    CSS allows you to create new classes of paragraph tags. For example, you could add the following line to your CSS

    p.center {color:#000000; font-size:14px; text-align: center; font-family : Arial; }

    Then in your HTML the text you wanted centered would appear in tags like this.

    <p class="center">This is your centred text.</p>

  • slide 7 of 7

    Versatile CSS

    As you can see, CSS is a versatile tool and one which allows for a great deal of customisation and freedom in setting up a unique visual style for your web pages.