Controlling text appearance with CSS

The appearance of any html element can be altered using CSS. This is very useful, as the standard appearance of html documents is really pretty ugly.

Instant CSS Text Formatting

We're not going to try to make you learn CSS. Instead we'll give you some that you can use straight away. You will learn about CSS when you start to modify the file for your own purposes.

Start off by downloading our example htmlstyles.css style sheet. It contains styles for common html elements such as headers, paragraphs, lists, and links.

Link the file from the head section of your html document like we did at the start of the replacing tables with CSS page.

You also have to remove any font tags from your html document as these will override the style sheet.

Modifying our style sheet

You can go mad with css. We've done just that and created a custom style called "lotsofstyles". You could equally use these features for heading 1, paragraph etc.

The lotsofstyles style contains additional css properties that can be used in html.

You can see the power of CSS when you realize the source code in this html document that we used to bring up the above style is simply:

Imagine doing all that in plain html using tables and font tags. The code would be very messy.

Let's look at the lotsofstyles style in more detail. The writing in red is our explanation of what the style does and is not read by the style sheet.

In our CSS file we start off by defining the name of the css style, and we've opened the style. In this case we've started with a dot which means the style is a class and can be called as the above example.

Had we decided to make all of our <h2> headings look like that we'd have changed the first line to h2 { without the dot.

Next we define the font attributes. Here we've said the style class should be in Courier New, but have offered a couple of backup options in case the visitor's browser can't do Courier New.

We've used relative values for font size. This brings up an advantage of "cascading". We defined the font size in our body tag as 80%. Because our paragraph above is contained within the body tag it will inherit the font size of 80%. When we define a new size of 120% the browser sees that as 120% of 80% - which works out at about 100%.

The background color is yellow in this case, and we've also specified an image for the background. We could have repeated the image across the page by

Margins and padding are ways of spacing the text from surrounding test. The margin is white space outside the border, and padding is space between the boarder and the text.

The figures are in the order top, right, bottom, left.

We've had some fun with our border, defining the width, style and color for each side.

Finally we've closed the style.

Doing even more with CSS

W3schools have created a very useful CSS reference that provides a detailed list of CSS properties.

The W3C provides a great deal of useful information about CSS (they specified it in the first place).

---

Back to the CSS guide