Home
|
Developer Home
|
Accessibility
|
ASP
|
CGI/Perl
|
DHTML
|
HTML
|
Includes
|
Javascript
|
PHP
|
Style Sheets
|
You are here : Home - Web Development - Style Sheets - Guide - Changing Style
Colors
Why not discuss this article in our forum?
Changing Styles
Style sheets give you a lot of control on the appearance of your page. I will mainly cover fonts and colors and hopefully give some useful tips as well.
To keep things simple I will use the longhand way of writing style sheets - not all browsers handle style shorthand syntax too well.
Fonts- font-family : [FONT NAME, FONT-FAMILY];
- This is used to define the font you want to use. They are searched for in order specified so if a font isn't on the users system it will look for the next in the list. You should always specify a family type at the end such as sans-serif or serif.
Example : font-family : verdana, helvetica, sans-serif;
- font-size : [xxpt];
- Font size is defined in point size using pt. While using 8 pt; will work it might not work properly in future so make sure you do not put a space between the value and the pt instead use 8pt;
Example : font-size : 8pt;
- font-weight : [normal bold];
- This allows you to alter the font weight - so you could create your own custom bold tags for example.
Example : font-weight : bold;
- font-style : [normal italic];
- This allows you to alter the font style.
Example : font-style : italic;
- text-decoration : [option];
- This allows you to apply line styles to your text. Options are none | underline | overline | line-through which look like this.
none | underline | overline | line-through
Example : text-decoration : underline;
Colors
- color : [value];
- This allows you to alter the font color. Color can either be a name (red;) or a value (#FF0000;). When using a value you can use for example FF0000; but this is no longer preferred and may not work in future browser releases. Always precede color values with a # and no space eg. #FF0000;
Example : color : #FF0000;
looks like red text
- background-color : [value];
- This allows you to alter the background color. Color can either be a name (red;) or a value (#FF0000;). When using a value you can use for example FF0000; but this is no longer preferred and may not work in future browser releases. Always precede color values with a # and no space eg. #FF0000;
Example : background-color : #FF0000;
looks like red background with yellow text
This covers some of the basic elements you can control next we'll look at more advanced styles.
Why not discuss this article in our forum?
[
]
[
]
]
[]