Here are some simple yet effective CSS tips for beginners.
1. Shorthand your CSS
Shorthand CSS gives you a better and shorter way of writing your CSS codes. It makes the code more readable and easier to understand.
Instead of creating CSS like this
.header {<br>
background-color: #cccccc;<br>
background-image: url(tree-image.gif);<br>
background-repeat: no-repeat;<br>
background-position: top right; <br>
}
You can write it as –
.header {<br>
background: #cccccc url(tree-image.gif) no-repeat top right<br>
}
2. Use reset.css to reduce browser inconsistencies
Use reset.css stylesheet to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.
3. Fluid Images
To create fluid images or flexible images set a max-width on the images to be 100%
img {max-width: 100%}
Remember Internet Explorer doesn’t allow max-width. However IE treats the width property as though it was max-width. So, for IE you can use a conditional comment and set
img {width: 100%}
4. Replacing Text with Image
Here is a method to replace text based title to image using <h1>title</h1>
h1 {<br>
text-indent:-9999px;<br>
background:url(“title1.jpg”) no-repeat;<br>
width:200px;<br>
height:150px;<br>
}
text-indent:-9999px; will throws your text title off screen, replaced by an image declared by background:url(“title1.jpg”) no-repeat; with a fixed width and height.
5. 3D Buttons using CSS only
3D CSS buttons are very easy to create using CSS. Just give your elements borders with different colors.
div#button {background: #888; border: 1px solid; border-color: #555 #666 #666 #555 }
The above written CSS will create a button with the light source at the upper left.
Sep 19th, 2013
Here are some simple yet effective CSS tips for beginners. 1. Shorthand your CSS Shorthand CSS gives you a better and shorter way of writing your CSS codes. It makes the code more readable and easier to understand. Instead of creating CSS like this .header {<br> background-color: #cccccc;<br> background-image: url(tree-image.gif);<br> background-repeat: no-repeat;<br> […]
