Part of our job as web designers is to tell internet browsers, like Internet Explorer or Firefox, which font, colour and text size your website should have. A couple of years ago, this used to be done by paragraph or by header. Sometimes styling was even applied on a word-for-word basis!

This took a long time to implement and if the client changed his/her mind, it was a nightmare. For example, if a font colour was to be changed from a deep red to a slightly brighter red, it would take forever. With larger websites, this could take days, if not weeks. Style sheets are the solution!

CSS (cascading style sheets) 

Nowadays we create designs using Cascading Style Sheets that give your website a coherent look-and-feel. Style sheets allow us to determine global settings for various parts of your website.

For instance, the top menu can get one look, while a sidebar gets a different look. The header and footer each get their own styling. Then within the body of your website, there are specific settings for paragraphs, bullets and various sub-headers. Putting it simply, we separate your words from their styling.

This makes adding text VERY easy for you because you DON’T NEED to change any font types, colours or text sizes.

So, can I style my text for emphasis?

Yes you can. The question is what do you want to change? A paragraph? A sentence here and there? Or a heading or two? If your website starts looking like a Christmas tree with vulgar decorations, it will probably scare people away, so it’s better to keep a uniform style to your text.

Want to increase the impact of your words? Make effective use of (sub)headings and bullet points.

The best tip for making easy-to-read website pages is to make bite-sized paragraphs. If a page contains long sections of text, your rushed-for-time visitor can’t scan the page to see what’s in it. Inevitably, he or she will move on to another website.

Use Sub-Headings

You can use the different headings on title and even paragraphs within your page or post.

Type in your sub-headers and their following paragraphs. Then as indicated above, change the format for your sub-header from the default paragraph setting to Heading 1, 2, 3, 4, 5 or 6.

If you can’t see the dropdown tab for paragraph in the second row of buttons, then you need to show the “kitchen sink” (see picture above) which is normally the second last button in the first row, or press <Alt+Shift+Z>. Click on Save Draft and Preview to see what each option looks like.

NB: a heading gets applied to the entire paragraph, including any line breaks that you get from pressing <Shift+Enter>.

To better illustrate how text can be styled using sub-headers, below is a list of the different settings that have been created for this particular design … yours will most likely be different.

This is what Header 1 looks like

This is what Header 2 looks like

This is what Header 3 looks like

This is what Header 4 looks like

This is what Header 5 looks like

This is what Header 6 looks like

One Response to “How to style your text”