Starter CSS Tricks
So, you are just a newbie in the Webmaster world and are still learning CSS? Here are a few starter tricks that you might want to keep handy while learning advance CSS techniques/methodologies or syntax. The CSS snippets shown below are just a few basic CSS tricks that you can use to learn and can very well apply to websites.
While learning CSS, one major concern for you would be keeping in mind browser share over the Internet. What works with one browser may not work with another. The scope of this article would be just to impart basic newbie knowledge about industry tricks, some of which might have now become a standard. This article will not be delving in to CSS for Beginners. There’s a lot more to CSS and our upcoming articles on CSS would discuss and take the scope further for now, lets just dive in to some basic CSS tricks.
CSS Trick #1: Underline On Hover over text links
You must have visited many websites that show links that have no underline at first, but once you move your mouse over such links the underline auto appears below such links. Well its no magic for one, and in the world of CSS Magic, this has become almost a standard, giving you cleaner links or link appearances. How do you achieve this using CSS? Read on.
<style type="text/css">
<!--
A:link { text-decoration: none }
A:visited { text-decoration: none }
A:hover {text-decoration: underline}
-->
</style>
CSS Trick #2: Placing Lines above and below links
Want to place underlines over and below text links? Here’s how-to;
<style type="text/css">
<!--
A:hover { text-decoration: overline underline }
-->
</style>
Looking at the above code, you can also modify the above code to show only an overline over such text links. For E.g:
<style type="text/css">
<!--
A:hover { text-decoration: overline }
-->
</style>
CSS Trick #3: Text links with underline and color change on hover over
If you have wondered about how to change the color of text links when the mouse hover over’s such links, here is the answer 
<style type="text/css">
<!—
A {color:#000000; text-decoration:none}
A:hover { color: #000000; background-color: #ffff00; text-decoration: overline}
-->
</style>
CSS Trick #4: No Tiling Background
Ever wondered how you could stop the tiling of some images applied as background to your <TD> tags, or your <DIV> tags or for the matter your <BODY> tag?
<style type="text/css">
<!--
BODY { background: #ffffff url(imagenamewithrelativepath.jpg) no-repeat center}
-->
</style>
Here, the no-repeat of the ‘URL’ directive conveys to the browser not to repeat or “tile” the image and the ‘center’ directive requests the browser to display such an image in the middle or center of the web page.
CSS Trick #5: Applying images to button controls or changing colors on button colors
Don’t like the way the browsers render your buttons? Well here are some ways to change that!
The below code would change the foreground and background color of the button control.
<input style="background-color: #000000; color: #ffff00; font-weight: bold; font-size: 10pt;" type="submit" value="Click Me">
Whereas, the below code mentioned within the “style” parameter of the input tag would apply a background image to the button control, with changing the foreground color.
<input type="submit" style="background-image: url(nameofimageforbutton.jpg); color: #000000; font-weight: bold; font-size: 13pt;">
CSS Trick #6: Want to change the color of the browser scrollbars while visinting your webpage?
The below shown code would impart color to your scroll bars.
<style type="text/css">
<!--
BODY { scrollbar-face-color: #d8afd8; scrollbar-shadow-color: #3C3C3C; scrollbar-highlight-color: #00A3F7; scrollbar-3dlight-color: #339933; scrollbar-darkshadow-color: #3C3C3C; scrollbar-track-color: #000080; scrollbar-arrow-color: #ffffff; }
-->
</STYLE>
CSS Trick #7: Big fan for Sentence Case?
The below shown code would convert the first letter or alphabet of all words within the scope of the applied CSS code to Capital.
<style type="text/css">
<!--
.sentencecaseit:first-letter{
font-size:120%;
float:left;
color:#000000;
-->
</style>
<p class="sentencecaseit">state your text here.</p>
CSS Trick #8: Hate those scrollbars on your webpage?
Here is the CSS code that will hide the scroll bars on your webpage.
<style type="text/css">
<!--
body { overflow:hidden; }
-->
</style>
For most browsers, it will disable the scrollbar, rendering page scrolling impossible.
If you would like to only disable the vertical scrollbar, then the CSS code would look like
body { overflow-x:hidden; }
Alternative, if you would like to disable the horizontal scroll bar only, then the CSS would change and become,
body { overflow-y:hidden; }
CSS Trick #9: Having fun with those <HR> Tags!
Would you like a fancy horizontal rule on your webpage? No problem at all, have a look at CSS code shown below
<hr noshade style="width: 500px; color: gray; height: 20px; text-align: center; border: 3px solid gray;">
CSS Trick #10: Play around with CSS.
The best way to come across CSS tricks is play around and test CSS combinations and permutations! That’s how we learnt!
CSS Learning Resources
Find CSS interesting, want to learn more? We suggest you start from http://www.w3schools.com/css/css_reference.asp
Some other sites for CSS we found useful.
http://css.maxdesign.com.au/
http://www.projectseven.com/tutorials/index.htm
to mention a few!
2 Responses to “Starter CSS Tricks”
Leave a Reply
Subscribe TO US
You can subscribe by email to receive newsletter updates:
Subscribe through a RSS feed reader
Hello to all
I can’t understand how to add your site in my rss reader. Help me, please
@Music_Mp3_foorOcawForry: You can add the site to your rss reader by selecting one of the many RSS links above on the right hand side, just under “Subscribe TO US” heading. You can also subscribe via email. Thanks for your interest! Have a great day.