Top Useful CSS Tips For Beginners
Category: CSS | 3,314 views | 8 Comments |
Use reset.css
When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.
Here are few commonly used reset.css frameworks – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli
Use Shorthand CSS
Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.
Instead of creating CSS like this
- .header {
- background-color: #fff;
- background-image: url(image.gif);
- background-repeat: no-repeat;
- background-position: top left;
- }
It can be short-handed into the following:
- .header {
- background: #fff url(image.gif) no-repeat top left
- }
More – Introduction to CSS Shorthand, Useful CSS shorthand properties
Understanding Class and ID
These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use. Read more…
Use reset.css
When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.
Here are few commonly used reset.css frameworks – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli
Use Shorthand CSS
Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.
Instead of creating CSS like this
- .header {
- background-color: #fff;
- background-image: url(image.gif);
- background-repeat: no-repeat;
- background-position: top left;
- }
It can be short-handed into the following:
- .header {
- background: #fff url(image.gif) no-repeat top left
- }
More – Introduction to CSS Shorthand, Useful CSS shorthand properties
Understanding Class and ID
These two selectors often confuse beginners. In CSS, class is represented by a dot “.” while id is a hash ‘#”. In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use. Read more…
Top CSS Mistakes Web Developers Make
Category: CSS, CSS3 Tutorial | 1,691 views | 1 Comment |
1. Not Using a Proper CSS Reset
Web browsers are our fickle friends. Their inconsistencies can make any developer want to tear their hair out. But at the end of the day, they’re what will present your website, so you better do what you have to do to please them.
One of the sillier things browsers do is provide default styling for HTML elements. I suppose you can’t really blame them: what if a “webmaster” chose not to style their page? There has to be a fallback mechanism for people who choose not to use CSS.
In any case, there’s rarely a case of two browsers providing identical default styling, so the only real way to make sure your styles are effective is to use a CSS reset.
What a CSS reset entails is resetting (or, rather, setting) all the styles of all the HTML elements to a predictable baseline value. The beauty of this is that once you include a CSS reset effectively, you can style all the elements on your page as if they were all the same to start with. It’s a blank slate, really.
There are many CSS reset codebases on the web that you can incorporate into your work. I personally use a modified version of the popular Eric Meyer reset and Six Revisions uses a modified version of YUI Reset CSS. You can also build your own reset if you think it would work better.
What many of us do is utilizing a simple universal selector margin/padding reset.
* { margin:0; padding:0; }
Though this works, it’s not a full reset. You also need to reset, for example, borders, underlines, and colors of elements like list items, links, and tables so that you don’t run into unexpected inconsistencies between web browsers. Read more…
Top 15 CSS articles
Category: Articles | 2,070 views | Add a Comment |
- 53 CSS-Techniques You Couldn’t Live Without
- css examples
- http://csshook.com/cssexamples/top-50-best-css-articles-and-resources/
- How to make sexy buttons with CSS
- Learn to slice your templates into fully valid XHTML and CSS web pages
- Powerful CSS-Techniques For Effective Coding
- http://csscody.com/top-100-best-css-articles/
- 25 Code Snippets for Web Designers (Part1)
- Cheat Sheets for Front-end Web Developers
- (The Only) Ten Things To Know About CSS
- Using CSS to Fix Anything: 20+ Common Bugs and Fixes
- http://csscody.com/category/css/
- The RIGHT way to convert your Photoshop design to XHTML and CSS Layout
- Are You Making These 10 CSS Mistakes?
- http://csshook.com/cssexamples/category/css-examples/