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
Jun 26th, 2025
The year is 2025, and the landscape of software development is buzzing with innovation. Amidst this rapid evolution, one tool stands out as a true game-changer: GitHub Copilot. What started […]
Read more
Jun 24th, 2025
Artificial Intelligence (AI) is no longer a futuristic concept. From chatbots answering customer queries to language models assisting developers with code generation, AI has firmly embedded itself in our digital […]
Read more
May 29th, 2025
Choosing the right programming language can make all the difference — whether you’re building cutting-edge AI, launching a startup, or simply looking to future-proof your skills. The year 2025 has […]
Read more