WordPress Theme Park

I am proud to annouce the release of a new theme.
it is 2-column, widget-ready, fixed width theme.
Visit CoffeeSpot now.

Lets take a closer look at the font-size property in CSS.

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

I have been wondering for so long, how the people actually read a website if it is presented in light colored fonts over a dark colored background. Roger has a nice article on that.
Check it out !

Frederik Fahlstad from fahlstad.se, has been a regular contributor to the wordpress themes community.
He has released many nice looking, readable, elegant wordpress themes.
We had a little chat with him a few days back. Excerpts of the interview is at Interview with Frederik page.

Enjoy !

With the latest wordpress, the default theme has feed: attached to the normal feed links that start with http://yourwebsite.com/feed/ .

Most of the users complain that when you click on that, it does not work.

Yes, It wont work till all the browser manufacturers support that.

what is it anyway ?
Have you seen a mailto: added to links to the email addresses? It is for opening a mail compose window on your email program automatically when you click on those links. Browsers understand this keyword mailto and acts accordingly.

Similarly, W3C (World Wide Web Consortium) is suggesting to have feed: to be added to the feed links, so anytime the user clicks on it, the browser can launch the feed reader program(if it is installed on that machine) automatically.

It wont work as of now, because not all browsers are made to understand this tag.
Till they upgrade, you can safely remove this feed: part from your feed links.

Thats all what I wanted to say about Feed Links, for now.
Enjoy !

Ever wondered how to define styles for Hyperlinks ?

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.