CoreyMS

Development, Design, DIY, and more

  • Contact
  • Portfolio
  • Development
    • Python
    • Git
    • Terminal
    • JavaScript
    • WordPress
  • Design
    • CSS
  • DIY
    • Woodworking
    • Home Improvement
  • Contributors
  • Support
  • Giveaway

CSS Tips and Tricks: Add External URLs to Print Stylesheets

January 2, 2015 by Corey Schafer 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) " )";
}

Filed Under: CSS, Design Tagged With: Video

Using Font Awesome in Desktop Applications (OS X)

July 15, 2014 by Corey Schafer Leave a Comment

A Quick walkthrough on how you can download and use the Font Awesome icon font in your Mac desktop applications such as Photoshop, GIMP, Illustrator, Pages, and more.

Filed Under: CSS, Design Tagged With: Font Awesome, Icon Fonts, Mac, OS X, Video

Ems and Rems for Sizing

September 21, 2013 by Corey Schafer Leave a Comment

What are Ems and Rems?

Ems and Rems both are scalable units in CSS which are relative to a base font-size in pixels. So what’s the difference between the two?

Read more…

Filed Under: CSS, Design

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

July 1, 2013 by Corey Schafer 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…

Filed Under: CSS, Design Tagged With: font, typography

Main Contributor

  • Andre Nevares

Top Contributors (17)

  • Andre Nevares
  • Cyril Hediger
  • Abhilash Rajan
  • Hien Nguyen
  • Alan Hawse – iotexpert.com
  • Just a Guy
  • Alex Canady
  • Sergey Trubin
  • Justin Presley
  • Sirake
  • chris
  • Jerome Massey
  • Robert Butler
  • Jonathan Llovet
  • David Myers
  • Karthik
  • Michael Zoitas

Thank You! If you would like to have your name listed as a contributor and support the website, you can do so through my Patreon Page. I am extremely grateful for any support.

Search CoreyMS.com

Subscribe to Future Posts

Recommended Books

Podcasts I Listen To

Tech Related:
Talk Python To Me
Shoptalk Show
Software Engineering Radio
HanselMinutes
CodePen Radio

Non-Tech Related:
Dan Carlin's Hardcore History
Bill Burr's Monday Morning Podcast
Waking Up with Sam Harris
StarTalk Radio
Talk Nerdy with Cara Santa Maria

© 2023 · CoreyMS · Corey Schafer