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.
Find us on Google+
Related Posts...
CSSTechnologiesWeb Design
Mar 26th, 2024
Cybersecurity in finance is a hot topic these days. With more and more financial transactions happening online, it’s crucial to keep our financial information safe from cyber threats. But what […]
Read more Mar 14th, 2024
Taxi Booking App Development Company in Singapore
Read more Mar 12th, 2024
The contemporary information technology (IT) landscape is characterised by an exponential growth in data generation, primarily occurring at the network’s edge. This surge poses a challenge to traditional, centralised computing […]
Read more