Building a site using advanced CSS

One of the biggest stumbling blocks for me when I design websites is how to use CSS.  You find yourself tweaking and tweaking a site until it gets to a state that you like, and if you aren't using good tools, this tweaking process can be more tedious than it needs to be.

Thankfully (and this is going to sound like an advertisement for Chromium and maybe Chrome too for you Windows/Mac folks) you can do some really advanced CSS sandboxing using just Chromium.  I was shocked by the power of the editing capabilities packed into this browser.  It's so easy to change CSS options and preview instantly!

Start with a good template and tweak from there.

If you start off with a really good template, you probably won't have much to tweak.  If you build your template from scratch without the help of fancy software like Dreamweaver, this will also save you time.  Also, you'll learn a lot about how CSS works!  Clear some room on your resume for the knowledge you'll gain working with CSS.

Once you have a basic template down (there are many free templates floating around, the one I'm using is the WorldGroup template from www.free-css.com), 

Inspecting elements using Chromium

you can start tweaking your CSS.

  1. Start by right clicking the element whose CSS you want to tweak.  This can be really any element on the screen.
  2. From the menu, select "Inspect Element".
  3. At the bottom of your screen, a tool panel will appear.  In that panel, you'll see your HTML displayed with collapsed options depending on the element you selected.
You can scroll over the tags in your HTML, and Chromium will even highlight which element they connect to with the upper portion of your screen.  To tweak options, 
  1. Locate the option you want to tweak in the HTML viewer, and click on it.
  2. On the right hand side of the panel, a box that says "Matched CSS rules" will tell you what CSS options from that particular id/class are being displayed.
  3. There will be a list of attributes that your particular div has inherited from larger divs that contain it, if there are any.
  4. Now, you can select and tweak existing values.  To add other attributes to the list, just click below the div and Chromium will automatically insert a new line and add the appropriate value.
None of these tweaks are saved, so be sure to jot down the attributes that you like for your site.  This mode is really a sandbox mode, which can help you rapidly prototype and change colors on the fly.

I use this mode when I'm working with customers.  They'll be unhappy with a color, and I'll change it right then and there!
Comments