The Key To Making Quick CSS Changes

The best way I have found to quickly make informed CSS changes is by using the Inspect Element functionality in Chrome. This allows you to quickly find elements of the page and make style changes that are reflected immediately in the browser. This is a great way to see how the style is reflected on the site and later be able to write these changes to the page element or the stylesheet. Refreshing the page will remove any style changes you have made.

Firefox also offers this functionality, however there are differences that make Chrome the better options for me. The best feature in Chrome is the ability to mouse-over the source code and have the elements on the page highlight. With this you know immediately what section of the page the source code relates to. In Firefox you have to click-through the elements or right-click on the page element you want to inspect.

You can get to the Element functionality by  right-clicking anywhere on the page and select the Inspect Element option.

Introduction to the Inspect Element Window

Inspect Element Window

There are other options available to you in the Inspect Element window, which include: Resources, Network, Sources, Timeline, Profiles, Audits and the Console. However, for this introduction I am going to specifically focus on Elements.

If this options is not already selected in the menu bar, go ahead and select this.

Inspecting and Changing the Source Code

In the left pane you will see the page source code. If you mouse-over the source code you will notice that the page above is highlighting elements. This is a really quick way to take the guesswork out of finding the page elements that you would like to work on.

Chrome also offers the ability to change aspects of the source code on the fly. You can change everything from class or id names and even change text on the page. For more advanced users you can right-click and choose to edit the HTML directly, which is another feature Firefox is lacking.  This functionality is something that I typically show my co-workers how to do if they are not familiar with it. It is a great tool to quickly change any of the text on the page and see how it fits.

At any point if you are lost in the source code and want to quickly jump to a specific element, you can right-click on any page element above the window and click Inspect Element. Doing this will jump you directly to that element in the source code below. There is also search functionality available to quickly find what you are looking for. You can activate search with CTRL + F or you can click the search icon seen on the bottom toolbar of the Inspect Element window.

Inspecting the Style Code

The right pane has all the style code associated with the element you have selected on the left.

Lets talk about element.style first. Element style directly affects the style of  the element you have selected. Clicking anywhere in this window will show an input box where you can enter in style code. Chrome has a nice predictive code feature that is very handy when you are not sure of the style name. As an example, typing in “fo” will show the list: font, font-family, font-size, font-stretch, etc. Once you have selected the style option you can press the tab key and begin entering in the  style value.


element.style {
font-size: 12px;
color: #fff;
box-shadow: 10px 10px 5px #888888;
}

If you enter in style values that are incorrect, Chrome will present an exclamation icon and the style will be crossed-out. Some styles need multiple values to be entered, an example of this is the box-shadow style, which requires four style values to be entered separated by spaces. Other elements like font-size only need a single style value, although you will need to append “px”, “pt”, “%”  or one of the predefined property values.

You may also come across times when the style code you have entered is not affecting the element. This occurs when you have style code applied to elements within the one you are editing. Styles are cascading so any style written on nested elements will override the style of the parent element.

</pre></pre></pre>
<div style="font-size: <span class=;">12px; color: #000;">Text Here</div>
<pre>
<pre>
<span style="font-size: <span class=;">11px</span>;"> More Text
<pre>

In the example above “Text Here” will display as 12px font size and the text “More Text” will display as 11px font size. Both font colors will display as #000 (black). The lowest element will always override styles applied to elements above, but only when that style property is referenced.

Editing the Stylesheet

Below the element.style window you will see a number of other stacked windows. It is in these windows that you can edit already referenced style code. You can also add new elements or you can even uncheck the checkbox next to the style to disable the style. Disabling style is something I use when I want to see the impact those styles across the page or elements of the page.

Chrome also displays a link inside of each box to tell you what CSS file contains the style so you can quickly find it later and apply your changes. It is important to try to stick to using a stylesheet instead of embedding style directly into the element, this way you can reuse the class you have created across multiple pages that reference the stylesheet. I explain this in more detail below.

How Classes Are Applied

The code examples above apply style attributes on the element, which is good for unique styles per element. However, the best practice when you want to apply style across a number of elements is to include a class in your stylesheet and reference these on your page elements.


.header-text {
font-size: 18px;
box-shadow: 10px 10px 5px #888888;
}
.body-text {
font-size: 12px;
}

</pre>
<div class="header-text">Header 1</div>
<div class="body-text">Body Text for Header 1</div>
<div class="header-text">Header 2</div>
<div class="body-text">Body Text for Header 2</div>
<pre>

In the example above we have entered two classes into our stylesheet named header-text and body-text respectively. Our elements are referring to these classes and applying the style information to those elements directly. This means we can quickly change style attributes and values across many page elements.

Summary

This is a trick that I use day-to-day. I often use it to edit textual elements quickly on the page to see how they will look. If I am mocking up a design in Photoshop using the existing page design, this trick is great for doing quick screen grabs and placing these elements in your Photoshop documents. For example, if there is a button style that we are keeping, but want different text, I will simply Inspect Element on the button, change the text and take a capture of the button with the Snipping Tool.

Give this trick a whirl next time you need to see exactly what the site is going to look before the style changes go live.

Leave a Reply