Cascading Style Sheet (CSS) Styling Guide
Cascading Style Sheets can at first be a little confusing, especially when trying to produce a cross-browser layout that works well. CSS can be used for not only controlling a layout but for styling it and it's content as well. The advantages of this are that the HTML (Hypertext Markup Language) source code can be reduced as the same styles do not have to be reproduced again and again when they are used throughout a web page. Instead the style can be defined once in the style sheet and then referred to when it needs to be used in the web page. This reduces the file size and again reduces the loading time of the web page.
What Can You Expect From This CSS Guide?
This guide is intended for those who already know HTML and wish to make their pages more accessible using CSS. Throughout the guide there will be code snippets which you are more than welcome, in fact encouraged to copy and play around with.
CSS Styling Basics
A Cascading Style Sheet can be included internally in the Head part of the web page or linked to and stored externally. The advantage of storing the styles in an external stylesheet is that the styles need not be copied onto each page thus reducing the file size of your website and allowing global changes to made from the one file. HTML tags can be styled directly through the stylesheet or you can define classes and id's to create more complicated combinations of styles. You can also use (but should refrain from) inline styles if you only need to style a specific element on a page.
Where to save the CSS styles - Guide Example 1
This example shows an Internal Style Sheet in the Head part of the document. Notice the style tag and it's defining type attribute. Now would be a good time to point out how important it is to include the curly brackets around the style information with a semicolon preceding the end bracket. If you find one of your styles isn't working then these are the first items to check!
<html>
<head>
<title>Example 1</title>
<style type="text/css">
body {font-family: Trebuchet MS;}
h1 {font-size: 120%;}
</style>
</head>
<body>
<h1>Example 1</h1>
</body>
</html>
Where to save the CSS styles - Guide Example 2
Here we link to an External Style Sheet called example2.css using the link element. Notice the href attribute that shows the location of the stylesheet in relation to the webpage. There is also a type attribute for defining the language of the style sheet and the media attribute for specifying what the page will render on. You can specify for screen, print or all media.
<html> <head> <title>Example 2</title> <link href="/example2.css" type="text/css" media="all" /> </head> <body> <h1>Example 2</h1> </body> </html>
Methods in CSS to Style Elements
Styling HTML Tags - Guide Example 3
You may wish for every paragraph tag in your web page to have an identical style. Using CSS you can style an HTML tag quite simply by defining the tag and then giving it style information. See below.
<html>
<head>
<title>Example 3</title>
<style type="text/css">
p {font-size: 76%; font-family: Trebuchet MS;}
</style>
</head>
<body>
<h1>Example 3</h1>
<p>All of these paragraphs have the same styles</p>
<p>All of these paragraphs have the same styles</p>
<p>All of these paragraphs have the same styles</p>
</body>
Using Classes - Guide Example 4
Elements can be targetted and styled in a variety of ways. You can apply a class to an individual element to give it a set of styles. Identify a class in the style sheet using a full stop before the class name. Anything you apply that class to will gain the defined styles. You can see below that the p and span tags have been set with the class named 'small' using the HTML class attribute.
<html>
<head>
<title>Example 4</title>
<style type="text/css">
.small {font-size: 76%; font-family: Trebuchet MS;}
</style>
</head>
<body>
<h1>Example 4</h1>
<p class="small">This contains small Text.</p>
<span class="small">This contains small text too!</span>
</body>
</html>
Different Classes, Same HTML Tag - Guide Example 5
You can also specify individual elements with assigned classes to make additional styles. This is useful if you want the same tags to be styled differently in specific areas of your webpage. For example you could style the p tag with the font face and color and then use a small class and a large class to give them different sizes. See the example below.
<html>
<head>
<style type="text/css">
p {font-family: Trebuchet MS; color: #000;} //all the p tags
p.small {font-size: 76%;} //only the p tags with class small
p.large {font-size: 120%;} //only the p tags with class large
</style>
</head>
<body>
<h1>Example 5</h1>
<p class="small">This contains small Text with font face Trebuchet MS and is coloured black.</p>
<p class="large">This contains large text with font face Trebuchet MS and is coloured black.</p>
</body>
</html>
Inline CSS Styles - Guide Example 6
You can even put styles straight into the body part of a webpage and style elements individually. This is done using the style attribute of an HTML tag. See below.
<html> <head> <title>Example 6</title> </head> <body> <h1>Example 6</h1> <p style="font-family: Trebuchet MS; color: #000;">This contains small Text with font face Trebuchet MS and is coloured black.</p> </body> </html>