They want to hide their site’s title from displaying at their header. It is most probably because their header image already has it as part of the image itself.

Lets take a look at the most common approaches people take, for doing this.

Approach (1) : Delete the blog’s Title through Options Page

People go ahead and login to their wordpress, click on the Options and they look at the text box with the label “Weblog Title”. They just clear the text in that box and click on “Update Options”.
Start from

Click to Zoom!
and make it look like

Click to Zoom!

Wow ! That seems to work., isn’t it ?

Wait a minute, lets take a closer look !
As a result of your change, the following undesirable effects were created.

Issue #1 : Search Engines do not see the site’s title

You only intended your site’s title to hide from your vistor’s eyes, but now even search engine’s can not see your site’s title.
A site’s title enclosed in <h1> and </h1> tags, is one of the main things, search engines look at when they crawl around your site.
If the search engines do not know your site’s title, how will they display your site as part of any search results.?

Issue #2 : Site Title does not appear in the browser’s top bar

If the user has opened many browser windows or browser tabs, he/she may not be able to find the window/tab that your website is on.

Issue #3 : Site’s Feeds do not display a title, either

If the user subscribes to your RSS Feeds, they also do not display your site’s title.

Some feed reader softwares also reject feeds that do not have a title.

Oh my God! This approach has some serious issues, isn’t it ?

Approach (2) : Delete the line from header.php

Somewhat knowledgeable users open up the header.php in the theme directory. They know what is the line that causes the title to display in the header.
They just look for

<h1><a href="<?php bloginfo('siteurl');?>/" title="<?php bloginfo('name');?>"><?php bloginfo('name');?></a></h1>

and delete the whole line or make it

<h1></h1>

Yes. Now the site’s title do not appear in their header and they are happy !

Wait, They will still have the Issue #1 as we discussed for Approach #1.

Approach (3) : Hiding it through CSS Style definition

If we really think about the problem at hand, it is very simple. We want to hide the site’s title from the header of the site, as we already have the site’s title as part of the header image.
We only have to hide it from people browsing the site in the browser, and not from the search engines or feed readers.
Lets take a look at the CSS based solution for this.

Add

#header h1 { display:none }

at the end of style.css and save it.

Now let’s refresh the site and see if the title is hidden. It is still showing up? You have to clear your browser’s cache and refresh the page again.

Ok…Now it seems to work !

Is there any of the Issues 1, 2 and 3 as we discussed earlier ?

Nope !

Well, may be this is the proper way to hide the site’s title from the header ?

I believe so !

Disclaimer :

This would work in most of the wordpress themes [at least the ones that I created]. If it does not work in one of my themes, please go to Support Forums for my themes and if it is someone else’s theme, please contact the author of that theme.
Commenting on this post for help with your site, is not recommended.

Thanks.

You might have seen this following piece of code in some theme’s style.css file.
#content h2 { font-size:1.4em;}
or this
#content h2 { font-size:14px;}
or this
#content h2 { font-size:10pt;}

What is the difference between all of these ? which one is better ?

In reality, there is nothing like ‘one is better than the other’, but it depends more on the context where it is applied.

‘1em’ means the size of the character ‘M’ for the given font when the browser displays the page at the normal text size.
(Similarly 1ex = size of character ‘X’)

‘1px’ means 1 pixel size. if your monitor’s display is set to 800 by 600 resolution, that means it displays 800 pixels horizontally, and 600 pixels vertically.

‘1pt’ means 1 point size. This is a fixed size across all fonts = 1/72 of an inch. Fixed size fonts might be usable in some cases but not for all.

Q : so what are Relative units for font ?

A : something like ‘em’, ‘ex’, ‘px’ etc

Q : What are Fixed units for font ?

A : something like ‘pt’, ‘in‘, ‘cm‘, ‘mm‘ etc

Q : What is the advantage of having a Relative Size set for a font ?

With every modern browser, you have the capability to change the text size of a given web page you are viewing.
If you are using Firefox, it is available in the toolbar (View > Text Size > Increase ) or in Internet Explorer, it is available in toolbar (View > Text Size > Larger )

If your website’s CSS defines the page element’s font-size in relative units (such as em, ex or px), then the browser will show the page in a bigger font size.
else, the page always shows up with the same sized font, no matter what you change in the browser settings.

So, if you want to have a web page, that is readable by those people with minor visual impairment, you should use relative units for the font size.
If you are a theme author, you make sure, your theme uses them as much as possible, so the sites using your theme are accessible to everyone.

Thats all folks, for now.

Further Reading:
1. W3C’s Tips.
2. CSS2 Syntax

Well. There are four different selectors for a hyperlink.

You would normally see this at the top of the stylesheet.

a:link {text-decoration:none;color:#ff0000}
a:visited {text-decoration:none;color:#0000ff;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

The first line defines that normal unvisited links will have ‘no underline’, and will look ‘red’ in color.
The second line says when a link is already visited by the user, it should display in ‘blue’ color with ‘no underline’.
The third line says if the user is moving the mouse over this link, show an underline.
The fourth one says to do the same thing as the hover, when the user clicks on it. ‘active’ depicts that fraction of second that the user actually clicks on the link.

In order for these definitions to work as intended in most browsers, they have to be in the same order as we have defined here.

Remember ‘LoVe’ should come before ‘HAte’
This shortcut I found it first on the book ‘Web Standards Solutions’ by Dan Cederholm.

Thats all folks, for now.