Moronacity Tech Journal » CSS, Popular
CSS Paragraph and Div Tags
By Diane Ursu
Our sample web page also uses <h1>, <p>, and <div> tags. Those must also be defined.
The <h1> tag is used to display the title of the page: “My Sample Page.” This is using a larger, bolder font. In this example, I want the title to be aesthetically pleasing and not overpowering, so it will be dark gray, a little larger than the body font, and bold. It will also be a different font face that compliments the Arial font family of the body.
You may use one of many basic colors by simply naming it as “red,” “blue,” “gray,” “black,” etc., but hexadecimal colors provide you with hundreds of choices. In our <h1> example, I chose a shade of gray which has the hexadecimal code of “333333″. When indicating a hexadecimal code within your style sheet or HTML document, always precede this code with #.
You may have noticed that there are four fonts listed for the <h1> tag, and that one is in parentheses. Not every browser or every computer recognizes every font, so we have listed options. If the computer does not recognize “Trebuchet MS,” it will move onto Trebuchet. It will continue moving through the list until it recognizes a font. Sans-Serif is the most basic font.
Few font names include quotes in CSS. For example, “Trebuchet MS” always includes the quotes. Sans-Serif does not.
Paragraph Justification
The font characteristics were already defined in the body tag, so we do not need to do this with the paragraph tag; however, there is one paragraph element that we will address, today: justification. Justification is how a paragraph is lined up. Left-justification lines the paragraph up on the left side. Right-justification lines it up on the right side. Full-justification lines it up on both sides. You may also center a paragraph. Look at the following examples.
In our sample web page, we will justify the paragraphs – simply “justifying” the paragraphs means fully justifying. The style sheet code for the <p> tag will look like this:
The <div> Tag
The <div> tag is widely used for making little tweaks through a web page. In “My Sample Webpage,” the <div> tag is used for the footer, where the copyright notice is placed. In this example, the <div> tag for the footer will be slightly smaller than the body font. It will be the same font family as the <h1> tag and will be italicized. Since the <div> tag may be used to define many elements, each <div> tag is given a name for whichever element it influences. We will call this div tag “footer.” To define this, “div” will be followed by a period and then then “footer” in the style sheet: div.footer.
The font size for the footer is the same as for the body (12 px), but it looks smaller. The reason is that font sizes for different fonts may not be the same height and width. Trebuchet MS is smaller than Arial.
Previous: Customizing the Body Using CSS
The <h1> tag is used to display the title of the page: “My Sample Page.” This is using a larger, bolder font. In this example, I want the title to be aesthetically pleasing and not overpowering, so it will be dark gray, a little larger than the body font, and bold. It will also be a different font face that compliments the Arial font family of the body.
h1 {
font-family: "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
font-size: 20px;
font-weight: bold;
color: #333333;
}You may use one of many basic colors by simply naming it as “red,” “blue,” “gray,” “black,” etc., but hexadecimal colors provide you with hundreds of choices. In our <h1> example, I chose a shade of gray which has the hexadecimal code of “333333″. When indicating a hexadecimal code within your style sheet or HTML document, always precede this code with #.
You may have noticed that there are four fonts listed for the <h1> tag, and that one is in parentheses. Not every browser or every computer recognizes every font, so we have listed options. If the computer does not recognize “Trebuchet MS,” it will move onto Trebuchet. It will continue moving through the list until it recognizes a font. Sans-Serif is the most basic font.
Few font names include quotes in CSS. For example, “Trebuchet MS” always includes the quotes. Sans-Serif does not.
Paragraph Justification
The font characteristics were already defined in the body tag, so we do not need to do this with the paragraph tag; however, there is one paragraph element that we will address, today: justification. Justification is how a paragraph is lined up. Left-justification lines the paragraph up on the left side. Right-justification lines it up on the right side. Full-justification lines it up on both sides. You may also center a paragraph. Look at the following examples.
This paragraph is left-justified. Use the code “text-align: left;” and the whole paragraph will line up on the left.
This paragraph is right-justified. Use the code “text-align: right;” and the whole paragraph will line up on the right.
This paragraph is fully-justified. Use the code “text-align: justify;” and the whole paragraph will be fully-justified, meaning that the paragraph will line up evenly on both sides. Here is some extra text to fully demonstrate what full justification is. Notice how each line abuts each margin?
This paragraph is centered. Use the code “text-align: center;” and the whole paragraph will center.
In our sample web page, we will justify the paragraphs – simply “justifying” the paragraphs means fully justifying. The style sheet code for the <p> tag will look like this:
p {
text-align: justify;
} The <div> Tag
The <div> tag is widely used for making little tweaks through a web page. In “My Sample Webpage,” the <div> tag is used for the footer, where the copyright notice is placed. In this example, the <div> tag for the footer will be slightly smaller than the body font. It will be the same font family as the <h1> tag and will be italicized. Since the <div> tag may be used to define many elements, each <div> tag is given a name for whichever element it influences. We will call this div tag “footer.” To define this, “div” will be followed by a period and then then “footer” in the style sheet: div.footer.
div.footer {
font-family: "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
font-size: 12px;
font-weight: medium;
font-style: italic;
color: #333333;
}The font size for the footer is the same as for the body (12 px), but it looks smaller. The reason is that font sizes for different fonts may not be the same height and width. Trebuchet MS is smaller than Arial.
Previous: Customizing the Body Using CSS
Next: Floating Images with CSS
