CSS

CodeLobster IDE offers a fully integrated CSS support, helps you to save your time and unleash your creativity.

[Note]Note

The free version of CodeLobster IDE includes all CSS features in the Editor.

The following features make it easy to work with CSS code:

CSS syntax highlighting

CodeLobster IDE supports syntax highlighting in Editor to make it easier to read the semantics of the structured content by displaying each type of code in different colors and fonts.

To customize the colors or styles used for the syntax highlighting colors for CSS files, follow these steps:

  1. Open the Preferences dialog box (Tools | Preferences...).

  2. Go to Editor | Colors.

  3. In the Show settings for: component select CSS item and customize the colors or styles using the selectors to the right of the pane.

Pair braces highlighting

The Editor highlights braces in pairs when the cursor is placed between the beginning and ending enclosing characters.

Code collapsing

You can fold or unfold any manually selected regions in code. CodeLobster IDE folds or unfolds the current code fragment, for example, a single method. Folded code fragments are shown as a shaded box ( ).

To fold a code fragment:

  • Select Edit | Code Collapsing | Collapse Block (Ctrl + Num + -) main menu item or move the mouse over the gutter and click -.

To unfold a code fragment:

  • Select Edit | Code Collapsing | Collapse Block (Ctrl + Num + +) main menu item or move the cursor over the gutter and click +.

CodeLobster IDE collapses or expands all fragments within the selection, or, if nothing is selected, all fragments in the current file.

  • To collapse or expand all code fragments, select Edit | Code Collapsing | Collapse All Blocks main menu item (Ctrl + Shift + -) or Edit | Code Collapsing | Expand All Blocks (Ctrl + Shift + +) item.

When you hover cursor to folded fragment you see a code preview tooltip:

[Note]Note

See more about Code collapsing

Intelligent Autocomplete

The Intellisense autocomplete for CSS feature helps write code faster. The completion list is invoked automatically in the proper area of CSS code. Autocomplete feature "remembers" and lists in a pop-up window with:

  1. Style property names

  2. Property values

List CSS properties and values

CodeLobster IDE includes support of CSS properties based on W3C CSS Level 2 specification. You can get the list of currently available properties when you work with CSS blocks.

To open the list of properties:

  1. Open the Edit main menu

  2. Choose the Intellisense | Autocomplete menu item

Default shortcut: Ctrl + Space

After you type, for example, font: the list of available property values will be displayed:

CSS navigation with holding Ctrl button

The Editor offers fast navigation with clickable hyperlinks to files in your code. Holding down Ctrl and left-clicking a link to open a file in the system application:

Ctrl + click is a shortcut for mouse users to quickly access Go To Definition. Symbols become clickable when you press Ctrl and hover over the type or member. To quickly navigate to the definition of a symbol, press the Ctrl key and then click on it.

Image tooltips

HTML tooltips show image preview, its dimension, and size in pixels.

Browser Compatibility tooltips

CodeLobster IDE shows you tooltips of browser compatibility (IE version) for HTML tags and CSS features. Start typing the tag or hover your mouse pointer over the code to show the browser compatibility icons:

CSS Context and Dynamic Help

The Dynamic Help window displays links to help topics for the target element. You can get the necessary information on any element of CSS code.

To get help topics using Dynamic Help:

  • Place the pointer on the target element and press the F1 button.

  • Select Help | Context Help main menu item.

  • Click the topic item in the Dynamic Help window.

    [Tip]Tip

    To show Dynamic Help select View | Panels | Dynamic Help main menu item.

By default, CodeLobster IDE conducts search on the https://www.w3.org/ site. You can change the help source to mozilla.org instead:

  1. Select Tools | Preferences main menu item.

  2. On the left panel click Context Help item and select CSS

  3. On the right panel select necessary help source.