The Naked HTML Tutorial

Page 3 - Styling a Naked HTML Box With a DIV-Structure

What have we achieved so far in this tutorial?

  • We have created a Naked HTML box
  • We have pasted the code snippet in our HTML file
  • We are familiar with CSS

What's next? Styling of course!

When the box is included in your HTML by pasting the code snippet there are no CSS styles defined by default!

However, your website might have standard CSS styles that apply for the box. Thus it can happen that your box looks quite okay even before you have styled it.

Be aware: the following instructions and code examples are for DIV structured boxes only...

When creating the box you can choose between DIV or TABLE structure. We recommend using the DIV structure if possible. Therefore we have written this tutorial for it in particular.


Example Box

That's what your Naked HTML box could look like.

Try Your Luck at the Caribbean's Top Casino and Gaming Destinations

05/23/14 2:15 am

Whether your game is blackjack, craps, roulette, or Caribbean Stud Poker, you'll find plenty of action in the islands -- well, some of the islands, anyway. Gambling isn't legal everywhere in the Caribbean, but there are a number of islands with multiple casinos competing for your vacation gambling dollars -- and offering the opportunity to pay for your whole trip with one lucky turn of the cards: ... Read Full Post

Dining Around San Juan During Saborea

05/20/14 10:00 pm

Dining in San Juan goes way beyond mofongo -- which is not to denigrate Puerto Rico's national dish in any way but merely to point out that this Caribbean capital city is a foodie favorite that's as diverse as it is innovative. During the recent Saborea food festival, writer Vanessa Query took the opportunity to indulge in a few local culinary hot spots helped by celebrity chefs who lent their talents to Saborea as well... ... Read Full Post

Stop at the Sweetest Shop in San Juan

05/14/14 3:12 am

A day without chocolate is like a day without sunshine, and we don't have too many of those in the Caribbean. The next time you find yourself strolling around Old San Juan, be sure to pop into the Cortes CocoBar for a grilled chocolate cheese sandwich or something else dark and sweet... ... Read Full Post

HTML View Of The Example Box

The following HTML code repesents the box above from the coding perspective.

<div id="rssincl-box-30158">
 
	<div class="rssincl-head">
		<p class="rssincl-title">
			<a href="http://gocaribbean.about.com/" target="_blank">
				This is a Test Box
			</a>
		</p>
	</div>
 
	<div class="rssincl-content">
		<div class="rssincl-entry">
			<p class="rssincl-itemtitle">
				<a href="http://gocaribbean.about.com/b/2009/09/04/erika-going-going.htm" target="_blank">
				Erika Going, Going ...
				</a>
			</p>
			<p class="rssincl-itemdate">
				09/03/09 6:45 pm
			</p>
			<p class="rssincl-itemdesc">
				Tropical Storm Erika ...
			</p>
 
			<div class="rssincl-clear"></div>
		</div>
 
		<div class="rssincl-entry">
		<p class="rssincl-itemtitle">
			<a href="http://gocaribbean.about.com/b/2009/09/03/airtran-eyes-new-caribbean-routes.htm" target="_blank">
			AirTran Eyes New Caribbean Routes
			</a>
		</p>
		<p class="rssincl-itemdate">
			09/03/09 7:42 am
		</p>
		<p class="rssincl-itemdesc">
			AirTran Airways is seeking government permission ...
		</p>
		<div class="rssincl-clear"></div>
		</div>
 
	</div>
</div>

Download Example Files

For a better understanding you can >> download some example files <<.
Just extract them to a new folder on your desktop and open "index.htm" in your browser AND in your HTML editor.

Where to Put The CSS Code

There are several ways to set CSS styles in your HTML document. One of them is to put them inside a certain STYLE tag in the HEAD of your document:

<html>
<head>
    <style type="text/css">
    <!-- put your styles in here -->
    </style>
</head>
<body>
    <p>Your page content in here</p>
    <!-- Your code snippet from rssinclude.com should be pasted in here too -->
</body>

Possible CSS Selectors

The HTML code delivered by rssinclude.com contains IDs and CLASSes that can be used as selectors in CSS. This is a list of possible class definitions for the Naked HTML box DIV-element with the id "rssincl-box-30158":

<style type="text/css">
    /* The box container div with id 30158 */
    div#rssincl-box-30158 { }
 
    /* All elements inside the box container */
    div#rssincl-box-30158 *{ }
 
    /* The div around the title */
    div#rssincl-box-30158 div.rssincl-head { }
 
    /* The <p> which contains the title of the box */
    div#rssincl-box-30158 div.rssincl-head p.rssincl-title,
 
    /* The <a> tag wrapped around the title (if used) */
    div#rssincl-box-30158 div.rssincl-head p.rssincl-title a { }
 
    /* The div around the content elements / news items */
    div#rssincl-box-30158 div.rssincl-content {}
 
    /* The div around each news item */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry { }
 
    /* The last news itemd div */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-last { }
 
    /* The <p> tag containing the news item title */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemtitle {}
 
    /* The <a> tag wrapped around the news item title */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemtitle a { }
 
    /* The <p> tag containing the item description, and all elements inside this tag */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdesc,
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdesc *{}
 
    /* The <p> tag containing the item date, and all elements inside this tag */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdate,
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdate *{}
 
    /* If there are images inside the description, you can style them as well */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry div.rssincl-itemdesc img {}
 
    /* There is a clearer div which you can set to "clear:both"... */
    div#rssincl-box-30158 div.rssincl-content div.rssincl-entry div.rssincl-clear {}
</style>

The CSS Code Of The Example Explained

As you may have noticed the class definitions in the code above haven't got any styles yet.
Here's a bit of example CSS code with styles already set. We've explained every CSS class a little bit. You can copy and paste the code into your HTML document to try it. Attention: Please be sure to replace the id 30158 with the id of your own box!

<style type="text/css">
	/* The box container div with id 30158 */
	div#rssincl-box-30158 {
		width: 350px; /* sets the width of your RSSbox */
		overflow-x: auto; /* sets a scrollbar if the content is larger than 350px */
	}
 
	/* All elements inside the box container */
	div#rssincl-box-30158 *{
		font-family: Arial, Helvetica, sans-serif; /* sets the font family for all elements within the RSSbox */
		text-align:left; /* sets text-align to left for all elements*/
		margin:0; /* sets margin to zero for all elements*/
		padding:0; /* sets padding to zero for all elements*/
		line-height:110%; /* sets the line-height a bit greater than normal*/
		clear:both; /* no floating in general */
	}
 
	/* The div around the title */
	div#rssincl-box-30158 div.rssincl-head {
		padding:10px; /* sets the padding to 10px*/
                /* set the url to a gradient background image */
		background-image:url('http://www.rssinclude.com/assets/web/images/tutorial/rssinclude_head_bg.gif');
		background-repeat:repeat-x; /* repeats the background image along the x-axis only*/
		background-color: #D93D3D; /* general background color when background image not shown*/
	}
 
	/* The <p> which contains the title of the box, and the <a> tag wrapped around the title (if used) */
	div#rssincl-box-30158 div.rssincl-head p.rssincl-title,
	div#rssincl-box-30158 div.rssincl-head p.rssincl-title a {
		font-size: 18px; /* sets the font size of the title to 18px*/
		font-weight:bold; /* and bold of course */
		color: #FFF; /* colors the title white */
		text-decoration:none; /* no underline */
	}
 
	/* The div around the content elements / news items */
	div#rssincl-box-30158 div.rssincl-content {}
 
	/* The div around each news item */
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry {
		padding:10px; /* padding to 10px again */
                /* url to gradient background-image */
		background-image:url('http://www.rssinclude.com/assets/web/images/tutorial/rssinclude_item_bg.gif');
		background-repeat:repeat-x; /* image repeats along x-axis only */
		background-color: #F8F8F8; /* background-color when image is not shown */
		border-bottom:1px solid #C0C0C0; /* set grey border bottom */
		border-left:1px solid #C0C0C0; /* set grey border left */
		border-right:1px solid #C0C0C0; /* set grey border right */
	}
 
	/* The <p> tag containing the news item title */
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemtitle {
		padding:5px; /* padding of title to 5px*/
		padding-left:25px; /* left padding to 25px because of background image (arrow) */
                /* set the url to a background image  */
		background-image:url('http://www.rssinclude.com/assets/web/images/tutorial/rssinclude_arrow.gif');
		background-repeat:no-repeat; /* don't repeat it */
		background-position:0px 3px; /* positioning of background image*/
		margin-bottom:6px; /* margin below the item title*/
	}
 
	/* The <a> tag wrapped around the news item title */
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemtitle a {
		font-size: 14px; /* font size to 14px */
		font-weight:bold; /* bold */
		text-decoration:underline; /* lets it look like a link */
		color: #333333;	 /* dark grey */
	}
 
	/* Set a color for rolling over the item title*/
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemtitle a:hover{
		color:#CC0101; /* change font color to red on rollover */
	}
 
	/* The <p> tag containing the item description, and all elements inside this tag */
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdesc,
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdesc *{
		font-size: 12px; /* general font size 12px */
		color: #333333; /* dark grey */
	}
 
	/* The <p> tag containing the item date, and all elements inside this tag */
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdate,
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdate *{
		font-size: 10px; /* set date smaller than normal text */
		color: #333333; /* dark grey again */
	}
 
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry p.rssincl-itemdate {
		margin-bottom:6px; /* a bit of space below the date*/
	}
 
	/* If there are images inside the description, you can style them as well */
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry div.rssincl-itemdesc img {
		border:0px solid #FFF; /* no border for images inside description tag */
	}
 
	/* There is a clearer div which you can set to "clear:both"... */
	div#rssincl-box-30158 div.rssincl-content div.rssincl-entry div.rssincl-clear {
		clear:both; /* important when using "float" for item elements */
	}
</style>