General HTML/CSS hotkeys
Ctrl-Shift-W
Wrap block of text in HTML tags. Defaults to <p>, but you can then type the name of the tag you want and it will take care of the opening and closing tags.
Ctrl-Shift-Cmd-W
Same as above but for multiple lines of text. Excellent for creating lists, or pre-processing lots of paragraphs. Defaults to <li> but can be changed immediately after (same as above).
Ctrl-Return
Quickly insert a <br /> tag.
Ctrl-Shift-L
Copy a link from a web browser, putting it on the clipboard. Then select text or an image and hit this key combo to insert a link to that URL.
Ctrl-Opt-Cmd-P
View the current document in a web browser preview window (uses Safari’s WebKit rendering engine). The nice thing about this built-in previewer is that you never need to reload it – the preview updates in real-time as you type.
Cmd-Shift-C
Make sure your cursor is in a “context” (place) where a color value can be inserted. Then hit this key combo to bring up the OS X color picker for quick hexadecimal color values.
Ctrl-Shift-V
Run document through the W3C validation service.
Ctrl-Shift-H
Run document through the HTML Tidy engine to clean up messy code. Tip: Select a portion of code first, and Tidy will only run against the selected code, not the whole document.
Ctrl-Cmd-T
Perhaps the greatest TextMate hotkey of them all – raises a small panel into which you can type a search term for quick reference to all of TextMate’s built-in hotkeys and code completion snippets. Try it!
Tag inserts/snippets
TextMate can fill out “template” code for many common tasks. Try typing any of these words at the left margin of an HTML document and hitting the Tab key:
lorem –> Creates filler lorem ipsum text
table –> Creates a basic HTML table
div –> Creates a basic div, ready to take an ID name
style –> Creates a CSS style block in the document context
link –> Creates a link tag reference for attaching an external stylesheet (not for creating clickable links!)
movie –> Creates embed code for QuickTime movies
You can create your own snippets for any kind of text you need to insert on a regular basis – see TextMate’s “Bundle Editor” for examples.
CSS code completion
In the context of a CSS document or a CSS block, type a property name then hit Tab to see a list of available properties or property sets. For example, from within a CSS block, type border and then hit the Tab key. You’ll get a panel showing a bunch of pre-fab border options. Select one to insert appropriate code.
