CSS Styles - Fonts

Question

Hi guys,

Im trying to replicate a design into HTML / CSS. The problem is that the text within the site changes between two different colours, multiple font sizes and different font weights. Also the text can be stand alone or multiple types on one line.

I am including a sample below.. These font styles are used all over the site.

So my question. What would be the "correct" way to style these in CSS/HTML? Currently im using multiple classes for the colours, sizes and weights.. It seems to be all over the place. The second problem is some elements need to be on their own lines. Whats the correct method of ending a line?
or turning it into a block elemet?

Thanks in advance..

Answer 1

So my question. What would be the "correct" way to style these in CSS/HTML? Currently im using multiple classes for the colours, sizes and weights..

Yeah. Not that way.

The problem with this approach is to change the style of one element, you have to change your markup rather than your CSS. Also, as you've already discovered, it gets your markup messy fast.

The "correct" way would be to have a class for each regular block, even if it looks the same in many ways as another block.

A block containing "Royal Kostas apartments, Majorca" may be the same font and size as a block containing "From Manchester" but that doesn't mean you should try to remove the duplicated code from the CSS. Many have tried to find ways to create DRY CSS files and it only leads to pain when the marketing / design department decide to reduce the font size of "From Manchester" but not the rest.

A trickier choice is where the styles are completely identical, like "Royal Kostas Apartments, Majorca" and "For 7 nights 3* Self Catering based on 4 sharing". I would still argue that they should be different classes with the exact same style, but that's a personal choice.

I tend to lean heavily towards this guideline: if redesigning the site, using the same data, requires a change to the markup, you're doing it wrong.

Answer 2

You don't want to name your CSS classes based on the visual style. Design your CSS around the function or area that the style is being used for. In the visual you attached, you could make a TabHeader style, Price style (for the left hand column), Details style, MoreInfo style. You get the idea.

Since the fonts are all apparently different, you will obviously define the font property, as well as the font weight, color, style, etc. Keep it self contained and you'll have less headaches later on.