Sites from Scratch

Basic Text Tags

Introduction

This article introduces basic text tags and some simple styling of text

Open the XHTML page and the CSS file from our previous article: A Simple XHTML Page

Basic Text Tags

Example 1

We have already used the paragraph element (<p>). This is the most basic form of text element. All content on a web page should be enclosed in the appropriate tag and the paragraph element is the most common one used for text

Others are the heading tags. These are Hn, where n is the number of the heading's rank within your structural hierarchy. The numbers are 1 to 6. The headings work in a web document just like heading styles do in other electronic documents such as a MS Word document

Try adding <h1>Heading 1</h1> to your web page inside the body element. When you view your web page in the browser, it should look something similar to Example 1

Add each of the other possible heading elements from <h2> to <h6>

There are many other text tags but for now we will move on to basic styling of these using our CSS file

Styling Text

CSS markup has a different format and syntax to that of HTML or XHTML. It depends on use of an identifying tag called a selector which indicates the element to be styled. This is followed by a series of properties for that element to take on. Figure 1 is an example

Figure 1

  1. body {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. Download this code: 02-fig01.txt

Line 1 provides the element to be styled, in this case the body element, and opens the parentheses. Line 2 provides a property of margin with a value of zero. Line 3 does the same for the padding property and line 4 closes the styles for the body element

This CSS rule should be initially added to every CSS file you make. Different browsers interpret web pages differently. One of the things that some do is add default margins to a web page, which means that your content will not start within the page until the margin is accounted for. This can cause trouble for some layouts or designs. This rule fixes those problems. The specifics of margin and padding - what they do and how they work - will be explained later. Given how basic your web page is, this rule will have made little difference at this point, so we'll add some visual styling now

The most obvious method is to change some colours. We'll change both the background of the body element and the colour of the text within it. Every time you want to change one of these properties on an element, you should always make sure that values are specified for both. This ensures that the necessary contrast is available to make the text clearly readable. Add background-color: black; and color: white; to the top of your body rule. Note that the American English spelling of 'colour' is used - ie 'color'

CSS properties should always be added in alphabetical order. This ensures that you don't double up by accident once your CSS grows more complex. Your CSS file should now look like Figure 2

Figure 2

  1. body {
  2. background-color: black;
  3. color: white;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. Download this code: 02-fig02.txt

Your site should look like this example. Next we create a A Simple Layout