CSS

How to convert px to ems

H

Use the following formula to calculate px’s to ems
1 ÷ browser default font size x pixels to convert
A browsers default font size ussually is 16px
so if you want to convert 12px’s to ems do the following
1 ÷ 16 x 12 = 0.75 ems

How to convert px to percentage

H

Use the following formula to calculate px’s to percentage
pixels to convert ÷ browser default font size x 100 = percentage
A browsers default font size ussually is 16px
so if you want to convert 12px’s to percentage do the following
12 ÷ 16 x 100 =  75 %

How to convert all text to uppercase using CSS

H

If you have text within a div tag that you want to convert to Uppercase you can achieve this using the CSS text-transform property that was introduced in CSS1 E.g. You want to convert  <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> to   <div> LOREM IPSUM IS SIMPLY DUMMY TEXT OF THE PRINTING AND TYPESETTING INDUSTRY. </div> to do...

Removing Dotted Outline Around Active Link using CSS

R

When a link on a webpage becomes Active sometimes a Dotted Outline appears which might look ugly in certain circumstances.The CSS outline property should be used to remove or style the Dotted Outline.
If you want to remove this Dotted Outline from every active link on the webpage simply add the following code:

a {
   outline: 0;
}

How to use Font Awesome Icons as Bullets

H

This could be accomplished by using the built in Font Awesome CSS classes Add the fa-ul class to the ul html tag Between the li tags add <i class=”fa-li fa fa-stop”></i> replacing the fa-stopCSS class with the icon class you would like to show as the bullet Example: <ul class="fa-ul">  <li><i class="fa-li fa fa-stop"></i>Bullet 1</il>...

About Author

Ian Carnaghan

I am a software developer and online educator who likes to keep up with all the latest in technology. I also manage cloud infrastructure, continuous monitoring, DevOps processes, security, and continuous integration and deployment.

Follow Me