|
Slàinte!!!
I hope you have had time to look at CSS on the sites that I recommended.
I neglected to say that CSS can be applied to stationery also.
When you begin using CSS, there are 3 things to remember:
1. If writing for a website, in the style bracket, at the top, you will have:
<style type="text/css">
2. Between <head> and </head> is where you will name your style elements; for example, for body, you might have:
{
BORDER-RIGHT: #686880 2px ridge; BORDER-TOP: #686880 2px ridge; SCROLLBAR-FACE-COLOR: #686880;
SCROLLBAR-HIGHLIGHT-COLOR: #a0a0b8; BORDER-LEFT: #686880 2px ridge; SCROLLBAR-SHADOW-COLOR:
#a0a0b8; COLOR: #303050; SCROLLBAR-3DLIGHT-COLOR: #a0a0b8; SCROLLBAR-ARROW-COLOR: #ffffff;
BORDER-BOTTOM: #686880 2px ridge; FONT-FAMILY: Papyrus; SCROLLBAR-DARKSHADOW-COLOR: #686880;
SCROLLBAR-BASE-COLOR: #a0a0b8
}
It would go right after BODY in the HEAD section, of course.
Now, if you wanted to add style to other parts of your stationery or webpage, you are going to have to name them, and decide what style you want to add to them.
Supposing we are working with a stationery that has a nested table with a graphic and a text box;
Each of these tables will have a style because the colors are not all the same for each one, so we would have something like this:
.tb {
BORDER-RIGHT: #404430 2px solid; BORDER-TOP: #404430 2px solid; BACKGROUND: #f89cc8; BORDER-LEFT:
#383e22 2px solid; BORDER-BOTTOM: #383e22 2px solid
}
.tc {
BORDER-RIGHT: #404430 7px double; BORDER-TOP: #404430 7px double; BACKGROUND: #e04888; BORDER-LEFT:
#404430 7px double; BORDER-BOTTOM: #404430 7px double
}
.tb2 {
BORDER-RIGHT: #383e22 7px double; BORDER-TOP: #383e22 7px double; BACKGROUND: #f89cc8; BORDER-LEFT:
#404430 7px double; BORDER-BOTTOM: #404430 7px double
}
.tc2 {
BORDER-RIGHT: #404430 7px double; BORDER-TOP: #404430 7px double; BACKGROUND: #680c38; BORDER-LEFT:
#383e22 7px double; BORDER-BOTTOM: #383e22 7px double
}
.tb3 {
BORDER-RIGHT: #383e22 7px double; BORDER-TOP: #383e22 7px double; BACKGROUND: #e04888; BORDER-LEFT:
#4a4f37 7px double; BORDER-BOTTOM: #4a4f37 7px double
}
.tc3 {
BORDER-RIGHT: #680c38 7px double; BORDER-TOP: #680c38 7px double; BACKGROUND: #f89cc8; BORDER-LEFT:
#831b4e 7px double; BORDER-BOTTOM: #831b4e 7px double
}
tb is the first table, tc is the cell in the first table, tb2 is the second table...etc...
Then we will have this for the graphic box:
.pic {
BORDER-RIGHT: #383e22 7px double; BORDER-TOP: #383e22 7px double; BORDER-LEFT: #404430 7px double;
BORDER-BOTTOM: #404430 7px double
}
I like this one because it permits me to have a border around my graphic and I can decide what it looks like.
and finally, we will have this for the text box:
.mess {
BORDER-RIGHT: #404430 7px double; PADDING-RIGHT: 10px; BORDER-TOP: #404430 7px double; PADDING-LEFT:
10px; SCROLLBAR-FACE-COLOR: #f8fcff; FONT-SIZE: 12pt; BACKGROUND: #f8fcff; PADDING-BOTTOM: 10px;
SCROLLBAR-HIGHLIGHT-COLOR: #600000; OVERFLOW: auto; BORDER-LEFT: #383e22 7px double; WIDTH: 240px;
SCROLLBAR-SHADOW-COLOR: #f8bcc0; SCROLLBAR-3DLIGHT-COLOR: #f06498; SCROLLBAR-ARROW-COLOR: #600000;
PADDING-TOP: 10px; SCROLLBAR-TRACK-COLOR: #f8fcff; BORDER-BOTTOM: #383e22 7px double; FONT-FAMILY:
Tahoma; SCROLLBAR-DARKSHADOW-COLOR: #600000; HEIGHT: 200px; TEXT-ALIGN: center
}
Finally, I have the tag </style>
That's it for our rules.
3. Let's see how to apply them.
<TABLE class=tb cellSpacing=1 cellPadding=5 width=350 align=center>
<TR>
<TD class=tc align=middle>
<TABLE class=tb2 cellSpacing=10 cellPadding=5 width=350 align=center>
<TR>
<TD class=tc2 align=middle>
<TABLE class=tb3 cellSpacing=20 cellPadding=10 width=350 align=center>
<TR>
<TD class=tc3 align=middle><IMG class=pic src="your path" border=0></TD>
<TD class=tc3 align=middle>
<DIV class=mess>text</DIV></TD></TR></TABLE></TD></TR>
</TABLE></TD></TR>
</TABLE>
***To apply the rules that you have set up in the style part of your script, you now name your tables, your cells, your graphics box and your text box.
Note how it is done; table 1, for example, is Table class=tb.
tb, as we had named it at the top, and we add the word class; that's it.
***Also note that you can name your elements anything you want, as long as, at the bottom, you have table class=____.
Some people give their elements very peculiar names so that they will always recognize their script if it has been stolen.
Well, so much for that.I hope that this bit has made CSS more applicable to your scripting.
Have a good week-end
Ciao for now.
|
