Chrome DevTools, Safari Web Console, Firefox Developer Tools and all of the other browsers' developer tools are incredibly useful tools in building and enhancing websites. They all provide the ability to look at any website's Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript, and to live-edit websites by creating pseudo property names and values. All of them are practically the same using the Document Object Model (DOM) tree and Style panes.

The pane on the left shows HTML, for example <a href="//">South Essex College Practice Website</a>, and the pane on the right shows CSS, for example #sp-header .logo a {font-size: 38px}. The difference is that one is an instruction, in this case a hyperlink to the Home Page, and the other is a styling, in this case change the font size measured in pixels (px).

The CSS styling is relevant to the selected HTML and in the CSS pane there are two lines of styling that are crossed out and that there two lines with the same instruction but not crossed out. The ordering is important to both with the active styling being above and overriding the styling below, with the overwritten styling being expressed in a strikethrough style.

Hover the cursor over each styling subject to view the tick boxes next to each styling. These can be toggled tick/untick and unticking an active styling the one below is activated, represented by removing the strikethrough style.

Editing Style

Styles are divided into Property e.g. font-size: and Value e.g. 38px. Clicking on either will activate an active text box and pressing enter completes the edit. Editing either will create a pseudo version of the edited website that can be reset by refreshing the browser. The full list of CSS Properties is maintained by the World Wide Web Consortium (Wikipedia Entry).

Adding Styles

Clicking after the last property value opens a text box for a new Property. Entering the new property and pressing enter generates a new Value text box, and pressing enter completes the edit.

Adding New Property Value to Your Website

The two options are that new styling code is built by editing the core code or by adding the code to a custom css file that will override the core code. The latter is best so that a separate record is maintained of any edits and that if there needs to be any replacement of the core code with an unedited version then the edits do not need to be repeated.