Archive for the ‘CSS Basics’ Category

Centering Text with CSS

Tuesday, June 29th, 2010

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.

read more

The CSS Overflow Property

Saturday, June 26th, 2010

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.

read more

Styling a Horizontal Rule with CSS

Sunday, June 20th, 2010

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

read more

Styling iframes with CSS

Saturday, June 5th, 2010

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.

read more

Changing the Font to All Caps with CSS

Tuesday, May 11th, 2010

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.

read more

Adding more than one Background Image with CSS

Saturday, May 8th, 2010

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.

read more

Styling Lists with CSS

Tuesday, April 27th, 2010

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.

read more

How to Add Borders to Images with CSS

Sunday, April 18th, 2010

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!

read more

3-Column-Layout

Monday, April 12th, 2010

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.

read more

CSS Comments

Thursday, April 8th, 2010

Comments in a stylesheet are a good idea. Often, things that are obvious as you write them, make no sense a week or even years later – or to somebody else. So it can be very helpful to include explanations. However, we don’t want to browser to read and render those, as they are not meant to be displayed on the webpage, so we have to hide them.

read more