Text Formatting with CSS
Because we have applied the styles of red text and a border to a class, we can apply that class to any html element we like. For example, if we add a subheading to our page with <h2> tags, we can apply the class to this as well and it will be formatted in red with a border:
<head>
<style>
.highlight {color:red; border:1px solid #999;}
h1 {color:green;}
</style>
</head>
<body>
<h1>Green Heading</h1>
<h2 class="highlight">Subheading</h2>
<p class="highlight">This text should be red with a border</p>
<p>This text should be normal</p>
</body>
</html>
If you use this to create a page, your browser should display it as this:
Green Heading
Subheading
This text should be red with a border
This text should be normal
Now we're really putting CSS to use, lets try changing the style of the page itself. Because the <body> tag is a html element like <p> and <h1> etc, we can apply CSS to it as well. As I said earlier that we can change the background of anything we apply CSS to, lets change the background of the page. To do this we would add the following CSS to the <style> tags:
If you have added this to the previous code and viewed it in your browser, you should have the text from the previous example with a light-blue background to the page. Notice how the background doesn't actually stretch to cover the whole page? This is because most browsers add a margin or padding to the page by default. We can remove this by changing our CSS for the <body> to this:
Because different browsers apply different margins and padding by default, it is best to set both to 0 to have cross-browser compatability. Now is probably a good time to explain the difference between a margin and padding. Both add space around the element you apply it to, but the margin is added outside any border you apply, and the padding is applied between the border and the content of the element. Since we are using background colors here, it should also be noted that background colors are applied all the way to the border. Lets create an example below to demonstrate these facts:
I'm in a red dash bordered box with 10px padding and 10px margin and a light red background
The code used to create this is below:
Notice I have used inline CSS here.
Using an External CSS File
At the start of the tutorial I said that we could use CSS to control the formatting of a site with just one file. Lets have a look at how we can apply CSS from an external file. First we need to create a file to hold the CSS, lets call it 'style.css'. When we are using an external file, we write the code in the same way as we do when we put the CSS in the <head> section of a page. The only difference is that we dont need to use <style> tags in the CSS file - this is because the browser knows it is CSS by the way we will link it into our html files. So, create a file in a text editor with the following code in it:
h1 {color:green;}
Then save it as style.css. Now we need to link this file into our html page. We can do this by changing the code for our page to this:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Green Heading</h1>
<h2 class="highlight">Subheading</h2>
<p class="highlight">This text should be red with a border</p>
<p>This text should be normal</p>
</body>
</html>
In the <head> section we are now linking the CSS in the style.css file into the html page, rather than having to put it in the page directly. This is the method that is used when you want to apply styles to a whole site. You just add the linking code into the head of each page, and the styles will be applied. Every heading you put at the top each page will automatically be green (in this example that is! You may want to define you headings as dark red and underlined with a border) without you needing to remember to add all that extra html code to do the same thing.
We have now covered a good introduction to CSS which should allow you to start to put it to use on your own site. In the next article I will demonstrate the more detailed sides of CSS and how it can make your web designing life a lot easier.
Site Categories
Recent Blog Posts
