Posted 10 August 2006 - 01:07 PM
CSS_Tutorial.doc (184.5K)
Number of downloads: 2184
CSS Tutorial
What is CSS?
•Definition: Cascading Style Sheets
•Usage: Used to customise the design of a HTML page by settings attributes in the <head> of a page.
•Advantages: A webpage's design can be changed throughout by amending the CSS section of a webpage.
Linking CSS to HTML pages
CSS codes are places between the <head> tags of a webpage.
Example
<html> <head> (CSS Coding) </head> <hody> </body> </html>
Linking CSS methods
•Within HTML: CSS coding is included within the HTML file itself.
<html> <head> <style type="text/css"> (CSS coding) </style> </head>
•Separate File: CSS coding is included within its own file.
<html> <head> <link rel="stylesheet" type="text/css" href="filename.css"> </head>
Now we have established the basics of CSS linking, let's have a look at some coding
Whether your CSS coding is in its own file or within the head tags of your HTML, the structure of the code is exactly the same. Let's have a look at an example.
P { font: italic bold 11pt calibri }
In English...
The layout of CSS coding is a standard format...
Variable { attribute1: value; attribute2: value2; attribute3: value3 }
In the previous example, the Variable is 'P'. The 'P' in this sence is the basic paragraph tag <P>.
So far, we have established that this piece of CSS code is amending the properties of every paragraph tag on our HTML page.
{ font: italic bold 11pt calibri }
The attributes we are setting for the paragraphs on our HTML page is the font. Can you work out what the font attributes will be?
Here is a before and after of how how this code affects our webpage.
source code
website
Now we understand how CSS coding works, we can have a look at other attributes and what they can do.
Font Attributes
Syntax: font-style: <value>
Possible Values: normal | italic | oblique
Syntax: font-weight: <value>
Possible Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Example
P { font-weight: 900; font-style: italic }
- Makes all <p>Paragraph content</p> bold and italic.Colour Attributes
Syntax: color: <color>
Example
H1 { color: blue }
H2 { color: #000080 }
H3 { color: #0c0 }
Text Attributes
Syntax: letter-spacing: <value>
Possible Values: normal | <length>
Syntax: text-decoration: <value>
Possible Values: none | [ underline || overline || line-through || blink ]
Syntax: text-align: <value>
Possible Values: left | right | center | justify
Example
H1 { letter-spacing: 0.1em; text-align: center; text-decoration: underline }
- Sets all <h1> tag content to letter spacing 0.1em, aligns it to the centre and underlined.Link Attributes
It's not only tags that can be modified, you can also modify the styles of links on your webpage.
a:link, a:visited, a:active { color: white; text-decoration: blink }
- This makes all links, active links and visited links white and blink!Background Attributes
Other than tag and link attributes, you can modify the whole body of your webpage!
Syntax: background-image: <value>
Possible Values: <url> | none
Syntax: background-repeat: <value>
Possible Values: repeat | repeat-x | repeat-y | no-repeat
Syntax: background-color: <value>
Possible Values: <color> | transparent
Example
body { background-image: url('/images/hi.gif'); background-repeat: repeat-x }
*** Sets the background image to 'hi.gif' and repeats this image along the x-axis (horizonal) of the webpage only.Note: The 'BODY' variable modifys the body of your webpage.
Exercise: try changing attributes for other tags, such as:
<h1> - Large font
<b> - Bold text
<i> - Italic text
<u> - Underlined text
<strong> - Text in a strong format
Once you feel comfortable with this, we can move on. Remember the format...
Variable { attribute1: value; attribute2: value2; attribute3: value3 }
Assigning custom CSS Variables to tags
.Anything { Color: Red; text-decoration: line-through }
If a line of your CSS code is prefixed with a dot (.) then this indicates that this is a customer variable. For example, if you don't want to assign all paragraphs, or all links to one particular theme, then this is where this comes in handy.
CSS Code
.RedLineThrough { Color: Red; text-decoration: line-through }
HTML Code
<P class="RedLineThrough">This text here should be red and have a line through it </p>
When assigning customer variables in CSS, remember to prefix them with a dot (.) and use the 'class=' Tag-Attribute to denote that you want to use this within a tag.
Example Preview
Source file
Website 
MultiQuote
| 