Top Useful CSS Tips For Beginners
Category: CSS | 3,140 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…
CSS ID Selector
Category: CSS | 1,459 views | Add a Comment |
Description
An ID selector matches an element that has a specific id attribute value. Since idattributes must have unique values, an ID selector can never match more than one element in a document.
In its simplest form, an ID selector looks like this:
#navigation {
? declarations
}This selector matches any element whose id attribute value is equal to"navigation". In this selector, which is equivalent to *#navigation, the universal selector is implied. The universal selector is often omitted in cases like this. Read more…
Use shorthand CSS notation
Category: CSS Tips | 1,624 views | Add a Comment |
- Shorten hexadecimal colour notation. “In CSS, when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:
#000 is the same as #000000, #369 is the same as #336699 - Define pseudo classes for links in the LoVe/HAte-order: Link, Visited, Hover, Active. “To ensure that you see your various link styles, you’re best off putting your styles in the order “link-visited-hover-active”, or “LVHA” for short. If you’re concerned about focus styles, they may go at the end– but wait until you’ve read this explanation before you decide.”
- a:link { color: blue; }
- a:visited { color: purple; }
- a:hover { color: purple; }
- a:active { color: red; } Read more…