Legacy website - CSS best practice?

Question

I work for a retailer in the UK with a large bricks and mortar presence and a growing web team. We use a pretty old CMS with legacy issues (no documentation, little knowledge and confidence to touch the 'back-end'). It's fit for purpose, but we don't touch CSS (unless in-line) or mess with the website much. I have a few questions.

With CSS what rules take precedence? I know CSS at the bottom of a document will overrule earlier styling, but are in-line <style> tags the final effect on all browsers?

We have a font we like to use - Baskerville. How available is this cross-browser? Can we pay for a way of using Baskerville in, say, our h1, h2 and h3 tags? Would this essentially just be buying the rights to the font? We have already done this for use in images.

If you can do this we would be willing to pay you, but the better your qualifications the more chance we will be able to have the work approved.

Thanks very much. Help appreciated.

Answer 1 · 2013-01-01T21:55:40Z

January 1, 2013 9:55pm

With CSS what rules take precedence? I know CSS at the bottom of a document will > overrule earlier styling, but are in-line tags the final effect on all browsers?

Usually the precedence goes as follows, starting with least 'effective' or lowest priority:

@import

@import url('/css/styles.css');

external stylesheet

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

styles in the head

<style>p { marging: 20px;}</style>

styles on the element

<p style="margin: 20px"></p>

We have a font we like to use - Baskerville. How available is this cross-browser?

Baskerville is supported approx. 93% on Macs, 60% on PCs. You could use a font stack as below, to make use of fallbacks where Baskerville is not local to the users computer.

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

Can we pay for a way of using Baskerville in, say, our h1, h2 and h3 tags?

Yes, from the likes of FontStack

Would this essentially just be buying the rights to the font?

Depends on your usage and from whom you use the font(s) through; usually you get a piece of code to include to enable the font on your website, rather than the downloadable format.

If you'd like me to take a look or help out further, dont hesitate to email me at info@caroline-murphy.co.uk :-)

Answer 2 · 2013-01-01T22:07:28Z

January 1, 2013 10:07pm

Hi Paul,

Don't be scared to play around with the CSS files, just make sure you have it all backed up properly. If you use FireFox - you can download FireBug (http://getfirebug.com/) - which lets you mess around with the CSS - in browser, in real-time - without affecting your actual files (so nothing to worry about!).

To achieve the use of anything-other-than-standard-fonts on your website, you have a few options. The first is http://www.google.com/webfonts (free). If you search for Baskerville - you might not find the exact version of Basker that you want - especially assuming it's a premium version of the font you're wanting to use!

There are two options, that I've personally used (I'm sure there are many more).

http://www.fontdeck.com and http://www.typekit.com

Both will most probably have the exact font you're after - and really they're not THAT expensive. Essentially, it charges you per "view" - so if you are running the next big thing, costings may come into the equation. However, for a simple website, it'll probably run you $10 or so per year.

Once you purchase the right to use the fonts online - it's very simple to start using them. They'll give you detailed instructions at purchase. But, really all you have to do is upload a CSS style sheet provided by them - and then call the font name in your original CSS files (your h1, h2, p tags)!

Hope that helped a little!

Sam

Welcome to the Treehouse Community

Looking to learn something new?

Paul Carter

Paul Carter

Legacy website - CSS best practice?

2 Answers

Caroline Hagan

Caroline Hagan