Css style paragraphs

The text that displays in the scrollable area is completely up to you.  You can either have it load text that is found in the same page or load text from an external location.  Each agreement would be a separate page but all loaded in the same container.  You can then apply inline CSS to make certain text bold or you can apply a global CSS to your agreement pages and just make sure you assign your different attributes.

There are many examples of this available on the web:
http://www.domedia.org/oveklykken/css-div-scroll.php
http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

TonyReba, do You have any piece of code to post here to see what have You got so far?

Regards

I've attached a sample for you.

Basically what you need to do to get the scrollbar going is:
1) Use a div and set the height of the div, then add the style overflow: scroll. e.g. <div class=".." style="height:600px;overflow:scroll">
2) To get an item to be bold, you need to set it's font-weight style. E.g. font-weight: bold;

See the attached for the example.
tmp.html

Try this code:

<style>
.contentBox {
	display:block;
	border-width: 1px;
	border-style: solid;
	border-color: 000;
	padding:5px;
	margin-top:5px;
	width:200px;
	height:50px;
	overflow:scroll
	}
</style>
<div class="contentBox">
Add the text for the content here.
</div>

Select allOpen in new window

hi guys , thanks for the feedback so far, I do have the scrolable text but I want to avoid inline styling each section via css

here isa piece of my code

<div style="overflow:auto; height:450px; width:600px;" id="Agreement_Text">
  
   <span style="text-decoration: underline"><b>
    1. Effective Date and Acceptance Date</b></span> 
        <br />
        The effective date of this Mutual 
    Agreement to Arbitrate Claims (&#8220;Agreement&#8221;) is August 1, 2010. If Claimant 
    receives notice of this Agreement prior to commencing work at Company, 
    Claimant&#8217;s commencement of work at Company shall constitute acceptance of the 
    terms and conditions of this Agreement. In that situation, the date of 
    Claimant&#8217;s commencement of work shall be the acceptance date. For any other 
    Claimant, Claimant&#8217;s continuation of work at Company after three days have 
    passed from the date Claimant receives notice of this Agreement shall constitute 
    acceptance of the terms and conditions of this Agreement. In that situation, the 
    fourth day after receipt of this notice shall be the acceptance date. 
        <br />
        <br />
        For Claimants who commence or continue employment at Company as of their respective 
    acceptance date, Company and Claimant mutually agree to resolve Covered Claims 
    which occur on or after the effective date according to the terms and conditions 
    of this Agreement.
       <br />
       <br />
     <span style="text-decoration: underline"><b>
     2. Definitions 
        <br />

Select allOpen in new window

Add this to your stylesheet:

  :scroll {

    color: rgb(255, 0, 102);

    font-weight: bold;

    }



And the Attatched where the text goes. Replace the text

<div id="scroll"><span style="text-decoration: underline"><b>
    1. Effective Date and Acceptance Date</b></span> 
        <br />
		The effective date of this Mutual 
    Agreement to Arbitrate Claims (&#8220;Agreement&#8221;) is August 1, 2010. If Claimant 
receives notice of this Agreement prior to commencing work at Company, 
Claimant&#8217;s commencement of work at Company shall constitute acceptance of the 
terms and conditions of this Agreement. In that situation, the date of 
Claimant&#8217;s commencement of work shall be the acceptance date. For any other 
Claimant, Claimant&#8217;s continuation of work at Company after three days have 
passed from the date Claimant receives notice of this Agreement shall constitute 
acceptance of the terms and conditions of this Agreement. In that situation, the 
fourth day after receipt of this notice shall be the acceptance date. 
</div> 

Select allOpen in new window

Hold on, I messed that up.

You may need to add some padding to this, if so just add it on a line before the float: