The Paragraph Tag
The paragraph tag <p></p>
is used to place paragraphs in your pages. Does require a closing tag. </p>
Setting Paragraph Attributes
Attributes for paragraphs can be set using embedded, linked or inline style sheets.
p { font-family: Arial , sans-serif; font-size : 16px; font-weight : normal; text-align :left; text-indent : 1em }
This style sheet would set our paragraph text to 16 pixel Arial, set alignment of text to the left and indent the paragraph 1 em(16px).
You can also set the color of text, weight of text, style of text, line spacing, width and add top, right, bottom and left padding.
Use the display: block property and you can add other interesting CSS features like borders , round corners and box-shadow.
This paragraph uses all 3.
CSS:
display:block; padding 20px 20px; border: solid #efefef 1px; border-radius: 20px; box-shadow: 5px 5px 10px #0e0e0e
Same using inset box shadow
This paragraph uses all 3.
SEE: Round corners and Box shadow under Category CSS.
Using Inline Style Sheets
The appearance of text within a paragraph can be changed using inline style sheets.
Span Tag
The span tag <span></span>
is a useful tool for changing font appearance within a paragraph. The span tag should only be used as an inline tag.
This code would produce the results shown here, when using the span tag to change the size of the text to 28px.
<p>This code would produce <span STYLE="font-size :28px">the results shown here</span>, when using the span tag to change the size of the text to 28px.</p>
It could also be used to change the color of the text.
<p>It could also be used to change the <span STYLE="color :#FF0000">color</span> of the text.</p>
Other inline tags that can be used to change text within a paragraph are:
<em></em>
This is emphasized text.<strong></strong>
(to emphasize importance of text)<b></b>
(to thicken text to draw attention)<sub></sub>
This is subscript text.<sup></sup>
This is superscript text.<i></i>
This is italic text.<u></u>
This is underlined text.