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
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% [?]
Related Posts
- Creating CSS Layouts: The Best Tutorials on Converting PSD to XHTML
- PHP Tutorials Utopia: 13 Vital PHP skills for every novice PHP developer and solutions
- Utilizing CSS Best Practices: Making a Great Blank CSS Template File for Next Projects
- Essential Shortcuts for Geeks: Over 21 Software & Web Services
Don't miss any post, Subscribe to our to stay up to date
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.
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
better yet:
p { margin: 0; }
or
p { margin: 5px 10px; }
CSS frameworks are one of the best things that i’ve found on the net, it makes one’s life much more easier.
Thanx 4 this wonderful list. very useful.
fantastic as usual, thanks
Good list, thanks for sharing.
great list.its really helpful.keep up the good work:)
Ronald
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
Some excellent tips there. I’ll be using more than a few of them in the future!
Why should there be a requirement to learn CSS frameworks? If you’re knowledgeable at CSS you don’t need all that code bloat.
I have recently been looking for tips on styling my forms better, thanks for the link and list.
disagree about the frameworks….
Most of them are just bloated code that then interferes with the optimisation which is number 7.
@ 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.
Nice list. I dugg it.
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
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.
- 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).
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…
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.
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.
thank you very much for making this list,I’ve been new to css and still trying to learn it
Awesome
A Great post. thanks a lot.
Good post. But how can you ignore CSS floats?
Being able to use css frameworks can hardly be described as being “essential”. Link bait.
useful indeed. thanks a lot
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.
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.
Really useful post, thanks
A wealth of information. Thanks!
Thank’s it’s really helpful.
Nice list. Thanks!
Very Very Thanks …. Very Nice Tips ….
Me ha sido de gran ayuda todo esto que han puesto aqui.
Great list, I was just looking for some good tutorials on list styling yesterday.
Thanks for sharing..
Great tips
Very useful. Thank you.
Great reminder list !
Thanks
hello ,
thanks
regards ,
wow, Great, Thanks
This is a great list, thanks!
I’m a big CSS advocate so will certainly be looking at a few of the advanced tips and tricks.
I know most of them, but anyway this is very useful resource, thanks!
Very useful collection.
Thanks.