Tag Archives: css

Capitalize Your Headlines Properly, Please

Capitalize Your Headlines Properly, Please

In the English language, titles follow a certain convention of capitalization. Titles of books and magazine articles, news headlines, names of publications, etc., they all follow this basic rule: You capitalize every word in the title, except for unimportant words (e.g. and, or, is, the), with the first and last words always being capitalized. Patricia Vennes’ post on Blogging Tips, CaPiTaLiZaTiOn, describes the overall rules to crafting a grammatically-correct title.

All too often I’ve been seeing a trend of blogs naming their posts with basic sentence case, as Engadget does. It just doesn’t look right, and it breaks decades of journalistic convention. You capitalize your name, John Hannibal Quincy Rutherford Wallace Smith, don’t you? Have you ever seen a book with only the first word of the title capitalized? Have you ever seen a printed newspaper without compliant case? Probably not.

If you want to be taken seriously, don’t ignore conventions like this.

Blogging Tips had a recent post, The Capitalization Wars, with a similar point. Interestingly enough, Blogging Tips displays their headlines IN ALL CAPS. However, if you read their posts in an RSS reader, you’ll notice that they appear “properly” there. How is that? The post titles use Title Case, but they use the CSS text-transform property to display them in all-uppercase. If you view the source of the page, they look normal, but the browser renders the headlines in all-caps. It’s a stylistic choice that can be easily reversed at any time.

Please, type your headlines in Title Case. It may seem like a minor pet peeve, but you lose some credibility in the eyes of the “old media” (and the grammar geeks) if you don’t do it “right.”

CSS-Tricks: Style a List with One Pixel

Chris Coyier recently released a new article that covers an ingenious CSS trick that puts me in mind of the days of 1-pixel spacer.gif files and tiling graphics meant to replace the <hr> tag.

Basically it uses a one-pixel graphic and a bit of CSS to style a nested list element, with an end result that looks something like this:

CSS-Tricks 1px Nested List

That’s a semantically-correct <ul> element styled with one image and no additional markup. It’s so simple I wish I had thought of it… :)

CSS3 Drop Shadow

Have you ever wanted to add a drop shadow around an element, but didn’t want to mess around with extra background images just to pull off such a simple effect? Why not use a cutting edge CSS3 effect, which won’t work in Internet Explorer of course, but who cares…

I found this useful snippet, and thought it might be of interest.

-moz-box-shadow: 3px 3px 3px #666;
-webkit-box-shadow: 3px 3px 3px #666;
box-shadow: 3px 3px 3px #666;

The firs line adds the shadow in Mozilla browsers (e.g. Firefox), the second adds it in WebKit browsers such as Safari and Chrome, and the final one is for any browsers that already support the draft box-shadow property, such as Firefox 3.1+ and Safari 3+.

The first two attributes of each of the properties are the horizontal and vertical offsets for the shadow, the third is the blur radius, and the final one sets the color of the drop shadow.

Pure CSS Dropdown Blogroll

Pure CSS Dropdown BlogrollWhat do you think of the blogroll in my sidebar? It takes up very little space, sweeping all of the links out of sight until they’re called for. When you hover over it, they snap down.

This trick is done entirely with CSS, and it works in all modern browsers. (Read: IE6 won’t do it right…) No JavaScript, just a little bit of styling with the :hover pseudoelement and absolute positioning.

You can find out how to do it for yourself by reading this tutorial by Michael Martin:

How to Create a Beautiful Dropdown Blogroll Without JavaScript.

WP-LESS: Leaner CSS For WordPress

You may have heard of LESS. It’s a Ruby Gem that allows you to write CSS files with variables, nested rules, operations, and “mixins,” which are akin to custom functions in a programming language. The LESS files are compiled into pure CSS before going into use.

WP-LESS is a plugin that, using the lessphp library, brings LESS to WordPress. I have yet to try it for myself, but it certainly sounds intriguing.

The plugin watches for edits to your LESS source code, then recompiles and caches it as plain CSS, which is served up to your visitors.


HTML Text Over an Image

Have you ever seen a site where HTML text is rendered over an image? One example of this is Pro Blog Design‘s article headings.

HTML Text Over an Image on Pro Blog Design

The effect looks good, and it’s search engine-friendly. CSS-Tricks has a tutorial on how to create a similar implementation with CSS absolute positioning.

Basically you create a relatively-positioned DIV and put the image and H2 elements inside. Then you absolutely position the two elements, and add a solid or semi-transparent background behind the heading text.

Text Blocks Over Image [CSS-Tricks]

Add a Mobile Stylesheet to Your Site

Don’t want to go all-out with a separate mobile mini-site, but you still want your site to be accessible on phones and PDAs? You can just add a new stylesheet intended only for mobile browsers, in which you can reformat the page to render acceptably on a wide range of handheld web browsing devices.

<link rel="stylesheet" href="style.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />

By linking a stylesheet with a media of “handheld,” you tell mobile browsers to remove any of the preceding styles. You can then apply some new styles within, taking care to avoid explicitly setting widths or anything that might foul-up mobile browsers.

It’s a little bit more complicated than that in reality, but not too much so. You can find a full how-to over at Perishable Press: The 5-Minute CSS Mobile Makeover.

The 1Kb CSS Grid

Grid Design is something that’s being talked about a bit lately, and many people are using frameworks like 960gs to help them do it.

A recent guest post over at Usability Post (by Tyler Tate) shows how to create a grid with your own CSS, 1KB of CSS to be precise.

Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight. And, as I’ll show in part 2, it can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting).

A few CSS rules and you have your own custom grid framework, which you can easily work the rest of your CSS around.

The 1Kb CSS Grid, Part 1 [Usability Post]

Why Validation isn’t All That Important…

Jeffrey Way (editor of Net.Tuts+) has a new article on his personal blog that brings up a topic that I think deserves some attention. He writes:

I woke up this morning to a rude email from a reader today. “Jeff,” he said, “I’m sorry, but I have no desire to read your articles when your own site’s CSS doesn’t validate. This only exemplifies the fact that you don’t know the correct way to create a website.”

I’d say most websites don’t validate all the way. This site’s stylesheet, like Jeff Way’s would valiate fine if not for a couple of proprietary style rules for Mozilla and Webkit browsers used to create rounded corners. (Oh, I also have a redundant cursor:hand statement for IE browsers that don’t understand the proper way of doing things…)

It doesn’t matter that it won’t pass the validation test. Are there any major CSS mistakes that will prevent either site from rendering properly in some browser? No.

The validator isn’t some sort of magic certification that separates good code from bad code. It’s a developer tool to help you find mistakes that actually could cause a problem.

NETTUTS 960gs CSS Framework Tutorial

NETTUTS has put together a great video tutorial on the 960gs CSS grid framework, something I have been experimenting with lately.

A Detailed Look at the 960 CSS Framework

CSS frameworks are bloated. CSS frameworks are for people who don’t know how to code. CSS is too simple to implement a framework.

If you’ve ever read a tutorial on a CSS framework, I can guarantee that many comments mimic the previous statements. My guess is that the majority of these comments are stemmed from slight ignorance. Once you take the opportunity to spend some time with 960, you’ll be amazed at how much time can potentially be saved when developing your web applications.

I think Jeffrey Way, the creator of the video, has a point when he says that a lot of the criticism of 960gs stems from “slight ignorance.” The framework most certainly is not bloated, clocking in at a mere 4kb minimized.

This video is a nice tutorial showing how to begin using the framework, some snags you may run into along the way, etc.

If you’ve been wondering what all the hullabaloo about 960gs is about, click through and watch the video. There certainly are some projects where it is definitely a good fit. It’s a nice tool to have in your arsenal.