Learn CSS tips and tricks

The aim of this article is to help people to improve the code they write, whether they are beginners who haven’t had the chance to learn these lessons themselves yet, or masters who may have missed a trick or two. Of course, that’s not to say I’m such a master, far from it, but I do have knowledge that can help others. This given below article will help you to learn CSS tips and tricks, I hope.

 

1. Overflow Ellipsis

Text-Overflow property of css is very useful, If text is big and is going out of the block. I have seen in many websites, instead of showing full description they only showing 5-6 words with three dots at the end. Previously designers were using images for three dots. But, now it is possible css also.

Please see my given below codepen:-

 

 

2. Create an IE Specific Stylesheet

The biggest challenge for designers is to show website properly in IE Browser. Below is the trick with the help of which, it’s very easy to make IE compatible websites. We can create a separate css for IE and include it in the webpage whenever the client is using Internet Explorer.

IE Only
IE 7 Only

 

3. Cross Browser Opacity

Now days, its very easy to use OPACITY, even when we are talking about cross-browser.

.transparent {
/* IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
/* IE 5-7 */
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

 

4. Ease in on hover

If you haven’t used transitions before, then it means you are missing the beautiful effect of css. You can show the color change on hover with slow animation effect. Make your website more attractive with css transition.

a {
color: #000;
-webkit-transition: color 1s ease-in; /*safari and chrome */
-moz-transition: color 1s ease-in; /* firefox */
-o-transition: color 1s ease-in; /* opera */
}a:hover {
color: #c00;
}

 

5. Icon webfonts

Forget about creating new icons for website. It’s a very difficult task to create icons for web applications. For one application, designer have to make 100’s of icons, it’s a very time consuming task. If you don’t want to waste your precious time, you can call Icon webfonts library directly to your application. It’s very easy , fast and useful.

Once you upload the library into your solution then you simply have to drop the markup in your html file. Below is an example of creating two icons with links to my Twitter and Facebook profiles.

<a href=”https://twitter.com/devdizdd”><i class=”icon-twitter”></i></a>
<a href=”https://www.facebook.com/devdiz/”><i class=”icon-facebook”></i></a>

Some free libraries are:-

https://fortawesome.github.io/Font-Awesome/
https://icomoon.io/

 

6. Border radius

Border radius is a easy way to display any square image in a circular form.
given below is the example that you can use border radius in css:-

html:

<img class=”circular-img” src=”woman.png” />

And the css:

.circular-img {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

 

7. Use reset.css

Browsers like Firefox and Internet Explorer have different ways of handling CSS styles. Hence, it’s very difficult to maintain websites design in different browsers. 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

 

8. Use Shorthand CSS

Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code cleaner, short and easier to understand.

Instead of creating CSS like this:

.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}

We can write this:

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

 

9. Forget TABLE, try DIV

To achieve total flexibility in terms of styling <div> is the greatest advantage of css. <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. So, if you want more flexible styling use <div>.

 

10. CSS Debugging Tools

Firefox and chrome have inbuilt inspect element means, these are the tools by which we can debug not only css but js, html and so many things. 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 and third party CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.

 

 

11. Knowing !important

Any style written with !important will be taken as high priority by browser. Given below is a example

.wrapper {
background-color:red !important;
background-color:blue;
}

In the example above, background-color:red will be adapted because it’s written with !important, even when there’s a background-color:blue; below it. !important is used in situation where you want to force a style without something overwriting it.

 

12. Replace Text with Image

Sometimes, we want to show image instead of text, but you want to write text also. We can do it or we can hide text with “text indent” and we can show image as a background. Here’s how you do it.

h2 {
text-indent:-9999px;
background:url(“title.jpg”) no-repeat;
width:100px;
height:50px;
}

Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {…} with a fixed width and height.

 

13. Web Page Printing with CSS

It is possible to write css for print command in browser. There are many people who use the Internet who still like to print out useful articles and store them in paper form. In order to pull this off, you need to use CSS/XHTML page breaks.

@media all
{
.page-break { display:none; }
}@media print
{
.page-break { display:block; page-break-before:always; }
}

 

13. Attribute-Specific Icons

CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

a[href$=’.doc’] {
padding:0 20px 0 0;
background:transparent url(/graphics/icons/doc.gif) no-repeat center rightright;
}

 

14. Remove Dotted Link Borders

Most browsers have feature dotted borders around links by default. It’s for users who must or choose to navigate by keyboard, there is a visual style applied to those links when “tabbed” to. These borders also show up when the link is clicked (in it’s “active” state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen).

You can remove them with this:

a:active {
outline: none;
}

 

15. RGBA Opacity

RGBA is the way to declare color in css with alpha transparency support. Sometimes we want to reduce the opacity of DIV but if we use OPACITY property of css it will not even reduce the opacity of DIV background , it will reduce the opacity of contents inside DIV also. So, for that kind of situations we can use RGBA, (color with opacity)

For example:

div {
background: rgba(200, 54, 54, 0.5);
}

 

16. Media Query

Media queries are an excellent way to deliver different styles to different devices, providing the best experience for each type of user. A part of the CSS3 specification, media queries expand the role of the media attribute that controls how your styles are applied.

For example:

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

 

Conclusion

Hope it will be helpful!

 

 

Ajay Malhotra

UI Developer & Designer

2 thoughts on “Learn CSS tips and tricks

  • April 22, 2016 at 7:11 pm
    Permalink

    Good and very useful article for designing and managing a web application in a stylish ways. This information can help the designer and developers to perform any tricks without any alternative thinking.
    Also for building a short type of panel this can also help to rebuild the construction of a page.
    Thanks a lot.


    Regards,
    Sourav Basak [Blogger, Entrepreneur, Thinker]
    http://www.namasteui.com

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *