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 Tips
Category: CSS, CSS3 Tutorial | 1,881 views | 1 Comment |
-
Use
Reset.CssWhen it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them.
reset.cssresets all fundamental styles, so you starts with a real blank new stylesheets.Here are few commonly used
reset.cssframeworks - 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
ClassAndIDThese two selectors often confuse beginners. In CSS,
classis represented by a dot “.” whileidis a hash ‘#”. In a nutshellidis used on style that is unique and don’t repeat itself,classon the other side, can be re-use.More - Class vs. ID | When to use Class, ID | Applying Class and ID together
-
Power Of
<Li><li>a.k.a link list, is very useful when they are use correctly with<ol>or<ul>, particulary to style a navigation menu.More - Taming Lists, Amazing LI
-
Forget
<Table>, Try<Div>One of the greatest advantage of CSS is the use of
<div>to achieve total flexibility in terms of styling.<div>are unlike<table>,where contents are ‘locked’ within a<td>’s cell. It’s safe to say most<table>layouts are achievable with the use of<div>and proper styling, well maybe except massive tabular contents.More - Tables are dead, Tables Vs. CSS, CSS vs tables
-
CSS Debugging Tools
It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, andFirebug.
Organizing Your CSS Files
Category: CSS | 1,280 views | 2 Comments |
Order Your CSS Sensibly
The first thing you should remember is that the first letter in CSS stands for “Cascading”. This means that the styles that are applied to a document are applied in a cascade - something like a waterfall. As the browser reads through the document, the last properties that are defined are the ones that take precedence (with some exceptions). That means that you should order your CSS document to take advantage of that cascade. Put the most general properties first, and your most specific properties last.
General CSS Properties
CSS properties that I like to think of as “general” are ones that cover the most elements on your pages. For example, on a Web site, usually you would define the default font family, color, and size, as well as the background color and/or image, and page margins. These style properties you should put first in your stylesheet to define your entire site. For example:
html, body { margin: 0px; background-color: #fff; }
p, h1, h2, h3, h4 { font: .8em Arial, Helvetica, sans-serif; color: #000; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.2em }
h3 { font-size: 1em; }
h4 { font-size: .8em; }
This insures that even if you have no other definitions on a page, they will have the same background color and font as the rest of your site. General styles are styles that are applied when there is no other specific information about the element. Read more…