CSS Paragraph Styles
Let's create some basic paragraph styles using CSS; how to style a paragraph is a must learn for even the most basic webpage.
Basic Files Needed
First create 2 files, an .html and a stylesheet file ...
Copy and paste (Bullet point examples 2 and 3) each of these into their own notepad file, here's the link:
HTML file and the css style sheet template
Name the first file ( at bullet 2) anything you want with an .html extension. Name the style sheet ( at bullet 3) "style.css".
This will be our basic set up to test CSS examples ie.. learning CSS rules, selectors, declarations ( properties:values) etc...
Add Paragraph Tags to .html file
Let's first look at how to style the basic <h1> tag
In your HTML file, place your opening and closing paragraph tags like this , <p></p>, directly after the body tag. Once you do this we will not touch the HTML...all paragrapgh styles will be generated from the style sheet.
Add Bogus text to paragraph
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
Create paragraph rule in style sheet
Now, add this code to your style.css file.
p { }
Of course when you display your web page there will be no visible "styles" happening since there are no declarations in our p selector.
Now the fun starts...we will gradually add properties and values to our style sheet- then - re-open our web page to see how each new style change effects the look of the display...
It's important that you make the style sheet change, save, view the results in he .html web page, make the next addition to the style sheet, save, view the results etc... This is the best way to learn...you'll see...
p style examples
Pop these styles in - one at a time of course - to your style.css file and see the progressive results...cool eh?
p { font:verdana; }
p { font:verdana; font-size:10px; }
p { font:verdana; font-size:10px; background:#eee; }
p { font:verdana; font-size:10px; background:#eee; border:1px solid #ccc; }
p { font:verdana; font-size:10px; background:#eee; border:1px solid #ccc; text-align: left; }
p { font:verdana; font-size:10px; background:#eee; border:1px solid #ccc; text-align: left; width:200px; }
p { font:verdana; font-size:10px; color:#fff; background:#000; border:3px solid #ccc; text-align: left; width:200px; line-height:20px; padding:8px; }
p { font:verdana; font-size:10px; background:#eee; border:1px solid #ccc; text-align: left; width:500px; line-height:20px; padding:8px; letter-spacing:3px; }
Add multiple paragraphs - stack'em up
Of course in the real world you'll want/need consecutive paragraphs to break up your pages...like this - copy and paste this into your .html page.
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec id lectus id sem venenatis iaculis. Vivamus dui tellus, faucibus sed, adipiscing lacinia, cursus vel, odio. Mauris quam. Aenean ac libero sed ligula facilisis tristique.</p>
p style summary
- The paragraph element will grow as tall as the content in this case
- Try removing the background color or changing it all together
- Vary all the properties and values then view the changes
- There are many more styles available - consult a good CSS manual for ideas
So that's just a few variations of basic CSS text rules applied to the <p> tag. There's much more to learn so stay tuned...
Review the web building process: build web site free
Was this helpful? Leave a comment...
Please leave your comment...name or email is not required. If you leave your email we WILL respect your privacy and not spam you. We may update you occasionally with value added info related to web building, web design, CSS, HTML. Thanks!