|
|
Now that you know how to format paragraphs, what about groups of paragraphs? Suppose, for example, that you wanted to indent an entire section of text and place a border around the section. Although you can accomplish the indent by using styles with paragraph tags, the unified border is harder to do. For example, consider the following code, which uses styles and paragraph tags:
The output of this code is shown in Figure. Note how each paragraph is surrounded by its own border, which is not what you wanted.
Adding some formatting, such as borders, to paragraph tags causes the formatting to distinctly appear around individual paragraphs.
This is where the division tag (<div>) comes in handy. The <div> tag is used to delimit divisions of a document, which can include several paragraphs or other block elements. Instead of defining a style for the paragraph tag, define it as an unattached class (one without a specified element) and use it with the <div> tag, as in the following code:
Note the output of this code in Figure .
Moving the border definition to the <div> tag causes the border to appear around the entire division instead of around the individual pieces.
Tip
Note that the border in Figure appears at the margins of the document, not at the indent of the paragraphs it surrounds. This is because the style specifies padding-left and padding-right, which affects the spacing between the parent element (the border) and its children (the paragraphs). To indent the border itself, you would need to specify values for margin-left and marginright.
Keep in mind that the <div> tag can be used to group combinations of block elements as well—it is not limited to paragraph blocks. For example, you could easily have included a headline, horizontal rule, or other block element(s) in the paragraphs in the last example, and the border would have been rendered around them all.
|
|
HTML Related Tutorials |
|
---|---|
XML Tutorial | HTML 4 Tutorial |
HTML 5 Tutorial | Java Tutorial |
CSS Tutorial | XHTML Tutorial |
Html Tutorial
Introducing The Web And Html
What Goes Into A Web Page?
Starting Your Web Page
Lines, Line Breaks, And Paragraphs
Lists
Images
Links
Text
Special Characters
Tables
Page Layout With Tables
Frames
Forms
Multimedia
Scripts
Introducing Cascading Style Sheets
Creating Style Rules
Fonts
Text Formatting
Padding, Margins, And Borders
Colors And Backgrounds
Tables Table Styles
Element Positioning
Defining Pages For Printing
Javascript
Dynamic Html
Dynamic Html With Css
Introduction To Server-side Scripting
Introduction To Database-driven Web Publishing
Creating A Weblog
Introduction To Xml
Xml Processing And Implementations
Testing And Validating Your Documents
Webdevelopment Software
Choosing A Service Provider
Uploading Your Site With Ftp
Publicizing Your Site And Building Your Audience
Maintaining Your Site
The Web Development Process
Developing And Structuring Content
Designing For Usability And Accessibility
Designing For An International Audience
Security
Privacy
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.