In this “epicsode”, Jessica covers some type history and many CSS terms you’ll come to know and love
Don’t Fear Web Typography A Massive Introduction
Woah! This is a really intense episode but I think you’ll know more about type by the end of it than most of your design contemporaries! Below are links to the HTML and CSS files for all the steps I walk you through in the video. Since a lot of information is covered in this episode, I recommend that you watch it more than once and that you use your web inspecting skills liberally with all of these sample files.
By the end of the video (and after examining the files) you should feel pretty confident to start editing existing blog CSS files. We’re really excited to help you learn, so look forward to the next few episodes when we tell you how to get your site online and how to do some beginning to advanced level layout design, all within the browser.
Step 1 / CSS
In our first step, I change the typeface to Georgia and make some small tweaks to Russ's last html file including adding a larger image to give us more flexibility later.
Step 2 / CSS
In the second step, I make the lists look a bit less gross and set a parameter for our images to make sure they never exceed the size of their containers.
Step 3 / CSS
In this step, I add ornaments around the prices that have a class of "ornament" so if I feel like adjusting them later it will be easy as pie.
Step 5 / CSS
In this step, I centered all the text and made tweaks to the headlines using some of the terms we're already familiar with. I also explain how to add a border to text or images and show all the ways you can customize borders.
Step 6 / CSS
In this step, I target some of the individual headlines with classes and ID to further fancify them.
Step 7 / CSS
In this step, I show a little bit of inline styling, explaining what “font-variant: small-caps;” means and how to fake it if a typeface doesn’t come with real small caps.
Step 8 / CSS
In this step, I add one of my Daily Drop Caps to the layout and make a few adjustments to our main image using our new border knowledge.
Step 9 / CSS
Step 10 / CSS
Step 11 / CSS
In these steps I make a bunch of little stylistic tweaks that you can feel free to inspect but are beyond what we learned in the video today.
There is one thing I have had a lot of problem with. I am trying to upload a logo with a transparent background. I’ve saved it as .png, uploaded it to flickr, and then copy and pasted the url into my html file. The background is always white..
Is there a way of linking the .png file directly from my computer without passing through the internet (flickr)? Where should I be storing my images to use them on the website?
Sophie,
We’re going to cover buying website domains and hosting in a future video. Once you have your own hosting you’ll be able to host your own images (huzzah!). The specific problem with Flickr may be that they’re converting your .png file to a .jpg file on their end in order to reduce file size costs on their end. Usually .pngs are much larger in file size than .jpgs and this is a common thing large image hosting sites do to save on server space.