When I was first learning CSS, I definitely read tutorials but most of my understanding came from trial and error. In order to learn to code, you have to experiment a little. The best way to temporarily try CSS codes on your website is to use the “Inspect Element” tool. This is your internet browser’s best kept secret. It allows you to go into the code of your website and preview changes before actually committing to anything. Additionally, you can go into the codes of other websites. See a font you like on someone else’s blog? This will help you find out what it is. This tool works in almost every internet browser (except Internet Explorer). Warning: You might turn into a crazy CSS-loving machine and lose a bunch of sleep tonight fixing up your website. It happens.
To use this tool, right click (or command-click) any element on your site and select “Inspect Element”.
A window will appear at the bottom of your screen containing all the codes that make up your site. On the left you’ll see the HTML framework. On the right side you will see the CSS. This is where the fun begins.
Make sure you’ve selected the correct element. The screenshot above shows that <div class=”utility-bar”> is highlighted which is perfect because it is the element I want to change.
The CSS codes on the right side of the bottom window are completely customizable. In the screenshot below, you can see that I’ve changed the background color from #303030 to #fff5e8, making it that nice peach color. So many things are possible with CSS and that’s why I love it. If you need a refresher, read my intro to CSS post!
Keep in mind this is all just a preview. If I really wanted to change the background color of my utility bar to peach, I would have to go into my CSS editor and add that code. When changing up my blog, I always use the Inspect Element tool before putting any real codes into my blog. It speeds up the process and helps me from making too many coding mistakes.
For a list of CSS attributes, properties, and definitions, take a look at my CSS cheat sheet! If you have any questions, feel free to ask them below in the comments. :)
Alex says
Great tip! I also started out doing this so that I could get an idea of how a “finished” site comes together. And to spy on the font being used.
kate says
so genius! I’ve been a little nervous to try with my actual site since there’s no “go back, I f’d up” button so this is awesome
Kierra says
This is brillant!! Im trying to learn how to add nice little features to my site( since paying for it can be so expensive) so this is super helpfull!
Xo
http://www.hercharisma.com/