Using CSS Themes without Coding Knowledge

If you would like to create a website, but don’t have extensive Cascading Style Sheet (CSS) knowledge, you can still put together an attractive site with all of the advantages of CSS and little hassle. Because using a CSS template, in place of using a Dreamweaver Template or tables, is more likely to be more search engine optimized, you may want to incorporate this yourself using a free CSS template, and customizing it to meet your web site needs.

In this tutorial, I’ll be showing you how to create a website using a cascading style sheet (CSS) template, which you need no coding knowledge for, in Dreamweaver. I like using Dreamweaver much better than similar programs because of the clean interface, easy editing and designing, and the clean code. If you’re new to web site design, I would suggest purchasing Dreamweaver and using it as your primary web editor for easy design, and highest search engine results without a lot of optimization.

Follow these easy steps to use a CSS Theme in Dreamweaver without knowing how to code it:

1. Choose your CSS theme or template: Personally, this was the most tedious task for me. Because there are so many different free CSS templates to choose from out there, it took me a while to sift through them all until I could find the right one for my project. Search through the following sites until you find a theme and layout that will fit your project. Keep in mind that if there’s a small modification you would like to change (a particular image, heading sizes, fonts, etc), we can fix those later. These are just a few examples of some sites where you can obtain some free CSS templates or themes:

• Free CSS Templates.org
• Free CSS Templates.com
• Free CSS
• Open Web Design.org
• Blank CSS Templates

2. Download your chosen template: download the zipped file of your chosen template to the appropriate location and unzip the file.

3. In Dreamweaver, open both the .css file, and the .htm file included in your downloaded stylesheet folder. Pull up the .htm file and ensure you are on the “Split” or “Design” view of Dreamweaver so that you can see your CSS template in action.

4. Next, identify any small modifications you would like to make, such as an image in the template that you would like to switch out for another, or a font you would like to change.

• Open the .css file and find the area modifying the “body,” or the general look of the text included on the web site, which should like similar to this:
  

  body { margin:0; padding:0; font-family: verdana, arial, sans-serif; font-size:75%; color:#666666; text-align:center; background-color:#DDDDDD;}

• Identify the area that should be changed, as indicated by the highlighted text above, and choose the appropriate replacement for the change that should be made and edit the .css file. Save and return to your .htm file and you should see your changed font.

In four easy steps, you have created a website with a search engine optimized layout, or a CSS template, without having to deal with the fuss of coding a brand new CSS sheet from scratch.

This post was written in response to Just Creative Design’s $5000 Prize Giveaway Graphic Design Group Writing Project. Just Creative Design is a great graphic design blog offering free tips and great posts on all aspects of design, including logo and website design. Its contest asks its contestants to simply write a post on any graphic design topic. Check it out, and help support it by getting involved!

---

Possibly related posts: (automatically generated)

• Yanko Design opens store, oodles of concepts now on the market