These headings are more jazzy than as jazzy as John Coltrane my friend. Subtitles can serve as a great descriptor, especially if your post titles are random snipets of nothing like mine. This code is for the title and subtitle in the life section.

heading (x)html (<h1> and <span>)

<h1>life <span>in the shadows</span></h1>

I try not to put classes an any element I don’t have to. This lets me chop down the code for a smaller file and creates less confusion when it comes to specificity.

heading CSS (h1 span)

h1 {
	font-size: 2.2em;
	font-weight: bold;
	color: #111;
	margin-bottom: 2.0em;}
h1 span {
	font-size: 0.6em;
	font-style: italic;
	color: #ccc;}

Keep the code clean and simple, so the browser can chill. Note in the CSS, that the subtitle font-size: 1.32em; is specified as the multiplication of 2.2em x 0.6em. Additionally I use a wordpress custom field named “subtitle” for further CMS integration.

heading php (for wordpress)

<h1><?php the_title(); ?> <span><?php echo 
get_post_meta($post->ID, 'subtitle', true); 
?></span></h1>

No related posts.

tags: (x)html, css, design, development, tip, wordpress

This entry was posted on Friday, July 10th, 2009 at 10:39 am and is filed under web. You can follow any responses to this entry through the comments feed. You can leave a response, or trackback from your own site.