CSS Tools and Info

Developer Tools

One of the most important tools for dealing with CSS come with your browser - the developer tools. All the major browsers include a version of developer tools. To inspect the HTML and CSS for any element on a page, simply right-click on the element and click on "Inspect Element". This will open up the Dev tools, here is Chrome's:

The HTML appears on the left side and the CSS on the right. You can edit the HTML and CSS in the dev tools to immediately see how it looks on the page, and then you can copy the code into your actual files. See CSS conflicts for more on the dev tools.

Code Editors

As mentioned in Creating Web Pages, Adobe Brackets is a good text editor for coding HTML and CSS. Brackets can also be connected with your browser so you can view a live preview as you code.

Tools to Create Sites discussed some tools that let you create sites with coding. You should use a tool that lets still you edit the code when needed, such as Microsoft's Expression Web (which is free but no longer developed). There are also many online tools, such as Jetstrap for developing sites with the Bootstrap CSS framework.

When coding CSS, it's helpful to use code completion so you don't need to type or remember the exact syntax. Learneroo's code editor provides basic code completion (press ctrl-space after typing part of a CSS property name), but desktop web editors provide more advanced completion options. For example, Brackets can suggest properties as you type them, and can also suggest some values. IDEs such as IntelliJ RubyMine (or WebStorm) provide even more advanced capabilities.

Reference Info

To look up more info about a specific CSS property, you can usually just Google it. The top results is often from W3Schools, which covers HTML and CSS and lets you try out examples. While they were criticized in the past for being out-dated, most of their content is good and they let you try out examples easily. However, when you want the exact latest details, look at Mozilla's CSS Docs. For a quick list of the different CSS properties, see our CSS reference, which links to Mozilla's docs for more information.