CoreyMS

Development, Design, DIY, and more

CSS Tips and Tricks: Add External URLs to Print Stylesheets

by Leave a Comment

Printing out URLs can be a nice edition to print stylesheets. When someone prints your article or blog post, you want them to know where your links would have taken them so that they can investigate those sources further if they desire.

However, you don’t want to include every link in the print stylesheet. Your internal links that loop back to your own website aren’t necessary and will bog down the print stylesheet with a lot of unneeded text.

So how do we add only the external links to the print stylesheet? In this video, we will cover several techniques you can use in order to achieve this.

The code I use to display external links within this website’s print stylesheet is:

a:not([href^="http://coreyms"])::after {
   content: " ( " attr(href) " )";
}

Adding Custom Web Fonts to Your Web Site Using CSS Font-Face

by Leave a Comment

Adding custom web fonts to your website is one of those things that seems like it should be easier than it actually is. In this video tutorial, we’ll walk through how to add a custom font to your website using the FontSquirrel.com Web Font Generator. Let’s Get Started:

Additional Information

Let’s look further into the CSS @font-face rule generated by FontSquirrel:

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The top line of the @font-face rule is “font-family”. This is the name we are assigning to our custom font. It can be anything we choose. If we wanted, we could rename the font to something easier to remember and use that throughout our CSS.

Read more…