Styles & Cascading Style Sheets (CSS)
Styles allow you to save time by combining various formatting codes into a group and applying them to a element in your document, such as a paragraph <P>.
Access Styles from the Format menu, then the Style menu.
You can create your own custom styles, and then use them throughout your document.
When you create a style in this fashion, FrontPage will generate the style codes into the <HEAD> section of your document. For example:
<style>
<!--
.MyStyle { font-family: Times New Roman; font-size: 18pt; color: #000000; border-style:
ridge; border-width: 3px; padding-left: 4px; padding-right: 4px;
padding-top: 1px; padding-bottom: 1px; background-color:
#C0C0C0 }
-->
</style>
When using the above style with a <P> paragraph code, it looks like this:
Sample Style
And the HTML code looks like this:
<p class="MyStyle">Sample Style</p>
Simple Font Applied Styles
You can create styles on the fly without defining and naming them. The style= attribute can be used with a number of tags, such as Font, shown below:
<font style="font-weight: bold">test</font>
<font style="font-weight: bold; color: red">test</font>
<font style="font-size: 18pt">test</font>
<font style="background-color:#00FF00">test</font>
<font style="font-face: Cooper Black">test</font>
Creating styles to affect common html tags
Using the same methods described above, you can create styles that get applied to common HTML tags. The code would look like this, for example:
<style>
<!--
table { background-color: #C0C0C0 }
-->
</style>
Cascading Style Sheets (CSS)
The DIV tag: Creating Layers
You can use the DIV (Divider) tag to create very flexible boxes or layers. You may play anything into these boxes, text, graphics, more boxes, anything. You may place these boxes anywhere on your page by X, Y coordinate (horizontal, vertical), or let the boxes flow within your text.
<DIV>Simple DIV box</DIV> does not do much...
A layer in FrontPage is a box that you position with absolute X, Y pixel settings. An easy way to create DIV layers in FrontPage is to use the Format, Layers menu.
SPAN <SPAN> Tag
The span tag is used just like the DIV tag, except span is specifically designed for individual character by character formatting, whereas DIV is meant for paragraphs or boxes with wrapping text in them.
test span
As you can see, one difference between SPAN and DIV is that DIV causes this box to flow all the way to the end of the page, whereas SPAN does not - it stays tight around the text. You will also notice the padding space for the margins in the DIV tag, compared to in the SPAN tag. The SPAN tag therefore gives you a bit more control.
Layers
View, Task Pane, Layers
Create, move, resize layers
DIV tag
Z-Index
The problem of absolute positioning
| sample | sample |
| test relative positioning of DIV tag inside a table cell
This is a CSS layer DIV tag with Z-index 2
|
Creating CSS files for linking with your html document
(Menu: Format, Style Sheet Links)
You can create styles in a cascading style sheet file with a .css file name
extension. A .css file is composed solely of style rules in valid .css syntax,
without any surrounding HTML tags. A cascading style sheet is a document
containing style information that can be referenced by multiple Web pages.
Styles define appearance and formatting of content on Web pages and allow
authors more control over how content is displayed in browsers.
test menustyle.css without <span> tag