9 Top CSS Essential Skills That Every Web designer Should Learn
Aug 21, 2008 by Mohsen
This post is dedicated to elementary & intermediate CSS learners. If you’re going to learn CSS from scratch, you’ve probably seen a lot of techniques, tricks & tutorials so far. In this post I’ve written my own approach to the most essential CSS skills that every web designer should learn. I really love the articles below and liked to share them with you. Hope you enjoy it!
1- Making CSS Layouts
- Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML (by myself!)
- CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices
2- Styling & Using Lists
- ListTutorial by MaxDesign
- CSS Design: Taming Lists
- Style Your Ordered List
- CSS Lists 3-part series article [1] [2] [3]
- How to Create Beautiful and Elegant HTML Lists Using CSS
- Turning Lists into Trees
- CSS Tricks for Custom Bullets
3- Understanding Box Model & Positioning
- Learn CSS Positioning in Ten Steps
- Box Model & CSS Positioning
- CSS Positioning Properties At-A-Glance Guide
- Basic CSS Box Model Demo
4- Better CSS Typography
- Advanced Typography techniques using CSS
- 10 Examples of Beautiful CSS Typography and how they did it…
- CSS Fonts, CSS Typography
5- Styling Forms
- Prettier Accessible Forms
- Style Web Forms Using CSS
- Fancy Form Design Using CSS
- form Elements: 40+ CSS/JS Styling and Functionality Techniques
6- Using CSS Frameworks
- Top 12 CSS Frameworks and How to Understand Them
- Which CSS Grid Framework Should You Use for Web Design?
- CSS Frameworks + CSS Reset: Design From Scratch
7- Optimizing & Best Practices
- Optimize your CSS files to improve code readability
- Write a well structured CSS file without becoming crazy
- 7 Principles Of Clean And Optimized CSS Code
- Improving Code Readability With CSS Styleguides
- CSS Specificity: Things You Should Know
- 70 Expert Ideas For Better CSS Coding
- CSS: Getting Into Good Coding Habits
- CSS Best Practices
8- CSS Hacks & Tricks
- The 7 CSS Hacks that we should use
- 10 best CSS hacks
- Solving 5 Common CSS Headaches
- Using CSS to Fix Anything: 20+ Common Bugs and Fixes
- Most used CSS tricks
- One pixel notched corners as used by Google Analytics
9- CSS Buttons, Boxes & Round Corners
- CSS and Round Corners: Build Boxes with Curves
- 25 Rounded Corners Techniques with CSS
- How to make a list with rounded corners, auto width and hover effect
- Rediscovering the button element
- How to make sexy buttons with CSS
- CSS Message Box collection
- Scalable CSS Buttons Using PNG and Background Color
- Sexy CSS Hover Button
- Beautiful CSS buttons with icon set
- P.S. Don’t forget to subscribe to my RSS feed for more resources.
Popularity: 100% [?]
6:15 pm on August 21st, 2008
This is a great list, thanks for putting it together. I’ll admit that I really need to work on 4 & 5 so I’m really excited to go through those sections.
2:58 pm on August 22nd, 2008
its rather amusing…
8- CSS Hacks & Tricks & 7- Optimizing & Best Practices
shows a image of:
p {
margin-left
margin-right
margin-bottom
margin-top
}
rather wierd as its p { margin:0 0 0 0;} would be considered a trick or optimizing
7:31 pm on August 22nd, 2008
CSS frameworks are one of the best things that i’ve found on the net, it makes one’s life much more easier.
11:32 am on August 23rd, 2008
Thanx 4 this wonderful list. very useful.
2:08 pm on August 23rd, 2008
fantastic as usual, thanks
3:28 pm on August 23rd, 2008
Good list, thanks for sharing.
3:15 am on August 24th, 2008
great list.its really helpful.keep up the good work:)
Ronald
6:27 am on August 24th, 2008
Hey this rocks
I stumbled on it right before starting a new project. Normally I breeze by the tons of web design how tos but this one was great. ROCKIN!! thnx
10:22 pm on August 24th, 2008
Some excellent tips there. I’ll be using more than a few of them in the future!
10:09 am on August 25th, 2008
Why should there be a requirement to learn CSS frameworks? If you’re knowledgeable at CSS you don’t need all that code bloat.
6:29 pm on August 25th, 2008
I have recently been looking for tips on styling my forms better, thanks for the link and list.
12:53 am on August 26th, 2008
disagree about the frameworks….
Most of them are just bloated code that then interferes with the optimisation which is number 7.
2:14 pm on August 26th, 2008
@ Jermayn & Andrei Gonzales:
I think css frameworks are quite easy to use. also if you are good at css you can optimize and personalize them. CSS frameworks work when you’re creating boxy magazine themes also you don’t need to use them in all of your small pages.
3:57 pm on August 26th, 2008
Nice list. I dugg it.
2:22 am on August 27th, 2008
Thanks for the links to the CSS forms stuff, I’ve been looking for something like this for a while. Shame there’s little support in Safari, Camino and (by the looks of it) Firefox 3 for some of the the techniques used though
6:33 am on August 27th, 2008
I disagree with Andrei and Jermayn - when you’re working on real projects with real deadlines then you need to know how to work efficiently; of particular importance in a dev team with multiple web UI designers so you’re working off a common framework rather than having to work in series and wait for one person to build a base for other designers to work off or developing their own stuff from scratch.
3:31 am on August 30th, 2008
@NathanaelB - the title of the post, is essential skills that every web designer should learn. The points you make refer to designers working in large teams. There’s a lot of other design shop configurations where learning a framework wouldn’t be essential. Freelancers in particular would probably benefit the least from using a pre-built framework (yes, freelancers also work on real projects with real deadlines).
10:18 pm on September 4th, 2008
web tasar?mc?lar?n?n bilmesi gerekli 9 önemli CSS tekni?i
http://www.joyoge.com/oku/610/web-tasarimcilarinin-bilmesi-gerekli-9-onemli-CSS-teknigi.html
thanks you for nice tuts…
5:16 pm on September 5th, 2008
I love when people like NathanaelB come along and are like “hohoh, I’m a real web professional - my opinion is right because I have real life scenarios to back myself up!”. Your personal preference, or the way you’ve found that works for you doesn’t make you right
Personally, I don’t think that css frameworks are really worth it. I mean, I use a reset stylesheet from one (can’t remember which), but that’s it. I likes to do it all myself so I know what I’m doing when I’m debugging. You can also keep track of CSS in large projects with good coding standards and documentation.
7:37 pm on September 6th, 2008
It’s amazing how CSS makes no sense for ages if you have moved from tables, then, one day, things just start to fall into place.
I think this list covers everything, lets be honest.
11:38 pm on September 6th, 2008
thank you very much for making this list,I’ve been new to css and still trying to learn it
12:23 pm on September 7th, 2008
Awesome
4:47 am on September 8th, 2008
A Great post. thanks a lot.
9:05 pm on September 8th, 2008
Good post. But how can you ignore CSS floats?
10:45 am on September 9th, 2008
Being able to use css frameworks can hardly be described as being “essential”. Link bait.
2:30 pm on September 11th, 2008
useful indeed. thanks a lot
2:59 pm on September 13th, 2008
Very nice. CSS is a great skill and ability. I think all designers should be intimately familiar with it. Also, it makes cross browser compatibility, XHTML/CSS validation, and a myriad of other things all the more simple.
3:35 am on September 14th, 2008
Thank you kindly for this truly valuable, comprehensive list. It really helps me focus on what I need to do to jump back into CSS.
8:03 pm on September 23rd, 2008
Really useful post, thanks
4:14 pm on September 26th, 2008
A wealth of information. Thanks!
6:15 am on October 15th, 2008
Thank’s it’s really helpful.