CSS TUTORIAL 5 – PRACTICE - TEXT FORMATTING IN ACTION
In this example, you will format headings, lists, and paragraphs of text using CSS's powerful formatting options.
In your web browser open the fileex5\text.html
It is not much to look at - just a collection of headings, paragraphs and a lonebulleted list - but you will turn it into something far better looking.
In your web page editing program, open ex5\text.html.
Start by adding an internal style sheet to this file - which will contain at the start the CSSreset styles that we used earlier.
After inserting the opening and closing <style> tags, open the reset.css file and copy and paste these styles between the opening and closing tags.
Preview the page text.html in a browser.
Now create a style to define some basic properties for the body tag. Since other tags inherit the properties of this tag, you can set up some basic text properties like font, colour and font size for other tags to use as their starting point.
For the body style, set the following properties: text colour is #002D4B; the font family is Arial, Helvetica, sans-serif; and the font size is 62.5%.
Note: Why set the page’s base font to 62.5%? It just so happens that 62.5%times 16pixels(the normal size of text in most web browsers) equals 10pixels. With 10pixels as a starting point, it is easyto compute what other text sizes will look like on the screen. For example, 1.5em would be 1.5 × 10 or 15pixels. 2em is 20pixels, and so on - easy multiples of ten.
Preview the page text.html in a browser.
The text on the page changes colour and font…it also is really small. Do not worry, that is the 62.5% font size. This is just the starting point for all text, and you will easily increase the size of text by defining em sizes for the other tags.
Formatting the Headings and Paragraphs
Now that the basic text formatting is done, it is time to refine the presentation of the headlines and paragraphs.
Return to your HTML editor and the text.html file. At the end of the internal style sheet add a descendant selector #main h1. This provides more specific direction than abasic HTML tag selector. In this case, the selector tells the web browser “applythe following formatting to any <h1> tag inside another tag with the ID namemain.” If you look at the page’s HTML, you will see that there is a <div> tag withan ID of main (<div id="main">).
It is very common in CSS-based designs to group HTML tags inside <div> tags. You can then position individual div tags to create columns and other complex page layouts. It is also common to use descendentselectors like this one to pinpoint your formatting choices by affecting just the tags in certain areas of the page.
Set the following CSS properties for the #main h1 descendant selector.
h1 {
This style formats all <h1> tags on the page.
PressEnter (Return), and then type these two CSS properties:
font-size: 2.4em;
color: #14556B;
You have just changed the colour of the <h1> tags and set their size to 2.4em, which for most browsers (unless the visitor has tweaked his browser's font settings) is 24pixels tall.
Finally, complete this style by pressingEnter (Return) and typing the closing brace.
The completed style should look like this:
h1 {
font-size: 2.4em;
color: #14556B;
}
Save the file and preview it in a web browser.
Next, improve the appearance of the other headings and paragraphs.
Return to your HTML editor and the text.html file. Click after the closing brace of the h1 tag style and add the following two styles:
h2 {
font-size: 1.5em;
color: #993;
}
p {
font-size: 1.2em;
text-indent: 2em;
line-height: 150%;
}
The p style introduces the text-indent property, which indents the first line of a paragraph, and the line-height property, which sets the spacing between lines. A percentage of 150 percent adds a little more space between lines in a paragraph than you would normally see in a web browser. This gives the text a lighter, airier quality and makes the sentences a little easier to read.
Save the page, and open it in a web browser to preview your work.
The page is coming together nicely, but the space between paragraphs and between the headings and the paragraphs is too distracting. You will tighten it up a bit next.
Return to your HTML editor and the text.html file. Locate the h2 tag style you created earlier, and add the margin-bottom property.
The style now looks like this:
h2 {
font-size: 1.5em;
color: #993;
margin-bottom: 5px;
}
This addition reduces the gap between the bottom of every <h2> tag and the next element on the page to 5 pixels. It also provides a consistent value, since the amount of space added below <h2> tags varies from browser to browser. Next, you control the paragraphs.
Edit the <p> tag style by adding the following two properties to the end of the style:
margin-top: 0;
margin-bottom: 5px;
The margin-top property controls the space above the paragraphs. In this case, you have completely eliminated the space above each paragraph. To add a little space between each paragraph, use the margin-bottom property.
Save the page, and open it in a web browser to preview your work.
Formatting Lists
Notice that the page you are working on has two lists: a bulleted list of the different sections of the site in the left sidebar, and a bulleted list of three items in the main body copy. You will use descendent selectors to target and format each list differently.
Return to your HTML editor and the text.html file. Click at the end of the closing brace of the <p> tag selector, press Enter (Return) to create a new line, and then type:
#content ul {
The main content of the page is contained in a <div> tag with an ID selector named content. You are now creating a rule that you want to apply only to bulleted lists (<ul> tags) that appear inside the main content area. You can achieve this with the descendent selector #content ul, which simply instructs the web browser to apply this style to any <ul> tag that appears inside a page element with an ID of content. In other words, bulleted lists that appear elsewherelike the one in the left-hand sidebar will not be affected by this style.
Press Enter (Return), and then type:
font-size: 1.2em;
list-style-type: square;
This sets the font size for the text inside the bulleted list to 1.2em. The second line sets the bullet style to squaredisplaying a square bullet icon instead of the usual round bullet found in most web browsers.
Press Enter (Return) and then type the closing brace to complete the style. The finished rule should look like this:
#content ul {
font-size: 1.2em;
list-style-type: square;
}
Finally, add a little bit of space between each bulleted item using the <li> (list item) tag's bottom-margin property.
Press Enter (Return), and then add the following style:
#content li {
margin-bottom: 5px;
}
Again, you are using a descendent selector to target just the <li> tags that appear inside the main content area of the page. Next, work on the list in the sidebar.
Press Enter (Return) to create a new blank line, and then add the following style:
#mainNav ul {
font-size: 1.2em;
list-style-type: none;
}
Here, you are using a descendent selector to target lists that appear inside the sidebar (a <div> tag with the ID of mainNav). The list-style-type property not only lets you change a bullet from a circle to a square, but can also completely eliminate any bullet.
Save the page, and open it in a web browser to preview your work.
If you look closely, you will notice that the list in the sidebar is indented quite a bit on the left. Web browsers normally indent lists, so you have to add a couple of CSS properties to eliminate that extra space.
Return to your HTML editor and the text.html page. Add a line below the list-style-type property you just added, and then type:
margin-left: 0;
padding-left: 0;
Due to a difference in the way browsers display lists, you need to set the margin and padding properties to 0.
Lastly, centre the text, and turn it all into uppercase letters.
Add the last two properties shown below. The finished style should look like this:
#mainNav ul {
font-size: 1.2em;
list-style-type: none;
margin-left: 0;
padding-left: 0;
text-transform: uppercase;
text-align: center;
}
Finally, to finish up, add a bit of space between each item in the sidebar.
Add this style below the #mainNav ul style you just created:
#mainNav li {
margin-bottom: 10px;
}
Save the page and preview it in a web browser.
Adding the Finishing Touches
For the last bit of design, pull out all the stops and incorporate several text formatting properties to alter the look of the author's 'byline'.
Return to your HTML editor and the text.html file.
First, you will mark up one of the paragraphs with a class, so you can create a specific style for the authors' credits.
Locate the paragraph tag with the byline<p>By Jean Graine de Pomme </p>. Add a class attribute to the <p> tag:
<p class="byline">By Jean Graine de Pomme </p>
Now you can create a class style to target that particular paragraph.
Click at the end of the closing brace of the #mainNavli tag selector you have just added, press Return to create a new line, and then type: .
.byline {
This is the beginning part of a class style. It just needs a few properties and a closing brace.
Add the following three properties and the closing brace to create the class style by typing the following:
color: #73afb7;
font-size: 1.5em;
margin-bottom: 10px;
}
By now, you should feel comfortable with these properties, which set the size and colour of the paragraph, as well as adjust the space below it. Next, make the text stand out in bold.
Add a new line below the margin-bottom property of the .byline style, and then type:
font-weight: bold;
Now format the style in small caps and spread out the letters a little to give the 'byline' a formal and regal look that makes it stand out from the page.
Add another line after the font-weight property you just added and add two more properties:
letter-spacing: 1px;
font-variant: small-caps;
If you preview the page now, you will notice that the byline's indented the same amount as the other paragraphs. Due to the cascade, the byline (which is a <p> tag) gets that formatting from the <p> tag style's text-indent property. To get rid of that indent, you need to override the setting in the class style.
Add a text-indent property to the .byline style and set its value to 0. The final style should look like this:
.byline {
color: #73afb7;
font-size: 1.5em;
margin-bottom: 10px;
font-weight: bold;
letter-spacing: 1px;
font-variant: small-caps;
text-indent: 0;
}
Save the file and preview it in a web browser.
You have explored some of the text-formatting properties offered by CSS, and turned plainHTMLtext into an attractive, 'attention-getting' design.
A - CSS Tutorial 5 - Text formatting in action.docVersion 1
Page 1 of 13