CSS Tutorial » Killer CSS Tips and Tricks

Centering Text with CSS

Andrea Barnett — Tue, 29 Jun 2010 00:29:25 +0000

Centering text and other elements can easily be done with the CSS text-align property. It can be applied to a division, the p tag – pretty much any block-level element.

Applying this to an internal or external stylesheet:

p {text-align: center;}

or this to inline styling:

This is centered text

will center your text.

The CSS Overflow Property

Andrea Barnett — Sat, 26 Jun 2010 13:07:27 +0000

By default, elements in a website will expand to make room for whatever they contain. An empty division, for example, won’t show at all, but you can add 1 or 12 (whatever) paragraphs, and the division will be as big as it needs to be so everything inside is displayed.

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

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.

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?

Es war einmal ein kleines süßes Mädchen, das hatte jedermann lieb, der es nur ansah, am allerliebsten aber ihre Großmutter, die wußte gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hieß es nur das Rotkäppchen.

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.

This division is set at a height and width of 100 and 200 pixel, respectively.

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 division is set at a height and width of 100 and 200 pixel, respectively.

Styling a Horizontal Rule with CSS

Andrea Barnett — Sun, 20 Jun 2010 13:05:08 +0000

A quick and easy way to insert a dividing line into a website is with a horizontal rule, the hr tag.

This horizontal rule

was created by the following inline CSS:


="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.

Using the CSS z-index

Andrea Barnett — Sat, 19 Jun 2010 15:07:00 +0000

By default, the elements of a website line themselves up next to or under each other automatically. However, at times, the design requires them to overlap. When that happens, the stacking order becomes important, and the natural stacking order will need to be manipulated.

Without applying any CSS to the elements within the wrapper on the demo page here, this code:

<body>
<div id="wrapper">
<img id="aqua" src="aqua.gif" alt="aqua square">
<img id="green" src="green.gif" alt="green square">
<h1>The z-index and CSS -- When the Stacking Order Matters</h1>
<h2>All elements appear in their natural order as they are entered in the HTML</h2>
</div>
</body>

creates a page that looks like this. As you see, there is no point worrying about stacking order, the elements aline themselves automatically.

However, when positioning is applied and they start overlapping, we can change their stacking order if we need to. When it comes to z-index and the stacking order, one must note the following:

Z-index only works on relative or absolute positioned elements
The default z-index is zero

Here, I have added an absolute position to the h1 and a relative position to the green box to move them up and down-and-left, respectively.

h1 {
	position: absolute;
	top: 100px;
	left: 100px;
}
 
#green {
	position: relative;
	top: 50px;
	left: -50px;
}
 
h2 {margin-top: 50px;} /*This is here to push the line below the green box */

That means that the aqua image, which does NOT have positioning applied, sits on the default level of zero. Adding any kind of z-index to the element is useless – it won’t budge because of the lacking positioning. But we can move the text and the box either under (with a negative z-index) or on top (with a positive z-index) the not-positioned, zero-level aqua box.

#green {
	position: relative;
	top: 50px;
	left: -50px;
	z-index: -2;
}
h1 {
	position: absolute;
	top: 100px;
	left: 100px;
	z-index: -1;
}

creates this page.

Styling iframes with CSS

Andrea Barnett — Sat, 05 Jun 2010 19:23:41 +0000

If you still haven’t heard, hear it now: FRAMES ARE DEAD – well, technically, they are more like the undead – the zombies of webdesign. They should be gone and forgotten but refuse to stay buried. It’s much better not to use them.

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:

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

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.

All Caps with CSS

Andrea Barnett — Tue, 11 May 2010 10:40:49 +0000

While text in general is hard to read when written in all caps – and considered the electronic version of yelling – using CAPS for emphasize is a handy tool.

Headers are a place where capitalization is frequently used. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, just use CSS:

h1 {
text-transform: uppercase;
}

With this, everything that has the h1 tag applied, will appear in all caps.

Another interesting text-transformation property is "capitalize"

h1 {text-transform: capitalize;
}

With this, all your words will begin with a capital letter!

Multiple Background Images with CSS

Andrea Barnett — Sat, 08 May 2010 11:48:48 +0000

At times, it makes more sense to use background images than to insert them directly into the page. And while each element – like your body tag – can hold only one background image, they can be applied to several elements.

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.

Styling Lists with CSS

Andrea Barnett — Tue, 27 Apr 2010 23:50:03 +0000

We’ve already discussed navigation lists and list bullet images, but sometimes, a list is just a list. There are two types – the ordered list and the unordered list. The ordered list counts the items; the unordered list marks the individual items with bullets or other markers. The HTML is simple.

<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’.

Image Borders with CSS

Andrea Barnett — Sun, 18 Apr 2010 21:22:55 +0000

Sometimes, a website design benefits when images have frames – or borders. One way to get them is one image at a time, using a graphics program. But there is a much faster way – with CSS!

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;
}

3-Column, Fixed Width Layout with CSS

Andrea Barnett — Mon, 12 Apr 2010 00:06:35 +0000

The three-column layout is probably the second most common layout used for websites. There’s usually a header and a footer – and then some content, maybe a sidebar for navigation, a column in the middle with some content info, and another column with some additional stuff, whatever that may be. What you put inside your columns doesn’t matter – the way to achieve the 3-column layout stays the same.

So let’s start with our basic HTML to put all the parts on paper — or in our case, on line. This is the basic outline of what’s between the body tags:

<div id="wrapper">
 
	<div id="header"></div>
 
	<div id="column-left"></div>
 
	<div id="column-center"></div>
 
	<div id="column-right"></div>
 
	<div id="footer"></div>
 
</div>

For the entire HTML code – to include some filler content – see Basic HTML – No Styling. To see the code of the example page, just right-click and chose “View Source” from the drop-down. Most browsers offer that feature.

And of course what we get, is NOT a 3-column layout. It’s just one division on top of the next. That’s because we haven’t gotten to the ‘with CSS’ part of the title of this post yet. So let’s already!!

First, and just to make things easier to see, I will apply the fixed width and center my page. Here’s a post with the finer details Center-aligning a Website right here already. Here is the CSS that does that:

* {
	margin: 0;
	padding: 0;
}
 
#wrapper {
	width: 980px;
	background: silver;
	margin: 0 auto;
}
 
#header {
	background: black;
	color: white;
}
 
#column-left {
	background: red;
}
 
#column-center {
	background: yellow;
}
 
#column-right {
	background: purple;
}
 
#footer {
	background: green;
}

(Please note that you should really be using hex or rbg color codes, but for the purpose of this demonstration, color names are just easier to deal with.)

And it looks Like This. Now we just have to get our columns to act like columns and line up next to each other. There are different ways to do this, but I prefer to just float them all. So we’ll give them all a width and add float: left; to our three columns:

#column-left {
	width: 250px;
	float: left;
	background: red;
}
 
#column-center {
	width: 480px;
	float: left;
	background: yellow;
}
 
#column-right {
	width: 250px;
	float: left;
	background: purple;
}

At this point, it’s important to be aware of a special characteristic of floats – I picture them as balloons – they float above our heads, without taking up any actual space among us. So just as you can place a box under a balloon without the two affecting each other’s space, our footer will act like the floated divisions are not even there, and line itself up neatly right under the header – where we do NOT want it to be. So we have to give the footer a special set of instructions:

#footer {
	clear: both;
	background: green;
}

and now the whole thing looks Like This. And there you have it!

A few things can go wrong, and here is some easy, preliminary damage control: If you see your columns NOT all sitting next to each other, it’s likely because the total sum of all their widths, paddings, and margins combined is GREATER THAN the width of their containing wrapper. So put one of your columns on a diet and cut its width down some – and things should fall into place beautifully. And if not, ask for help at the Killersites Community.