| |
|
Hexadecimals |
·
based on RGB color scheme
·
#FF5520
·
# must be at the start
·
FF represents RED value
·
55 represents GREEN value
·
20 represents BLUE value
·
00 is weakest
·
FF is strongest
·
A0 is stronger than 0A
·
pure RED is #FF0000
·
pure GREEN is #00FF00
·
pure BLUE is #0000FF |
|
|
|
Try These! |
#FF8800
#336699
#00FF77 |
|
| |
Style Sheets - What Are They? |
|
| |
Style Sheets, or Cascading Style Sheets, or CSS, is a
way to make changing fonts, colors, borders, and other
webpage elements easier. It starts with making
what is called a style sheet, a file with a .css
extension (instead of .htm or .html for a webpage file).
This .css file holds in it one or more styles or
properties. After this .css file is created, you
may link any or all of your .html pages to this .css
file. Any subsequent changes you make to the
properties of the .css file will automatically be
updated in your .html files. |
|
| |
|
|
| |
Confused? - Here is an example |
|
| |
a { color: #0000FF; font-family: Verdana;
text-decoration: none } |
|
| |
|
|
| |
The above can be broken down with the following
elements: |
|
| |
- a - this stands for anchor, which is the tag
which creates a hyperlink. So, you are
changing the properties of your hyperlinks.
- color: #0000FF - this changes the color of the
hyperlink to blue (click here for an explanation of
the hexadecimal system of colors).
- ; - the semicolon separates the different
properties
- font-family - this changes the font for the
hyperlink to Verdana, one of the most popular web
fonts.
- text-decoration: none - this gets ride of the
outline for the hyperlink - some people like the
underline and come to expect it, while others think
it is annoying and use text effects like mouse overs.
|
|
| |
Still Confused - Don't worry, Front Page does
some of the work for you! |
|
| |
Luckily you don't have to completely understand the
coding of style sheets to make it work for you in Front
Page. Here is what you have to do: |
|
| |
- Open a new document
- Go to the Format menu and choose Style
- On the left, choose one of the styles that you
want to change (like body - this can change your
font for your pages, as well as the background)
- Click on the Modify button
- Choose the Format button on the bottom left
- Choose one of the available categories - you
will learn which ones do what when you explore - for
now choose something basic like font.
- Make any changes you want to the font - you can
make as many changes as you want
- After you have made the changes to whatever
styles you want, choose File, Save As.
- On the bottom of the File, Save As dialog box,
choose the drop down box that says Save As Type.
- Choose CSS Files, and save it with a name that
makes sense to you
- When you do this your file will change.
Get rid of the unnecessary code so that all you see
is something like this:
a { color: #0000FF; font-family: Verdana;
text-decoration: none }
a:hover { font-family: Verdana; color: #FF0000 }
body { font-family: Verdana; font-size: 10pt; color:
#000000 }
h6 { font-family: Verdana; font-size: 10pt;
font-weight: bold }
table { font-family: Verdana; font-size: 10pt }
- Now, another new document
- Go to the Format menu and choose Style Sheet
Links
- Choose Add and find your .css file
After you have completed this process you might not
notice any immediate change. However, as you use
elements in your document that are part of your .css
file you will see that it is working. If you want
to change any part of your .css document later you can,
and those changes will affet your .html documents.
WARNING: Any time you make a
change a font or background color or anything else in an
individual document that .css code will be over-ridden.
In other words, if your .css file says your font will be
red and you type words in, highlight, and choose pink
font, the font will be pink. The only way to get
it back to red would be change it to red or go into the
code and get rid of the <text> tag. |
|
|
|