|
|
home > css
cascading style sheets
A css (cascading style sheet) file controls
the color, size, style, font, borders, padding etc of HTML
elements. It can be:
- applied to a html tag (inline style sheets)
- embedded in the <head> of a document or
- an external file.
An external css style sheet can be over-ridden by an embedded
style sheet, this can be over-ridden by an inline style sheet.
applied to a html tag (inline styles)
To apply style attributes to a html tag as an inline style
you simply change from using:
<p><font face="Verdana, Arial,
Helvetica, sans-serif" size="12pt">text</font></p>
to
<p style font-family: verdana, arial, helvetica,
sans-serif; size: 12pt;>text</p>
embedded in the <head> tag
To use embedded style sheets you simply add the style
sheet attributes to the style in the <head> tag like
this:
<head>
<style type="text/css">
<!--
p {
font-family: verdana, arial , helvetica, sans-serif;
size: 12pt;
}
-->
</style>
</head>
Embedded style sheets are useful if you want to include specific
attributes to that particular page in addition to, or instead
of, a linked style sheet.
external style sheets
An external style sheet is simply a text file,
saved as filename.css - see the example below.
These are most often used as they seperate content from
style and mean that only one file has to be edited
to change the style of a whole web site. This means that the
appearance of a web site can be changed without
any change to the actual content. You do not need to include
the type="text/css" or the <!-- --> comment
tags.
This is linked to in every page that requires those
style elements to be attributed to certain html tags.
Add the following html between your <head> tags:
<head>
<link rel="stylesheet" type="text/css" href="/styles/main.css">
</head>
The "/styles/main.css" part is the style sheet
file and location from the root of your site.
style sheets
- Give us the ability to create much more sophisticated
design with regard typography and element
positioning
- Increase accessiblity, so that sites are viewable
to as many users as possible, regardless of platform, browser,
computer or any disability they might have
- Usually located in a separate file, containing
the formatting for most html elements
- Cleans up the html of every page
- Speeds up download time
- Makes page editing/updating an easier
task
The following is an example of a simple
stylesheet:
UL {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Bullet points |
TD {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Table cells |
P {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Paragraph |
OL {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Numbered lists |
H6 {
font-size : 10pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
text-align : left;
} |
Heading 6 (smallest) |
H5 {
font-size : 11pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Heading 5 |
H4 {
font-size : 12pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Heading 4 |
H3 {
font-size : 14pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Heading 3 |
H2.subtitle {
font-style : italic;
font-size : 15pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
margin-left : 0;
border-bottom : 1 solid #FFCCCC;
border-left : 1 solid #FFCCCC;
} |
Class of Heading 2 |
H2 {
font-size : 16pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
} |
Heading 2 |
H1 {
font-size : 18pt;
font-family : arial, helvetica, sans-serif;
color : #003366;
margin-top : 0.75em;
margin-left : 0;
padding-left : 0;
} |
Heading 1 (biggest) |
|
.right {
text-align : right;
}
|
class attribute to align text to the right |
|
navigation