How do you add a box or background in HTML?

[LDFerguson]

I'm adding a Twitter widget to the website, using HTML code provided by Twitter. Anyone know what additional lines I need to add to get a box around this area or even a background colour, just to make it a bit more noticeable on the page?

Thanks.

This is the code so far: -

<div id="twitter_div">
<h2 class="sidebar-title">Latest News via Twitter</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/ferga_com" id="twitter-link" style="display:block;text-align:right;">Follow Ferguson & Associates on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_ti...llback=twitterCallback2&amp;count=5"></script>

 

[Guest128]

Using CSS would be the best method. For the background color, use something like

background-color: #000080;

For the border, something like

border: 1px solid blue;

You can put those on the div with ID twitter_div to apply it to the entire contents, or to inner ones if you dont want it on the whole thing

 

[LDFerguson]

Sorry - you've lost me on the CSS thing. (Not an IT person - just an amateur fiddler.) Can you show, in idiot language, what extra lines I have to add for, say, a border?

Thanks.

 

[Guest128]

CSS is cascading style sheets. Its used to layout HTML pages. You are already using it in the HTML you provided with the style attribute.

To give a background color and a small border, add the following to the div with ID twitter_div:

style="background-color: #66FF99; border: 1px solid blue"

So it reads;

<div id="twitter_div" style="background-color: #66FF99; border: 1px solid blue">
<h2 class="sidebar-title">Latest News via Twitter</h2>
<ul id="twitter_update_list"></ul>
<a href="http://twitter.com/ferga_com" id="twitter-link" style="display:block;text-align:right;">Follow Ferguson & Associates on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_tim...nt=5"></script>


The HEX number for the background colour is available here, so you can change the colour to whatever you want
This may not be exactly what you are after, but its a start....

 

[LDFerguson]

Thanks very much. Just what I was looking for.

 

[Guest128]

Just checked it out on your website, looks good!