Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

HTML/CSS Tutorials

Divs, Paragraphs, and Text

Adding text to your page using paragraph and divisions tags and CSS

All of your page content will be placed between the <body></body> tags of your document. Remember that we are building a web page using semantic markup. This means that we are using HTML to describe the information on our page. We will use CSS to control the look of that information.

Every element in an HTML document can be defined as a block level item, an inline item, or a list item. Block level items are separated from other items by some form of whitespace - for example, a paragraph is separated from other elements by white space above and below. Inline items are displayed within the current line of text and force no white space around. All tags are explained further along in the document, but the concept of block and inline items is important to note in advance as they affect your page layout differently. View the list of HTML tags and whether they are inline or block level.

<div> Division Tag:

This tag is a block-level element that defines a section or division of your document. As a block-level element, it contains one line break and can accept ANY other html element within it. It has become a standard way of setting sections of your website that will be entirely laid out with CSS.

You would use a div tag when you are creating a division on your webpage such as a column that does not contain tabular data. You can define the width and height and position of a div, making it a useful vessel for a combination of other elements including paragraphs and images.

<p> Paragraph Tag:

This defines a block-level paragraph of content. Each paragraph has top and bottom margins to space it away from other content.

Using CSS with divisions, paragraphs and text:

There are a few 'rules' in CSS that are most commonly applied to text, paragraphs, and divs. Let's start by looking at how to style the text in a paragraph. Firstly, I will introduce you to the main styles used for text. For a full list of text styles visit our CSS Quick Reference.

Individually you can set the following parameters:
font, font-style, font-variant, font-weight, font-size, font-family.

But there is a short hand method for combining these elements into one declaration. Remembering the syntax for a CSS rule, we will code a shorthand style for the <p> selector. Shorthand style requires that the values are in a certain order. In this case, the order you see in the above paragraph. Use our CSS reference sheet to become familiar with the correct value orders.

inline:
<p style="font: italic small-caps bold 12px arial, sans-serif;">Place your paragraph of text here</p>

embedded or external style sheet:
p { font: italic small-caps bold 12px arial, sans-serif;}

When we use block-level elements we must consider what is called 'Box Model Properties' they are:
margin, padding, and borders.

Box Model Properties:

taken from w3.org

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding:

box model

The margin, border, and padding can be broken down into left, right, top, and bottom segments (e.g., in the diagram, "LM" for left margin, "RP" for right padding, "TB" for top border, etc.).

The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has four edges:

  1. content edge or inner edge
    The content edge surrounds the element's rendered content.
  2. padding edge
    The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The padding edge of a box defines the edges of the containing block established by the box.
  3. border edge
    The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
  4. margin edge or outer edge
    The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.

Each edge may be broken down into a left, right, top, and bottom edge.

The dimensions of the content area of a box -- the content width and content height -- depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc.

The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height.

end content from w3.org

It is important to note here that you can control whether or not an element is block-level or inline. There is a specific CSS property called 'display' and it has many possible values including; block, inline, and none. We will explore this property further along in our tutorials.

A very useful CSS property for use on block-level elements is float. Float has three main values: left, right, and none which specify whether a box should float to the left, right, or not at all. When elements are floated, they retain their margins but behave as inline elements; ie. you can have one block-level element next to another block-level element. We will see this in practice further along.

Physical Style Tags:

Let's look a bit closer at the HTML tags that are available to describe our text-based content.

H1 through H6:

Diminishing character size header tags with H1 being the largest and H6 the smallest.

EM:

Indicates emphasis. Visual effect is the same as italics.

STRONG:

Indicates stronger emphasis. Visual effect is the same as bold

CITE:

Contains a citation or a reference to other sources.

FDN:

Indicates that this is the defining instance of the enclosed term.

CODE:

Designates a fragment of computer code.

SAMP:

Designates sample output from programs, scripts, etc.

KBD:

Indicates text to be entered by the user.

VAR:

Indicates an instance of a variable or program argument.

ABBR:

Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).

ACRONYM:

Indicates an acronym (e.g., WAC, radar, etc.)

Q:

Indicates short quotations (inline content) that don't require paragraph breaks

BLOCKQUOTE:

Indicates long quotations (block-level content)

SUB:

Indicates a subscript as in H20

SUP:

Indicates a superscript as in NameTM

You should always use these tags to describe your content when applicable and you can use them in combination.

Consider the case where I want to cite a reference, and it is more important than my other references, I want it to also be bold.

ex: <cite><strong>My favorite author said so</strong></cite>

You can use these tags together just make sure you have closed them in the correct order.

Special Characters:

There are many different characters that you may wish to use on your webpage that do not appear on a standard keyboard. For example, you may wish to use a trademark symbol or a copyright symbol in your page content. There are many, many different special characters available to display using a special type of 'character reference'.

Special Characters are typically referred to using a name code, or a number code (also called a character entity or a numeric entity respectively) and there are three parts to both. Some characters may only have a numeric reference and not a character or name reference.

  1. First a name code, or a number code begins with an '&'.
  2. Secondly, the name or number that refers to the character.
  3. Finally, a semicolon to denote the end of the character reference.

Here are some examples of a few different special characters:

Name CodeNumber CodeGlyphGlyph Description
&trade;#8482;Trademark
&copy;#169;©Copyright
&laquo;#171;«Left Angle Quote
&rarr;#8594;Rightward Arrow
&hearts;#9829;Black Heart Suit
&cent;#162;¢Cent Sign

For a complete Special Characters Reference sheet click here.

Build your own two column layout:

Our first attempt at coding with divisions and paragraphs will consist of two divisions containing two paragraphs each, or a two column page. We will take advantage of the float property to achieve this goal.

Note: When you use a float, you should clear it on your next element otherwise you may find them wrapping up beside your last floated element. The property for this is:

clear: - if your elements are floated left clear: left;, for right - clear: right; if you have elements floated left and right clear: both;.

Your content will go in between your <body></body> tags but we're going to modify it a bit further down so read on.

<div style=" width: 770px; font: 12px arial, sans-serif; margin: auto;">
<div style="width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left;">
   <p style="font: 12px arial, sans-serif;"><em>The CSS float property is invaluable</em> in creating liquid and creative layouts.  In the past, people have relied on tables to give them a page layout structure.  With the float property you can create much more flexible layouts.</p>
   <p style="font: 12px arial, sans-serif;">Floats are commonly used on images to float them to the left or right of text, allowing the text to wrap freely around the image.</p>
</div>
<div style="width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; margin-left: 16px; float: left;">
   <p style="font: 12px arial, sans-serif;">By floating the first division to the left, this second one is able to float next to the first one.  Once the available space on the page has been filled (if you have set a width to your page) a further floated element will wrap down.</p>
   <p style="font: 12px arial, sans-serif;">To create a more common look for our two columns, we apply a margin to the left of the second division, giving us a gutter in the middle.</p>
</div>
</div>

There is a lot of repetition here in our styles and therefore it makes sense to put them either in our <head> as an embedded style sheet, or to add them to an external style sheet.

If you are using an external style sheet, use the <link> tag (discussed earlier), and paste the rules into an EMPTY document and name it yourFilename.css.

Let's try this again. We will 'markup' our HTML using classes:

<div id="wrapper">
  <div class="column">
    <p class="text12">The CSS float property is invaluable in creating liquid and creative layouts.  In the past, people have relied on tables to give them a page layout structure.  With the float property you can create much more flexible layouts.</p>
    <p class="text12">Floats are commonly used on images to float them to the left or right of text, allowing the text to wrap freely around the image.</p>
  </div>
  <div class="column" style="margin-left: 16px;">
    <p class="text12">By floating the first division to the left, this second one is able to float next to the first one.  Once the available space on the page has been filled (if you have set a width to your page) a further floated element will wrap down.</p>
    <p class="text12">To create a more common look for our two columns, we apply a margin to the left of the second division, giving us a gutter in the middle.</p>
  </div>
</div>

Here are the 'rules' we'll paste into our embedded or external style sheet.

.column { width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left;}
.text12 { font: 12px arial, sans-serif;}
#wrapper {width: 770px; font: 12px arial, sans-serif; margin: auto;}

Notice that I left a style on the second div of margin-left: 16px. If I included this style in the embedded style sheet it would be applied to the first div as well. Because I only want it on the second one, I have left it inline. In addition, as our box-model states, "The box width is given by the sum of the left and right margins, border, and padding, and the content width." Each box has a 1 pixel border so we have 2 pixels of width added to each column; we also have 10 pixels of padding, right and left, on each column; we have defined the width of our columns as being 355pixels; and finally, we have a margin of 16 pixels on our right column. Let's add it all up and make sure that it fits in the width of our wrapper which is set at 770 pixels.

1+10+355+10+1 = 377	16+1+10+355+10+1=393
columns
377+393= 770

There is yet a further way to shorten this code; it is another way that styles 'cascade'.

The HTML:

<div class="column">
   <p>The CSS float property is invaluable in creating liquid and creative layouts.  In the past, people have relied on tables to give them a page layout structure.  With the float property you can create much more flexible layouts.</p>
   <p>Floats are commonly used on images to float them to the left or right of text, allowing the text to wrap freely around the image.</p>
</div>
<div class="column" style="width: 265px; margin-left: 16px;">
   <p>By floating the first division to the left, this second one is able to float next to the first one.  Once the available space on the page has been filled (if you have set a width to your page) a further floated element will wrap down.</p>
   <p>To create a more common look for our two columns, we apply a margin to the left of the second division, giving us a gutter in the middle.</p>
</div>

The CSS:

.column {width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left;}
.column p {font: 12px arial, sans-serif;}
#wrapper {width: 770px; font: 12px arial, sans-serif; margin: auto;}

The first rule defines my division with the class name 'column'. The second rule states that any paragraph within an element with the class name 'column' will be styled as - font: 12px arial, sans-serif. I just need a space between the '.column' class and my 'p'. The new division with an ID= 'wrapper' can be used to cascade our styles differently on different pages, using one external style sheet. We can also set some global styles for our page. Notice the margin: auto; by adding the value 'auto' the browser will automatically calculate the width of the browser, and create equal margins on either side of my content, in effect, centering it.

NOTE: One of the great advantages of using CSS, as we have mentioned before, is that your layouts become more fluid. If, for some reason, I decided that I would rather have my columns in the reverse order, I could change my float declaration to be float: right. This would switch the order in which my columns display. I would have to change my margin to be right instead of left though.

Let's take a look at our whole page with content relevant to our topic and an embedded style sheet, take the code and modify it for your website!:

Build your Own!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
         <title>My dog Billie-Mae</title>
         <meta name="keywords" content="billie-mae, dog, mutt, canine, pet, friendship, animal, rescue">
         <meta name="description" content ="Pictures and stories about my dog Billie-Mae and the funny things she does">
         <meta name="author" content ="Andrea">
         <meta name="copyright" content ="Copyright - 2006 Andrea">
         <link rel="stylesheet" type="text/css" href="css/billie-style.css">
         <style type="text/css">
#wrapper {width: 770px; font: 12px arial, sans-serif; margin: auto;} .column { width: 355px; height: 400px; padding: 10px; border: 1px solid #000000; float: left;} .column p { font: 12px arial, sans-serif;} .column h1 { width: 355px; font: bold 16px arial, sans-serif; color: #af0b1c; border-bottom: 1px solid #af0b1c}
</style> </head> <body>
<!-this is my document wrapper here I set the width of my web page and other things --> <div id="wrapper"> <!--this is the section on how I found billie --> <div class="column"> <h1>How it Started</h1> <p>It was a warm sunny spring day in Pedro Ohio when a colleague and I went to a local farm to ask if we could do some surveys on the <em>'crick'</em> that ran through the back of their property. </p> <p>The farmer who owned the land approached us with a jocular, gap-toothed smile and asked us "do y'all like puppies?". I responded with a tentative "yyeeesss -why?" "Well..." he said, "my girlfriend found this puppy out in the back forty, and I'm a gonna have-ti shoot it... that is... unless you want it." I responded immediately with "don't shoot the little puppy; I will come back for it at the end of the day."</p> <p>This is the story of how I found Billie-Mae. When I went back to pick her up she was a tiny five week old puppy, bloated with worms, covered in lice, ticks and fleas, starving, with a puncture hole through one eyeball.</p> </div> <!-- this is the section on how she turned out --> <div class="column" style="margin-left: 16px;"> <h1>How it Turned Out</h1> <p>With time and care and a lot of flea baths, Billie's hair grew back in the soft velour of most puppies. The local vet told me that she was a very special dog because of her genetic history. The story in that area is one of dog over-population due to a general lack of spaying and neutering. </p> <p>Dogs run wild <em>-literally</em>. According to the vet, Billie-Mae is about a sixth generation wild dog. After this period of interbreeding and feral living she has become just like many other dogs in the world that are feral. They develop common characteristics such as medium height, stocky chest, pointy ears and curly tail. I like to call her my "Yankee Dingo"</p> <p>Apart from a few allergies she has turned out to be quite healthy and vivacious despite her rough start.</p> </div> </div>
</body> </html>

I've also included two H1 tags to give titles to my columns. Note how they are styled in our embedded style sheet.