CreateaFreeWebsite  with Responsive Web Design

General

 

9 Step Tutor

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.

You can add other interesting CSS features like borders , round corners and box-shadow.

Just for Fun

Round and Raised

This paragraph uses all 3: border, border-radius and box-shadow..

CSS:

text-align: left;
text-indent: 16px;
width: 33%;
margin: 0 auto; /*Center in container*/
padding 2% 2%; 
border: solid #efefef 1px; 
border-radius: 20px; 
box-shadow: 5px 5px 10px #0e0e0e

Same with inset box shadow

This paragraph uses all 3: border, border-radius and inset box-shadow.

CSS:

text-align: left;
text-indent: 16px;
width: 33%;
margin: 0 auto; /*Center in container*/
padding 2% 2%; 
border: solid #efefef 1px; 
border-radius: 20px; 
box-shadow: 5px 5px 10px #0e0e0e inset

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:

 

Free Tools We Recommend

Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried out RWD template kit? Download Template #402 - 6 Page Kit