Generating stylesheet tags in Rails

Just a quick post to put the Easy Google Syntax Highlighting WP plugin through its paces:

Generating <link> tags to include your stylesheets in an embedded-Ruby file (like those used for views and layouts in Rails) is really quite easy. Using the stylesheet_link_tag method available to ActionView classes does all the dirty work for you.

The <head> section of your layout or view might look something like this:

Using embedded Ruby, to throw a link to a stylesheet named killer.css in your <head> section, simply update it to the following:

That added line will generate the following HTML:

Notice that stylesheet_link_tag will, by default, search for stylesheets in the /public/stylesheets directory of your application. Also, when no other parameters are passed to stylesheet_link_tag, the type attribute is set to text/css, media is set to screen, and relationship is set to stylesheet. Furthermore, you don’t have to include the .css extension in the filename when passing the filename parameter. You’re welcome to include it, but as long as your CSS stylesheets are named with the .css extension, there’s no need to do so. Note that if you include a file extension, Rails will no longer look for a file with the .css extension for this call. For instance, if you want to include a stylesheet named my_style.new.css, the following is not sufficient:

This will only look for a file named my_style.new, and will result in an error if your file is actually named my_style.new.css. To include this file, the call will need to pass the complete filename as the parameter:

stylesheet_link_tag also accepts a parameter for the media attribute in the generated <link&rt; tag. For example,

will generate the following tag:

You’re also able to specify a stylesheet in a directory other than /public/stylesheets. Just include the relative path from /public directory of your app in the passed argument:

This generates the following tag:

If you have several folders of stylesheets under your /public/stylesheets directory, and prefer to only pass the name (sans extension) of the stylesheet in your stylesheet_link_tag call, do the following:

This will recursively search every directory, beginning in /public/stylesheets, for killer.css.

If, instead, you want to include all the stylesheets in the stylesheets directory, just call:

This will generate a <link> tag for every file in the /public/stylesheets directory, while

will, do the same recursively for every stylesheet in every directory under and including /public/stylesheets.

Finally, let’s say you want to include a stylesheet from an external site. Maybe you’re using the Yahoo! User Interface Library, and want to include one of their stylesheets. You might have the following in your <head&rt; section:

The stylesheet_link_tag here would generate the following HTML:

A quick introduction…

As many other folks like myself do, I’m throwing a blog up to house all the little tidbits I come across from day to day. More often than not, they’ll be documentations of my trials and tribulations as I try to uncover a solution to some coding/techonological/musical problem. Unlike most other folks though, I really don’t assume anyone else will ever read this…