1. 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

2. 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

   view plaincopy to clipboardprint?

   1. .header {  
   2.       background-color: #fff;  
   3.       background-image: url(image.gif);  
   4.       background-repeat: no-repeat;  
   5.       background-position: top left;   
   6.     }  

   It can be short-handed into the following:

   view plaincopy to clipboardprint?

   1. .header {  
   2.       background: #fff url(image.gif) no-repeat top left  
   3.     }  

   More - Introduction to CSS Shorthand, Useful CSS shorthand properties

3. 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.

   More - Class vs. ID | When to use Class, ID | Applying Class and ID together

4. 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

5. 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

6. 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.

   Read more…

   

   • Organizing Your CSS Files
   • 100 CSS Examples and Tutorials
   • 150 CSS Examples
   • Top CSS Tips
   • Introduction to CSS3
   • Margins and Absolute Positioning
   • Top reasons sites break in IE 7
   • Write a Clean CSS
   • How to design css sitemap Tree
   • Top 10 CSS Tips

    

First Issue: Several people have commented that they would like a way to clip out the center part of the image. There are two options for this: A) Keep the middle part by default (current behavior). Add an empty keyword that clips out the middle part. B) Make the middle part clip out by default. Add afill keyword that keeps it. (It’s needed for stretch-tiling things like aqua buttons.) Of course we might also just keep the current solution, C) have authors make that part of the image transparent. Comments? What would you use?

Second Issue: The syntax is particularly arcane. One commenter suggested breaking up border-image into multiple properties, leaving border-image itself as a shorthand. For example,

border-image: url(...) 20% 40% / 10% 4em 20% / 0 1em;

would be equivalent to

border-image-source: url(...);
border-image-slice: 20% 40%;
border-image-widths: 10% 4em 20%;
border-image-outset: 0 1em;

This would also allow the values to cascade independently, making it easy to e.g. swap just the image. There’s an overhead cost to more properties, however, so if we do this there needs to be a significant and useful advantage. Thoughts on this idea, or any other ideas for making border-image easier to understand? Read more…

• No Related Post

If the selectors are the same then the latest one will always take precedence. For example, if you had:

p { color: red; }
p { color: blue; }

p elements would be coloured blue because that rule came last.

However, you won’t usually have identical selectors with conflicting declarations on purpose (because there’s not much point). Conflicts quite legitimately come up, however, when you have nested selectors. In the following example:

div p { color: red; }
p { color: blue; }

It might seem that p elements within a div element would be coloured blue, seeing as a rule to colour p elements blue comes last, but they would actually be coloured red due to the specificity of the first selector. Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles. Read more…

• No Related Post

First letters and First lines

The first-letter pseudo element applies to the first letter of an element and first-line to the top line of an element. You could, for examples create drop caps and a bold first-line for paragraphs like this:

p:first-letter {
	font-size: 3em;
	float: left;
}

p:first-line {
	font-weight: bold;
}

Before and after

The before and after pseudo elements are used in conjunction with the content property to place content either side of an element without touching the HTML.

The value of the content property can be open-quote, close-quote, no-open-quote, no-close-quote, any string enclosed in quotation marks or any image using url(imagename). Read more…

• CSS PSEUDO-ELEMENTS

Approach 1: Tables

Some would argue that form fields and their labels can be described as tabular data, and so can be slotted into a table that conveniently goes hand in hand with a grid-like presentational layout:

<table>
	<tr>
		<td><label></label></td>
		<td><input /></td>
	</tr>
	<tr>
		<td><label></label></td>
		<td><input /></td>
	</tr>
	<tr>
		<td><label></label></td>
		<td><textarea></textarea></td>
	</tr>
</table>

Some might say forms can be tabular data, some might say that this is a small pile of dingoes droppings - a cop out - hammering a cylindrical peg through a square hole. Not that I’m saying that, you understand… Read more…

• CSS Forms Examples

use the CSS property vertical-align with the value super or sub or even a length to achieve rudimentary superscript and subscript, but the problem is that in a paragraph, those lines with superscript or subscript text will alter the height of that line, resulting in an inconsistently spaced paragraph.

Step 1: The HTML

The way to get around this problem is to nudge the superscript and subscript out of the whole flow a little bit so if you have the following HTML:

<p>My name is Doctor Womac and I am going to teach you all about chemical formulae.

A chemical formula is a way to describe the chemical elements that make up a particular

 chemical compound.It consists of chemical symbols to covey the elements and numbers to

 show the number of atoms of

 each element.H<span class="atoms">2</span>S0<span class="atoms">4</span> is the chemical

 formula for sulphuric Read more...


    

	
								
No Related Post