6The CSS box model

Brackets does certain things automatically, it adds indents and tries to guess what you are going to type. The following is a brief summary of some of the more useful functions:

Brackets can move the indentation of blocks of code (this often happens when a <div> element is added around an existing block of code). To change the indent level, select the block of code and press the tab key to indent if further (move it to the right). Press shift+tab to reduce the indentation (move it left). In either case, it will move the block of code four spaces either left or right.

Brackets will try to guess what you are doing as you type; start typing:

	<p c

and Brackets will open a box showing the options available to you:

Figure 6.31   Brackets autocomplete

Either cursor down to the option you want and hit enter or click it. Brackets will add the keyword to the line with all the necessary formatting the attribute needs: equals signs quotes &c. It will leave the cursor positioned in the centre of the quotation marks ready for you to start typing the class name or whatever the attribute needs. If you type the closing quotation mark, Brackets will ignore it and just move the cursor past the one it put in for you.

If you compete an opening tab by typing the final >, Brackets will automatically add the closing tag e.g. type <p> and Brackets will automatically add </p>.

It works with CSS too, enter an opening brace {, Brackets will automatically add the closing brace } and put the cursor in the middle, ready for you to start typing declarations.

The autocomplete works with CSS properties too, start typing a property:

	margin

and Brackets will open a box showing the possible options available (just like HTML), it will also give options for values.

This is a very useful feature, especially for CSS—I find it difficult to remember all the standard options for values and this helps a lot.

Quick edit is a context sensitive facility that makes editing your document easier. It’s activated by right clicking something in the HTML document and selecting quick edit. Alternatively hit ctrl+e.

If you quick edit a class name in the HTML file it will open a small editor window that lets you modify the CSS file directly. If the class doesn’t exist, it will create it at the end of the CSS file (note, this isn’t usually where you want it).

Quick edit a colour value and it opens a colour selection window that lets you see and change the colour. It will also allow you to change the transparency of the colour—if you change a solid colour to a transparent colour it will change the colour value such that it uses the rgba format (see § 5.7).