CSS Font Color

In this ultra simple nerd-free CSS tip, I will show you how to change the color of your fonts with CSS. Check out the samples: h2 { color: green; }   h4 { color: #9000A1; }   p { color: rgb(0, 210, 87); } Comments: You are able to specify the color in either: by Named color by Hexadecimal by RGB Thanks,...

Read More

CSS Font Sizes

In this tip, you will learn how to specify a font’s size with CSS. Being a practical nerd, I will not waste time talking about all the various methods for declaring font sizes with CSS … instead I will concentrate on the two widely used ways and then briefly explain the differences. First, the two main methods: By pixel By em What is the difference between and EM and a pixel? Pixels are an absolute measure of a font’s size and an EM is a relative measure – that means the actual pixel size of the font (as they appear on screen) set with...

Read More

How to Style Headings with CSS

Different browsers have different default styling for headings – the h1, h2, h3, etc. tags. (Default Heading Styling). However, with a little bit of CSS, we can style them any way we like. If we want to apply certain styles to all our headings – for example margins to create a larger space above the header than between it and the following paragraph, write the CSS like this: h1, h2, h3, h4, h5 { margin-top: 35px; margin-bottom: 0; } (See the Styled Margins.) Also note that the bottom margin which is set as zero, does NOT have a unit...

Read More

How to Style Fonts with CSS

The FONT tag is dead. Long live CSS! Please help spread the word, too many people STILL have not gotten that memo and merrily use their deprecated font tags (along with the table-based layouts and improper doctypes). But now we all know – no more excuses. The easiest way to apply a font style to your website, is right there with your body tag: body...

Read More

Adding Comments to CSS

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. /* 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...

Read More

3-Column, Fixed Width Layout with CSS

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

Read More

Image Borders with CSS

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

Read More

Styling Lists with CSS

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

Read More

Multiple Background Images with CSS

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

Read More

All Caps with CSS

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

Read More

Styling iframes with CSS

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

Read More

Styling a Horizontal Rule with CSS

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: <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,...

Read More

he CSS Overflow Property

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

Read More

Centering Text with CSS

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: <p style="text-align: center;">This is centered text</p> will center your text...

Read More

starting with HTML + CSS

This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML...

Read More

CSS scrollbars

This tool let's you add a customized scrollbar to your pages. The code will only work on Internet Explorer - since IE is the only browser that support custom scrollbars. The code will not cause any harm if viewed on Netscape browsers - it just won't have any effect, so a normal scrollbar will appear if viewed with Netscape. Fill in the fields and let this page do the programming for you. Then copy and paste the code into your own HTML document. As easy as it gets! FILL IN THE FORM OPTIONSSETTINGS Scrollbar Front Color = Scrollbar...

Read More

CSS cursors

Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS. Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all. So unless...

Read More