How to style a link by filetype in CSS

To style a link by filetype in CSS you can use the following snippet.

Sample CSS

a[href$=".exe"] { background: url(icons/exe.png) left center no-repeat; padding-left: 50px; }
a[href$=".rar"] { background: url(icons/rar.png) left center no-repeat; padding-left: 50px; }
a[href$=".doc"] { background: url(icons/doc.png) left center no-repeat; padding-left: 50px; }
a[href$=".pdf"] { background: url(icons/pdf.png) left center no-repeat; padding-left: 50px; }
a[href$=".zip"] { background: url(icons/zip.png) left center no-repeat; padding-left: 50px; }
a[href$=".html"] { background: url(icons/link.png) left center no-repeat; padding-left: 50px; }

How to make a text blur in CSS

To make a text blur in CSS you can use the following snippet.

Sample CSS

.blurtext {
    color: transparent;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    font-size: 60px;
    -webkit-transition: text-shadow 2.0 ease-out; 
    -o-transition: text-shadow 2.0 ease-out; 
    -ms-transition: text-shadow 2.0 ease-out; 
    -moz-transition: text-shadow 2.0 ease-out; 
    transition: text-shadow 2.0 ease-out;
}

CSS Web Safe Font Combinations

CSS Web Safe Font Combinations

Serif Fonts

  • Georgia, serif
  • “Palatino Linotype”, “Book Antiqua”, Palatino, serif
  • “Times New Roman”, Times, serif
  • Sans-Serif Fonts

  • Arial, Helvetica, sans-serif
  • “Arial Black”, Gadget, sans-serif
  • “Comic Sans MS”, cursive, sans-serif
  • Impact, Charcoal, sans-serif
  • “Lucida Sans Unicode”, “Lucida Grande”, sans-serif
  • Tahoma, Geneva, sans-serif
  • “Trebuchet MS”, Helvetica, sans-serif
  • Verdana, Geneva, sans-serif
  • Monospace Fonts

  • “Courier New”, Courier, monospace
  • “Lucida Console”, Monaco, monospace
  • source: W3Schools