Applying this to an internal or external stylesheet:

p {text-align: center;}

or this to inline styling:

<p style="text-align: center;">This is centered text</p>

will center your text.

But what happens if the dimensions of an element – let’s use a division for this demonstration – are set?

The code that creates this looks like this:

<div style="width: 200px; height: 100px; background: #ededed;">
<p>This division is set at a height and width of 100 and 200 pixel,
respectively, and it has a colored background to display its dimension.
</p></div>

In this example, overflow is no issue, there is nothing here to overflow. But what happens, if I add more content than this little box can hold?

My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.

My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.

My cup overfloweth! And this is where the overflow property comes into play. As you see, there is no overflow property applied to the above.

Geesh, I had to say that three times just to clear my overflow so one can actually read what is written. But it makes the point nicely – If you stick more content into a container than it can hold, you have a problem!

This is where the overflow property comes into play. As you see, there is no overflow property applied to the above, but the division is responding to the default, which is

div {overflow: visible; }

So I need to decide what to do with this overflow. One option is to hide it by applying ‘overflow: hidden’ to the CSS. In an internal or external stylesheet, the styling for our example division would then look like this:

div {
height: 100px;
width: 200px;
background: #EDEDED;
overflow: hidden;
}

And as we look at the result of this, it’s easy to realize what kind of problem we now have:

Obviously, this creates a whole new issue: Now, part of the text has disappeared, and unless folks look at the source – and who, with the exception of us geeks, would do that??? – they will never know what else you had to say.

Good news is that in addition to ‘visible’ and ‘hidden’, which we explored above, there are two additional values to chose from: ‘scroll’ and ‘auto’. ‘Scroll’ will create a horizontal AND a vertical scrollbar to the box, whether one is needed or not.

That doesn’t make much sense. Why put a scrollbar if there’s nothing to scroll to? But if you think that you would know, as you design your site, if your content will fit into its element or not, you are not 100% correct. Things may or may not fit when YOU look at them, but you can never be sure exactly how all the folks visiting have their settings adjusted and how things look to them. With that in mind

div {overflow: auto;}

is the perfect solution. A srollbar will appear if one is needed:

And not, if it’s not needed:

This horizontal rule

was created by the following inline CSS:

<hr style="color: #f00; background: #f00; width: 75%; height: 5px;">

It could also be styled in your internal or external stylesheet (which is usually the better approach):

hr {
     color: #f00;
     background: #f00; 
     width: 75%; 
     height: 5px;
}

Note that color AND background-color are applied. This is necessary, as some browsers use the background-color, others (IE) the color element to apply color to the rule.

However, there may be a situation, where inserting a separate html document into your page makes sense. And there’s an app for that: Iframes (aka inline frames). This code inserts a basic page into an html page:

<iframe src="http://www.killersites.com/">
<p>Your browser does not support iframes.</p>
</iframe>

At this point, there is absolutely no styling applied to the iframe, and it looks like this. Note the line regarding lack of browser support. Iframes are supported by all the major browsers, but it’s a good idea to add this for the odd browser that doesn’t.

While I am a strong supporter of using the HTML strict doctype and writing validating, standard-compliant code – iframes will not validate, which leaves us with two options: Either suck up the iframe-related validation errors or switch to HTML transitional doctype for the pages with iframes.

CSS gives you the power to dress your iframe up a bit. The following attributes are available:

• src (the URL of your iframe)
• longdesc (this specifies the URL of the iframe, but is hardly supported and can just as well be ignored)
• name (obviously, the name of your iframe)
• height (the height of your iframe)
• width (the width of your iframe)
• frameborder (1 or 0 – 1 is for yes, 0 for no)
• marginheight (determines the top and bottom margin of your iframe)
• marginwidth (determines right and left margins of your iframe
• scrolling (Do you want a scrollbar? Yes, no, or auto – ‘Yes’, is obvious. ‘No’ should not be used – what if someone does not see the entire content? If this is set to ‘no’, that viewer can never get to the hidden parts of what you’re inserting. ‘Auto’ lets the browser decide if one is needed and seems the best option here to me.)
• (align) – I’m just mentioning this for completeness; it has been deprecated. Don’t use it.

So this inline CSS:

<iframe src="http://www.killersites.com" 
name="Killersites.com" height="400px" width="700px" 
frameborder="0" marginheight="20" marginwidth="35" 
scrolling="auto">
<p>Your browser does not support iframes.</p>
</iframe>

Gives you that. And if you add a bit more CSS to the frame itself:

iframe {
 margin-left: 95px;
}

you can position the entire frame where you want it.

But pretty much every selector can hold a background image. On THIS PAGE, I have added the image to the html tag, the body tag, and the h1 and h2 tags (these are ‘selectors’) – like so:

body {
	background: url(bgimage.jpg) repeat-y right;
}
 
html {
	background: url(bgimage.jpg) repeat-y left;
}
 
h1 {
	background: url(bgimage.jpg) no-repeat right;
}
 
h2 {
	background: url(bgimage.jpg) no-repeat left #ffc;
	padding-left: 250px;
	height: 150px;
}
 
#wrapper {
	padding: 0 250px; 
/*I'm using the right and left padding of the wrapper to keep
the content off the images */
}

Note that I’m a bit lazy at the moment, and am using the same image for all four selectors. Taking a closer look at each of them, also shows a bit more how things work:

The html tag (image displayed on the left) repeats the flower all the way down the monitor, regardless of how much content there is. Resize your window and see what happens.

The body tag, where the image is displayed to the right, only shows the image as far as the content goes.

The h1 tag only shows as much of the image as the space its content is taking up.

The h2 tag also has some height added to it (exactly 150px, the height of the background image), so it does show the entire image. I’ve also added the background color to more clearly demonstrate the space that’s taken up by h2.

<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
 
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>

And, without any styling applied at all, that looks Like This.

We can affect the list item markers with some simple CSS and the list-style-property controls those. For unordered lists, we can chose between ul styles: disc, square, circle, or none – which looks like this, or between ol styles: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, upper-greek, lower-latin, upper-latin, armenian, or georgian, which looks like that.

Other than that, we can style the ul tag and the li tag. Anything added to the ul tag, affects the entire list, where properties applied to the li tag will affect the individual list items. So this CSS

ul {
	background: #ffe566;
	padding: 25px;
}
 
ol {
	background: #828772;
	padding: 15px;
}
 
ul li {
	background: #fc6;
	margin: 5px;
}
 
ol li {
	background: #9cc;
	padding: 10px;
        margin-left: 35px;
}

will create that.

(Note that I had to add the ‘ul’ or ‘ol’ in front of the ‘li’ so I could target specifically either list’s items. Had I just used ‘li’, any styling would have affected all of them regardless.) … example: adding a larger font size to ‘just li’.

This code:

<img src="image.jpg" width="350px" height="262px" 
alt="Rusty Stove in Luckenbach, Texas">

inserts a plain image into your page:

And if we add this to our CSS:

img {
border-color: #7d6b72;
border-style: solid;
border-width: 5px;
}

Then our image appears like this:

Actually, I would use shortcuts and write my CSS like this:

img {
border: 5px solid #7d6b72;
}

/*
This is a HIDDEN Comment!
*/

That’s all it takes – a ‘/*’ to start, and a ‘*/’ to end. A few handy applications for these hidden comments are:

h1 {
color: #000000; /* black - because I forget */
font-size: 2em;
}

Another handy use for the comments are to help define the structure, so things are easier to find:

/* ----------------- Generic Styles ------------------ */
 
.alignleft { float: left;}
.alignright { float: right;}
.clear { clear: both;}
 
p { margin: 0 15px 10px;}
 
h1, h2, h3 {
	font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
}
 
h2,  h2 {
	margin: 25px 20px 5px;
	color: #9e6548;
	font-size: 2em;
}
 
h3 {
	margin: 25px 0 5px;
	padding: 5px 25px;
	background: #9e6548;
	color: #f7efe3;
}
 
ul { margin-bottom: 25px; }
 
/* ----------------- The Header -------------- */
 
#header {
	background: url(pics/stove.jpg) #f7efe3 no-repeat top right;
	height: 200px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
 
#header h1 {
	color: #9e6548;
	font-size: 3em;
	padding: 35px 25px 0;
}
 
/* ------------- Top Navigation ------------------- */
 
#topnav {
	background: url(pics/nav.png) repeat-x;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	width: 679px;
	height: 45px;
	top: 55px;
	position: relative;
	padding-top: 13px;
}
 
#topnav li {
	display: inline;
	margin: 15px;
	}
/* ------------ content -------------- */
 
#content, #contentPage, #indexPage {
	float: left;
	width: 635px;
	padding: 35px;
}
 
#contentPage h2, #search h2 {
	margin-top: 0;
	margin-bottom: 0;
}
 
#contentPage h3, #search h3 {
	margin-bottom: 10px;
}
 
/* ----------- Sidebar ---------------- */
 
#sidebar {
	width: 205px;
	background: #9e6548;
	float: right;
	margin: 12px 0;
	color: #f7efe3;
	padding: 20px 10px;
}
 
#sidebar h1, #sidebar h2 {
	font-size: 1.4em;
	margin: 25px 5px 5px;
	color: #f7efe3;
}
 
/* ------------- footer ----------------------- */
 
#footer {
	clear: both;	
	height: 40px;
	font-size: .8em;
	background: #9e6548;
	color: #f7efe3;
	text-align: center;
}
 
#footer p {
	padding-top: 14px;
}

I’m sure you get the idea.

Fortunately, a little bit of CSS positioning can help us out here. Adding this to your CSS:

img {
	float: left;
}

will make the same thing look like this.

Now all we have to do is add some margin or padding to create a bit of space around the image

img {
	float: left;
	padding: 0 25px 25px 0;
}

And here you go.

However, if you use the image tag for your CSS, all the images in your site will float. Since this is a Basic CSS tip, I’ve used it for demonstration purposes only. A more practical approach would be to add a special class to the images you want to float.

<img class="floating" src="http://www.csstutorial.net/wp-content/uploads/2010/03/leia.jpg"
 alt="German Shepherd taking a nap">

and write the CSS like this:

img.floating {
	float: left;
	padding: 0 25px 25px 0;
}

The code for your basic, unordered list, is this:

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
</ul>

And it creates your Basic Unordered List.

In order to display a custom bullet image, we add this to our CSS:

ul {
         list-style-image: url(flower.gif);
}

Which gives us a list which looks like this. And you will notice a problem – my flower and my text just don’t line up properly. That is, they align at the bottom and not vertically centered as one would expect. I guess we could make the image smaller, but at that rate, it would have to be so small, nobody can see what it is, and we might as well use a standard circle. Or we can increase the font size, but that probably won’t work in relation to the rest of the design. Adding padding or margin would not help, either, as that adds to both the bullet image AND the text at the same rate, and neither would increasing the line height.

So while we wait and hope for some future development to address this issue, we have a way now to get this to look right. First, we get rid of our bullets altogether:

ul {
	list-style-type: none;
        line-height: 350%;
}

Note that I’m also increasing the line height, which may or may not be necessary, depending on your font size in relation to your image size. If you need line-height, you’ll just have to play around a bit until things look right. And then, we add a background image to our list:

li {
	background: url(flower.gif);
}

but if this is all we do, we end up with our flower across the entire line and with our text sitting on top of it. So we also need:

li {
	background: url(flower.gif) no-repeat center left;
	padding-left: 70px;
}

The ‘no-repeat’ tells our image to do exactly that, the ‘center left’ positions the image vertically centered and left aligned, and in order to get the text to move NEXT to the image, I’ve added some padding. And here you have a Perfectly Styled List Using Bullet Images, just not achieved quite the way you might have first expected.