Easy Styling of CSS – Firefox’s Firebugger or Chrome’s Google Developer Tools

People always assume I use Dreamweaver when they hear I do Web Development. I always say “sure” because I don’t want to confuse them. Honestly, I haven’t used licensed software to do web coding for a while. I can accomplish everything I need with a text editor and web browser. This is because of the developer tools built into web browsers.

My go to browser is Google Chrome because the tool is pre-installed on the browser. Also, I believe Google is good at making things useful (crossing my fingers Google bots see this and help my SEO as a consequence). To do styling of a page, I simply right-click on a page element and tell Google Chrome to inspect the element. You can also do this on Firefox with the extension Firebug installed as well.

Once you do this, you will notice that it opens up a sub-panel below the webpage you are on in your site browser. On the right you will see the section for styling. You can alter the styling and watch it change dynamically on the page. If you know nothing about CSS, try doing something basic like adding a style rule of “background-color: red;” to your element. You should see the elements background color turn red.

This was an important find on my way to becoming comfortable with developing. I suggest this as a method for laying out a page because it keeps you in a “coding frame of mind”, which doesn’t ever hurt with web development.




HTML :

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <s> <ins> <strong>


Newly Added Web Portfolio

Twitter

    No public Twitter messages.

Contact Form