Text Formatting with CSS
CSS is a tool which when used to its full potential, is an incredibly powerful way of controlling the formatting of a HTML page. It can be used to control the smallest detail, like the colour of some text, all the way up to defining the way an entire site is displayed.
A major benefit of CSS is when you decide to change any formatting. If you want to change your headings to blue, you just change one piece of code in your CSS file, you dont need to go through every page - which could be quite time-consuming after the first 100 pages or so! Another advantage of using CSS is that your website readers only need to download the CSS file once. With all the formatting moved to a single file, this reduces the size of every page on your site, meaning pages are much quicker to load.
CSS is very flexible, and can be applied in a number of ways. For example, if you just want to change the style of one section on one page of your site, you can just add the relevant CSS to the page. If however, you want to apply styles to all pages in your site, you can put the CSS in an external file, and link it to all of your HTML pages.
Text Formatting
The best way to start learning CSS, is to use some simple techniques to change the style of something. Lets take a paragraph and change its color to red. To do this with CSS, we would use the following code:
This will result of this when it is processed by your browser is this:
This text should be red
Notice the 'style' attribute in the <p> tag - this method of using CSS is called inline, as we are applying it 'inline' with the rest of the code. Now you may be thinking, "Yeah, I could do that just fine using HTML", but bear with me here. Lets say we wanted to add a border to this paragraph. We can add a bit of CSS:
which is displayed as:
This text should be red
Using the many CSS attributes, we can control everything about how the paragraph is displayed. We can change the size of the font, the actual font, the color of the text and the background, and anything else you can think of, even the position of the paragraph on the page.
Defining CSS Styles
Now that we have actually put CSS to use, lets look at how we can apply it to parts of the page. In the examples above we have been using CSS inline. Whilst this is useful, it is not really showing the full power of CSS. We can apply this styling using a style sheet, which is just a section of code that holds the CSS formatting. To apply this styling as an internal style sheet, we just put the CSS code in <style> tags in the <head> of the page.
<head>
<style>
p {color:red; border:1px solid #999;}
</style>
</head>
<body>
<h1>CSS Test</h1>
<p>This text should be red with a border</p>
</body>
</html>
In the <style> tags we have a letter 'p' followed by the CSS in curly brackets. The 'p' tells the browser that the following CSS attributes apply to <p> tags in the page - so we are effectively achieving the same thing as when we were using CSS inline earlier. Using this system, can you guess what we need to add in the style sheet to make our headings green? Just in case you can't, this is what the style sheet would look like:
p {color:red; border:1px solid #999;}
h1 {color:green;}
</style>
So far we have been referencing HTML elements in our CSS code by naming them directly, which is ok for the examples we have used so far, but what happens if we have two paragraphs in our page and we only want one of them to be red with a border?
To do this we need to define a class which we want to apply the styles to, and then apply that class to the paragraph we want to style. To do this we can name the class anything we want, but lets call it 'highlight'. To apply the CSS to this class, the code would look like this:
<head>
<style>
.highlight {color:red; border:1px solid #999;}
h1 {color:green;}
</style>
</head>
<body>
<h1>Green Heading</h1>
<p class="highlight">This text should be red with a border</p>
<p>This text should be normal</p>
</body>
</html>
Notice there is a full stop (.) before the 'highlight' in the style sheet. This defines highlight as a class. Your browser should display this code as:
Green Heading
This text should be red with a border
This text should be normal
Site Categories
Recent Blog Posts
