Whether you’re just starting out with front-end web development or have been coding HTML and CSS for years, keyboard shortcuts can help you work faster and more efficiently in Sublime Text. This popular text editor is highly customizable and supports a wide variety of shortcuts to navigate code, select and modify elements, and perform other common tasks.
Here is a list of some of the most useful default keyboard shortcuts for HTML and CSS coding in Sublime Text:
-
Tab: Indent code. Very handy for properly formatting HTML and CSS.
-
Shift + Tab: Unindent code.
-
Ctrl + ]: Jump to closing tag of the current HTML element.
-
Ctrl + [: Jump back to opening tag from closing tag.
-
Ctrl + Shift + >: Expand selection by tag. Great for selecting an entire HTML element at once.
-
Ctrl + Shift + <: Reduce selection by tag.
-
Ctrl + D: Select next occurrence of current selection. Repeating adds to selection.
-
Ctrl + L: Select entire line. Repeating adds lines.
-
Ctrl + G: Go to line. Prompts for line number.
-
F11: Toggle full screen mode. Maximize viewing area.
-
Ctrl + R: Rename symbol. Great for renaming CSS classes or IDs.
Some common CSS-specific shortcuts:
-
Ctrl + Shift + C: Wrap selection in comments.
-
Ctrl + /: Comment out line.
-
Ctrl + Shift + /: Uncomment line.
-
Ctrl + Shift + Up/Down: Move selected line or block up or down.
-
Alt + F3: Find all occurrences of the current symbol in the file.
Sublime Text also lets you add your own custom keyboard shortcuts. As you become more experienced with HTML, CSS, and the editor itself, consider personalizing shortcuts to fit your specific workflows. With a little practice, these shortcuts can seriously boost your coding speed and productivity in Sublime Text.
