A quick reference when building a site with CSS

I think this website was referenced or linked in a previous top 10 list earlier this semester, but I’m going to reference it again. I found my way to this CSS Crib Sheet by Dave Shea, and I think he was talking to me when he said, “You will no doubt come across many quirky layout issues when building a site with CSS. You’ll end up banging your head against a wall time and again.”

There is a lot of good information, links, and tips here, that I’ll definitely keep in mind as I continue to code HTML with CSS.

Limitations of CSS

While reading about all the great things you can do with CSS I began to wonder what CSS can’t do. What would someone want to do with CSS that can’t be done? I’m not sure how accurate this is, but Wikipedia offers this info…

http://en.wikipedia.org/wiki/Cascading_Style_Sheets#Limitations

CSS Navigation Trick

http://www.sitepoint.com/article/top-ten-css-tricks

Yeah, it’s another top 10. I’m really only looking at Tip #10 this time. It’s a great way to get your navigation hi-lited on each particular page without having to recode the nav on every page of your site. I haven’t tried it yet, but I will on my personal site (which I am currently slowly redesigning anyway) and then I will update this post with the results. I’m hoping it’s a winner.

A Step-by-step demo using CSS

As I was looking through the list examples on the Max Design Website I came across this nice, visually friendly step-by-step tutorial on building a page template using CSS here.

Its gratifying for someone who is still learning to reinforce what we practice in class and see our results each time we change something in CSS.

Form Design with CSS

In the same vein as Zen Garden, I found the following site that showcase different styles applied to forms: Form Garden .

Other notable CSS form sites:

• http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
• http://www.alistapart.com/articles/prettyaccessibleforms
• http://www.sitepoint.com/article/fancy-form-design-css

Free XHTML/CSS Templates For Web Design

I saw this while browsing on my email. It’s kind of cool you just download the css stuff and put it to work. They show you previews and all for it. You might even be able to upload your own onto the site.

http://www.templateworld.com/free_templates.html

- Dorian

Excellent Site/Blog on CSS and Cross-Browser Issues

http://www.designvitality.com/blog/2007/10/designing-for-every-browser-how-to-make-your-site-fully-cross-browser-compatible/This site has some excellent articles and instruction and discussions on the best way to make your CSS cross-browser compatible.The link above takes you to a particular post. The author lists over 10 very well written articles that you should definitely check out.The site itself, DesignVitality.com, is worth looking over for all things Web (and Graphics).Enjoy.-Rodney

CSS Layout Techniques

This CSS Layout Techniques website contains links to CSS techniques, resources and tutorials. It gives examples of how to layout webpages using CSS and provides the code to create such layouts (which are free to use). These layouts might give those in WEBT143 some ideas of how to layout their website for their final project. There are also many resources and tutorials which I found to be quite useful.

-Tom

Quick CSS Trick: Using Span to Break Up Words in URLS – CSS-Tricks

Quick CSS Trick: Using Span to Break Up Words in URLS is a really cool trick to use with links.

–
Larry