If you’re an absolute newcomer to the scary world of web design and wish to start learning things from scratch then The Frog Blog is the place to go. Over the next few weeks the bloggers there will be posting walk-through slideshows that explain CSS and XHTML visually, in an easy to digest format.
CSS help for absolute beginners: Shaping up with CSS – This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor, that helps you set up complex sites.
WordPress.com has provided a preview function that will let you try out the CSS changes you wish to make to see if they actually are going to do what you want them to do without having to pay for the CSS upgrade. There is no staff support for learning CSS so the CSS resource links are very helpful and knowing what can or can’t be done when CSS editing a wordpress.com blog is important.
(1) First off, when testing things out, you will want to view the CSS stylesheet for your theme and copy it out and into a plain text editor for reference. You can view the CSS stylesheet in your browser by clicking on the “CSS stylesheet” link on the design > edit CSS page in the dashboard.
(2) Do not paste the entire CSS stylesheet into the CSS editing area. You will only want to include the additions and/or changes you are actually making.
(3) You will also want to have “add to existing style sheet” selected when you preview your changes. This way you do not have to reinvent the wheel so to speak. You’re changes and additions will be added to the bottom of the existing stylesheet which will override the like sections of the original stylesheet.
(4) To preview your changes after you have put them in the edit area, all you have to do is click the preview button at the bottom of the page.