Using Cascading Style Sheets (CSS) in Domino
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Using Cascading Style Sheets in Domino
Using Cascading
Style Sheets (CSS)
in Domino
Amelia Pape
With Cascading Style Sheets (CSS), you can achieve greater control
over the appearance of your Web pages than you can by using HTML
and Domino alone. You can also reduce the number of graphics on
your sites and, best of all, make changes to views, pages, forms —
even hundreds of documents — simply by changing a style rule
once, in one place.
If you have never used CSS, or never used it in Domino, this article
will serve both as your primer and survival guide. It is a comprehensive
introduction that shows how to use CSS technology in a Domino appli-
cation. You’ll learn how to change the appearance of your Web views,
without having to open each view in Designer and, one by one, change
Amelia Pape is a director formatting properties for each column. You’ll also learn to control
of Resolve IT, a Domino- every aspect of an action or navigation bar’s appearance, without having
based Application Service to use graphic images for the Hotspot links. Plus, you'll get instruction
Provider. Amelia has on using CSS features for downloadable fonts, hiding page elements,
been working with Lotus controlling cursor icons and mouseover properties, bulleted lists, and
Notes / Domino since 1997, positioning elements on the page.
focusing on Web-based
I’ll show you everything from the ground up — how to write the
on-line learning for most style rules, create the style sheets, and apply the styles throughout your
of that time. She is the application — so no previous CSS experience is necessary.
author of several technical
articles and Domino R5
training courses that are
distributed worldwide. You
What Is CSS?
can reach Amelia at Perhaps the best way to explain the Cascading Style Sheets design
amelia@smespace.com standard is to show you what you can do with it.
(complete bio appears on page 24)
No portion of this publication may be reproduced without written consent. 3
THE VIEW March/April 2001
Figure 1 Web Site Formatted with CSS
Figure 1 is a screen shot of a Web site that I • Finally, the navigation menu in the bottom
designed in Domino Designer, using CSS. I used right-hand corner of the page is also created
CSS to format the following elements that you see with a style sheet.
on the page:
You get the idea. A style sheet defines how the
• The heading, myLearningZone, is simply text that various page elements (such as headers and links)
has been positioned and styled with a style sheet. appear.
• The menu beneath the heading is made up of
CSS is a W3C1 standard that specifies how
hypertext links that have been formatted with a
to write the style rules contained in these style sheets.
style sheet. On mouseover of any of the links,
Because the standard defines how multiple style
the background color and text color of the menu
rules and sheets can be applied to the same page
item change — again, with a style sheet.
element, with a more specific rule overriding a
• The view in the main frame is formatted with a more general one, these style sheets are termed
style sheet. The advantage of using a style sheet cascading style sheets.
here is that it is easy to play around with the
format until you get it right. 1
World Wide Web Consortium
4 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Why Use CSS? This is what I did for the navigation menu in
the LearningZone site. I’ll show you how later in
Just looking at the list of things I could do with CSS this article.
in designing the LearningZone site begins to answer
this question. Here is a more complete list of reasons
Typographical Control
to use CSS:
A style gives you a great deal of control over your
typographical layout. Without one, some formatting
Reduce the Number of Graphics options are simply not available.
on Your Site The following settings can be dictated with
Rather than using a space-consuming image to create CSS:
a logo like the one in Figure 2, you can format and
position the text with a style sheet. HTML doesn’t • Font size: You can set font size using points,
support the font sizes and precise positioning of rather than the seven basic HTML sizes (which
characters you see in the figure (the word “Zone” format everything between 9pt and 11pt as the
overlaps the word “Learning”). Nor does it provide same size).
the ability to control exactly what font will be used. • Line height: Yes, you can control line height
in points too — no more enormous amounts of
Figure 2 Graphic Text Styled and white space between paragraphs.
Positioned with CSS • Font family: Rather than being able to set only
one font, you can tell the browser which font
face to use if your first choice isn’t available.
• Background color: Set the background color
for most HTML tags, including table cell,
heading, SPAN, and DIV tags.
Instead of using images for buttons, you can
format your button text with a style sheet and apply This list names just a few of the CSS attributes
different styles for the different states of the links that you can control with style rules. There are over
(i.e., mouseover effects). In Domino Designer, you 50 different settings. We will cover some of the more
can get a similar look and feel by creating an outline common ones in greater detail later.
control and setting the normal, selected, and moused
colors for its links when you embed it into a design Easy, Efficient Management
element. However, Designer’s formatting settings for
an outline element are more difficult to maintain, and The biggest advantage of CSS is that it enables you to
they only work when the control is displayed using better manage and maintain the appearance of your
Domino’s Java outline applet. Web applications. Because a style sheet is a separate
design element (a Domino page), which is then im-
With the CSS approach, you have the same ported with HTML tags, it acts a bit like a subform in
control over the appearance of the links in the that you can use it in many different design elements.
browser, but the links are more versatile. Since You can reference your style pages across applica-
they are Hotspot links, they can appear anywhere tions and across design elements in an application.
on the page, and you don’t need to use Domino’s Java Do you need to make a change to all the documents
applet (which increases download time) to display in your application? Simple. Just change one style
them. rule, in one place.
No portion of this publication may be reproduced without written consent. 5THE VIEW March/April 2001
Getting Started with CSS The
Although Domino R5 doesn’t have a Style Sheet Three different kinds of selectors can be used to build
object, it does allow you to easily incorporate this a rule: tag, ID, and class selectors.
design standard into your databases. (Later, I will
explain in detail how to create a style sheet on a page Tag selectors are the simplest type of selector.
and then import it into forms in your application Any HTML tag can be used as a selector. For
using the HTMLHeadContent object.) example, you could create a rule for the TH (table
heading) tag and one for the TD (table data) tag in
order to control the style of entries in a Notes view.
What else do you need to know in order to take
These rules are automatically applied to all HTML
advantage of CSS for a Domino site? It helps to
elements on the page created with these tags. The
know the basics:
H1 selector in the previous example is a tag selector.
• What a style rule is, and what it can control Two HTML tags that come in handy when you are
(font, text, position, layout, etc.) using style sheets are the and tags.
• How rules become style sheets If you are unfamiliar with them, you can refer to the
sidebar (opposite page) for an explanation.
• When rules are applied, and to which design
elements ID selectors identify a unique element on the
page, using the value in the element’s ID attribute.
If you are already familiar with CSS and simply (All ID attributes set on the page must be unique.)
want to know how to use it in Domino, proceed So this style rule applies to only one element on the
directly to the section titled Creating Style Sheets in page. The selector is defined in the style rule as a
Domino. The rest of us will start at the top and work hash symbol, #, followed by the ID attribute. For
our way through. example, if you create a tag on the page and
give it the ID “MyDiv”, you can then create a style
rule that applies to that DIV tag. In your style sheet,
the rule looks like this:
Style Rules
#MyDiv { }
Rules declare what format styles should be applied to
which elements on the page. Each rule is made up of On the page, the style rule will be applied to the
two parts: HTML element that has the ID attribute = “MyDiv”,
{ } like so:
Contents of DIV tag go
The selector identifies WHICH element(s) the
here
rule will apply to. The declaration defines WHAT
styles will be applied. For example, the following
rule states that all H1 tags on the page will have an Class selectors apply the same style across a
18-point font size: variety of different HTML elements. If you need
to apply the same style to more than one type of
H1 { font-size: 18pt } element, then you need to create a Class rule.
(With tag or ID selectors, your rule only applies
Rules are the basic building blocks of style to one type of element.) Class selectors are
sheets, so we’ll spend some time becoming familiar defined with a full-stop preceding the name you
with them. give your class.
6 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
In your style sheet, your class selector looks like
this:
The and Tags
.MyClass { } When you want to group content on a page,
form, or view, and apply the same style to it,
On the page, the style rule will be applied to you can simply wrap it in a container tag and
all HTML elements with the CLASS attribute = then apply the style to that tag. Everything
“MyClass”, like so: inside the container will inherit the tag’s style
rules. The most common container is defined
Contents of with the tag, but tables don’t always
DIV tag go here suit your content. So try these tags instead:
Contents of
SPAN tag go here For a block of content that should start on a
new line, use the (short for division)
tag. As the name suggests, this tag sets
off its content as a block on the page that
The has its own margin, border, and padding
Now that we know the which of it, what are we properties (discussed later). This tag is
useful for grouping text and other content
applying? The declaration side of the rule is where
together on a Domino form or page.
you declare the various style properties for the
selector. The declaration is made up of a string
of property and value pairs, like this: For content that should NOT start on a
new line, use the tag, which
: simply spans the width of the in-line
element(s) it contains. The tag is
The declaration useful in Domino view column formulas, as
it does not have its own margin, border,
or padding properties.
font-size: 18pt
defines the 18-point font-size property. If you
declare multiple properties, each one is separated by
a semi-colon. All the declarations are surrounded CSS Properties
by curly brackets, like so:
The W3C standard for style sheets determines which
H1 {font-size: 18pt; color: red; properties can be formatted. The current standards are:
font-style: underline; font-
weight: bold} • CSS1: Implemented in Internet Explorer 4
(IE4) and Netscape Navigator 4 (NN4)
White space is irrelevant, so you can also do this: • CSS2: Some features implemented in IE4/NN4
H1 {font-size: 18pt; In order to use the properties, you need to know
color: red; what properties are available, and what values can be
font-style: underline; used to declare them. CSS properties fall into three
font-weight: bold broad categories: font and text, color and background,
} and layout properties.
No portion of this publication may be reproduced without written consent. 7THE VIEW March/April 2001
Figure 3 Layout Properties of an HTML Element
margin
border
padding
margin Element A margin
padding
margin
Font and Text Properties Navigator to declare the color properties. Ex-
amples include white, black, red, blue, etc. For a
Font and text properties allow you to declare:
complete list, refer to the Microsoft Color Table
• the font-family that should be used (the URL is provided at the end of this article).
• the font size in points or percentage • Hexadecimal values: You can also set color
• the line height values using the hexidecimal equivalent of an
RGB color value. These values are entered
• various text decoration settings, such as
preceded by a hash symbol, like this one for
bold, underlined, and italic
the color white: #FFFFFF.
The values that you can use depend on the • rgb() function: Use this function to declare an
property. For example, font names are used to RGB (red, green, blue) value using either percent-
declare the font-family property. Points, pixels, ages or integers for the red, green, and blue
and percentage values are used for the size and parameters. For example, “rgb(50%,50%,50%)”
line-height properties. Key words, like “bold” for gray, or “rgb(255,0,0)” for red.
or “underline,” are used for the font-weight,
font-style, and text properties. For the background-image property, use the
url(image) function, which accepts the URL of the
image file as its only parameter.
Color and Background Properties
Color and background properties allow you to declare Layout Properties
the color of various elements on the page and/or
Layout properties allow you to control the margin,
images that should be used in the background of the
border, and padding of an element. The margin of an
elements. Three different values can be used for
element is the space around the outside of its border
the color properties:
(as shown in Figure 3). It provides distance between
• Color names: Use the library of color names the element and any adjacent elements. By default,
recognized by Internet Explorer and Netscape margins on all elements are zero.
8 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Figure 4 CSS Properties and Values
Property Type Property Values Example
Font and Text font-family Specifies a list of alternative fonts in order of { font-family: tahoma, helvetica,
Properties preference. As a general rule, end the list with a sans-serif }
generic font — such as sans-serif.
font-size Size of the font is expressed in points or as a {font-size: 12pt}
percentage.
font-style Normal, italic, or oblique. { font-style: normal}
font-weight Bold or normal. { font-weight: bold }
line-height Allows you to control the leading for each row — { line-height: 14pt }
i.e., the distance between the bottom of the row
and the bottom of the row immediately above it.
Expressed in points.
text-decoration None, underline, or line-through. { text-decoration: none | underline
| line-through }
text-align Left, center, or right. {text-align: left }
Color and color Allows you to control the color of text within an { color: blue }
Background element. The color value can be set using color { color: rgb(50, 50, 255) }
Properties names, hexadecimal values, or the rgb()
function.
background- Allows you to control the background color of an { background-color: #23ee0f }
color element. { background-color:
rgb(50%,50%,50%)}
background- Allows you to display an image in the { background-image:
image background of an element — for example, url(clouds.gif) }
a cell in a table or a tag. { background-image: none }
Layout border Allows you to set the border style, color, and { border-right-width: 1;
Properties width for elements. Available styles are groove, border-top-color: red;
ridge, inset, outset, solid. The same color border-left-style: groove;
settings as those that apply for color and border-bottom-style: solid }
background-color can be used here. Width
is set in pixels.
margin Allows you to set the margin for elements. { margin-left: 1}
Defined in pixels.
padding Allows you to set the padding width for { padding-left: 1}
elements. Defined in pixels.
The padding is the area between the border For easy reference, Figure 4 summarizes the
and the element inside the border. By default, major CSS properties and their values, and provides
padding is zero. an example of each one in a style rule.
No portion of this publication may be reproduced without written consent. 9THE VIEW March/April 2001
For a complete list of all of the properties you can The TYPE= attribute in the tag tells the
control — positioning, visibility, and classification, browser how to interpret the content of the HREF —
for example — refer to the Microsoft CSS Attributes in this case, it is text in the format of CSS. This
link provided at the end of the article. (“text/css”) is the MIME type attribute. You would
use something similar to import a JavaScript file into
a page, except in that case the MIME type would be
Style Sheets “text/javascript”.
Now that we know what a style rule is, the next step In the previous example, stylePage is a Domino
is to group rules together into a style sheet and apply page that might contain the following:
them to elements on the page. A style sheet is simply
a collection of rules, embedded in the tag H1 { font-size: 18pt }
on your page or, in the case of in-line styles, defined H2 { font-size: 14pt }
directly in the STYLE= attribute on the HTML .menu { font-size: 20pt }
element itself.
Outside the Domino world, this content would
simply be stored in a text file (e.g., created with
Three Ways to Add Style Rules Notepad or Textpad) with a .css file extension.
to an HTML Page
The advantage of importing is that the style
There are three ways to add styles to any HTML definitions can be shared across all the forms and
page: in-line, embedded, and imported. pages in your database from one page. Or they can
be shared across multiple databases by looking up
The in-line method applies one style rule to a that page or a separate *.css file.
specific element using the element’s HTML STYLE
attribute, like this: What happens if you have a style rule (or part of
a rule) in an in-line or embedded style that conflicts
with a rule in an imported style on the same page?
The following conflict resolution rules are applied
The embedded method is used to add a group by the browser:
of style rules for different elements. The rules are
embedded into the HTML tag for the 1. Linked style sheets are applied globally; THEN
page by means of a tag, like this:
2. Any embedded style sheet overrides the linked
conflict.
With the imported method, a separate file or
Note that all three methods of adding style sheets
page contains the style rules, and it is imported
to your current page are part of CSS. The different
into the current page, like so:
methods allow you to design a more scalable solution.
amended to suit the content on the current page
10 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Figure 5 HTML Tab in R5 InfoBox Showing CSS-Related Fields
(if necessary) with an embedded style sheet. The style with this name, which is defined with a
Finally — in case you need some more fine-tuning — class or ID selector in the element (as
you have the in-line style available for styles that are explained earlier), would then be applied to this
applied only to specific elements on the current page. element. Alternatively, an in-line style can be typed
directly into the Style field. In Figure 5, the style rule
with the selector “.menu” (menu is a class rule)
would be applied to the Hotspot link.
Creating Style Sheets
in Domino Prior to R5, you can use style sheets in a similar
way by using the Other field on the HTML tab. You
To create an embedded or imported style sheet enter the entire attribute in this field — for example,
on a Domino form or page, you need to enter “CLASS=menu”, not just “menu”. Your style would
the code for the or tag in the still be defined in the tag, as described
HTMLHeadContent object, so that it will be created above.
inside the tag. I’ll show you how to do
this later, when we walk through the creation of a Be aware that, in most cases, you need to restrict
style sheet for a view in the sample application. your use of Domino font formatting in order to avoid
overriding your style sheets. The font tags generated
To create an in-line style, define the ID attribute, by Domino are deemed to be more specific in terms
or apply a class to an element on the form or page, of style formatting than a style rule that might apply
use the HTML tab on the design object’s InfoBox. to the same element, so the Domino tags will take
R5 Domino Designer includes ID, Style, and Class precedence over the style rules.
fields on the HTML tab of the InfoBox for most
elements, so that you can apply styles to them.
Figure 5 shows the HTML tab for a Hotspot link. How to Organize Your Styles
To specify the style that should be applied to this
element, you enter either the style’s class name into Paying attention to how you structure and organize
the Class field, or its element ID into the ID field. your style rules allows you to keep the number of
No portion of this publication may be reproduced without written consent. 11THE VIEW March/April 2001
Figure 6 View Formatted with CSS
rules to a minimum. Remember, the entire style sheet is the same as:
will be downloaded to the browser, so you
want to make your rules as efficient as possible. H1 { font-weight: bold; font-size: 12pt;
This is where grouping comes in. line-height: 14pt; font-family: arial }
The first way to reduce the number of rules The property values can be entered in any
is to group declarations together, separated by sequence. The browser matches the value to the
semi-colons. For example, you can write property that is applicable to that type of value.
(Note, however, that font-size and line-height must
H1 { color: red; font-family: helvetica } be entered as “font-size/line-height,” because both
properties are defined with the same types of values.)
instead of
H1 { color: red }
H1 { font-family: helvetica } Create Your First Style Sheet
Secondly, you can group selectors by separating The sample database that accompanies this article
them with commas. So that: (cssintro.nsf) is derived from the LearningZone site
I showed you earlier. You can download it now from
H1, B, P { color: red } www.eVIEW.com and follow along as I show you
how to create a style sheet.
is the same as:
We are going to work through an example in
H1 { color: red }
which we apply CSS styles to a Domino view, using
B { color: red }
the Lessons view in the sample application. This view
P { color: red }
is displayed using a template, which is embedded in
the page called $$ViewTemplate for Lessons.
Finally, the properties themselves can be
grouped. For example:
The styled view will have the features illustrated
H1 { font: bold 12pt/14pt arial} in Figure 6.
12 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Although you can’t see the color distinctions on table headings of the view element, Domino
the printed page here, you can see them for yourself will display them in tags at the top of
in the sample application. the .
• The text in the first column of the view is the • (Table Row tag): Each entry in the view
Category heading, and it is displayed in orange, is in a separate row of the table.
12 point, bold, Arial.
• (Table Data Cell tag): Each column in
• The first uncategorized column in the view — the view is in a separate data cell inside each
which is a link — is displayed in dark blue, of the rows.
10 point, bold, Arial.
• (an anchor link / hypertext link tag):
• The Date column is in dark green, 10 point, The first uncategorized column in the view
bold, Arial. is generated as a hypertext link (so that the
user can open the document represented by
• On mouseover of the link in the first this entry in the view).
column, the text color changes to red, and
the backgound-color changes to yellow. If your style sheet defines styles for these
tags, the styles will be automatically applied when
Applying styles to the contents of Domino Domino generates the HTML for the view. Given
views is a little complicated, because the view that these tags will be present on the page, why
column InfoBox has no HTML tab — this is not use them exclusively to apply different styles
where the tag comes in handy. to the content they contain? The advantage of this
method (over tags) is that you don’t have to
Once you have imported a style sheet into the include additional tags in the view column formula,
$$ViewTemplate form for the view, there are two but the disadvantage is that every , , and
ways to apply styles to the view content: tag on the page will have the same style.
1. In the view column formulas, include passthru I generally use a combination of these two
HTML that will wrap the content in a tag to methods. For the view style you saw in Figure 6, I
which you have applied a style. A tag used the TD and A selectors to define the basic style
is the best option, because it is an in-line tag. for the view, and tags to apply specific
This is how I formatted the category headings styles to category headings or particular columns.
in Figure 6.
To implement the view in Figure 6, you will
2. Simply use the tags that Domino automatically
need to create the following design elements/
generates for view content. This is how I format-
content:
ted the lesson topic (which is a link, an tag)
and the date (which is inside a table cell, a
1. A page containing the style sheet.
tag) in Figure 6.
2. A page containing the view template. This page
All Domino views are displayed as HTML using
contains an embedded view object. It imports the
the following 5 tags:
style page using the HTMLHeadContent object.
• : The entire view is displayed in a big
table. 3. HTML in the formulas of the view columns
that require specific styles — in this case, the
• (Table Heading tag): If you show the Category heading column only.
No portion of this publication may be reproduced without written consent. 13THE VIEW March/April 2001
Figure 7 Use Tags to Apply Styles to a View Column
The View Design tags, because they are styled simply by using
their tags as the selector — for the Topic
We begin with a view, Lessons, and a view template column (because the topic column is generated as
page, $$View Template for Lessons, in which to a link element by Domino), and for the Date
display the view. Figure 7 shows my Lessons view column.
in Designer.
Your view template must import the appropriate
To single out the first column in the view style sheet in its HTMLHeadContent object. The
and make it stand out, we give it a different style view template for my Lessons view is shown in
from the other table data on the page. In Figure 7, Figure 8. You can see that the HTMLHeadContent
HTML in the formula for the first column applies a object includes the following formula, which will
CSS class called CatHeading to the column content. import the Domino page called “viewStyle” into
The other columns in the view do not have the current page as a style sheet:
14 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Figure 8 “$$ViewTemplate for Lessons” in Domino Designer
db := @Subset(@DbName; -1); If your style sheet defines styles
server := @Name([CN]; for table tags, the styles will be
@Subset(@DbName; 1));" automatically applied when Domino
" + generates the HTML for the view
@NewLine + table data. Given that these tags
"" not use them exclusively to apply
different styles to the content they
The META tag is not required in order to contain? The disadvantage is that
import the style sheet. But because it will stop every , , and tag
the browser from caching your form or page, on the page will have the same style.
it is extremely useful when you are testing.
No portion of this publication may be reproduced without written consent. 15THE VIEW March/April 2001
The Style Page Pseudo Class Selectors
Let’s start by looking at the rule for the lesson topic Some HTML elements have additional selectors
column in the view. It is a hypertext link (created that are recognized by CSS. Pseudo class selectors
with the tag). To style the content of the link are preceded by the tag they relate to, and a colon,
as you saw it in Figure 6, you need to apply rules like this:
for the following:
TAG:pseudoClassName { }
• Font: Family (Arial; if that's not available,
use Helvetica; if Helvetica is not available, When the element in the Lessons view is
use a sans-serif font), size (10pt), line-height an anchor link, it has the following pseudo classes:
(10pt), and weight (bold)
• Color: For text (dark blue) • link — this rule is applied to a link element
that has not been visited
• Text decoration: no underline
• visited — applied when the link element
In order to format each of the entries in this has been visited
column in the view, you need to define a style rule for
• active — applied when the link element is
the element, so the selector in the rule is “A”.
the currently active link
Here’s the content of my “A” rule:
• hover — applied when the user has the
A { font-family:arial,helvetica,
mouse over the link element
sans-serif;
color:#000033;
font-size:10pt;
Returning to the Lessons view example, when
font-weight:bold;
the user moves his mouse over a link in the view,
line-height:10pt; we want to change the color of the link text and the
text-decoration: none background color. Therefore, we need to define an
} additional style rule for the A selector:
Your style page also needs to define a A:hover { color: #800000;
rule for the TD selector (for the date column, background-color:#999900
which is not a link, and so it is simply surrounded }
in tags) and the .CatHeading class
selector for the categorized headings in the view When the user points his mouse over any of the
(which we surrounded in a tag with a links on the page, this rule will take precedence over
CLASS=CatHeading attribute). the basic “A” rule. Note that only the properties
that change on mouseover need to be re-defined in
It is important to check the page property this second rule. The font, line-height, and text
“Treat Content as HTML” so that Domino will serve decoration rules will continue to apply, as they do
it up to the browser in the correct format. Figure 9 not conflict with the original rule. This behavior is
shows my style page, which is called viewStyle, in known as inheritance.
Domino Designer — you can see my rules for the TD
and .CatHeading selectors here.
Inheritance
What about changing the style on mouseover?
In order to do this, we need to use a different type Some HTML elements inherit the style of their parent
of selector, a pseudo class. element on the page. Take the following example:
16 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Figure 9 The “ViewStyle” Page in Domino Designer
H1 { color: green } image properties — by default, the value for these
... background properties is transparent, so that the
This is exciting isn’t it? parent background will show through.
The word “exciting” belongs to the tag, not What about changing the style on
the tag. However, it inherits the style of H1 mouseover? To do this, we need
because it is inside that tag and deemed to be a child to use a different type of selector,
of it. a pseudo class. Pseudo classes
re-define some of the properties in
Inheritance applies to some properties and not to the rule for a tag. The other properties
others. For example, margin settings are not inher- in the original rule continue to apply.
ited, and neither are background-color or background-
No portion of this publication may be reproduced without written consent. 17THE VIEW March/April 2001
Applying Styles to Links That Act button; if you had more buttons, the average would be
even less. So I was able to reduce the contents of the
as Menus or Action Bars frame to a total of only 0.41 KB, i.e., about 2 percent
One of the most common reasons for using CSS in of the size of the original. This may not seem like
Domino is to control the appearance of links used as much of a gain, but if you replace buttons in all the
navigation aids (menus, or a string of links that look menus on a page, it adds up.
like an action bar, for example). Before CSS, menus
or action bars were most often created using images To implement the new action bar, I needed
for the buttons. For example, in the sample applica- to create the following design elements/content:
tion that accompanies this article, the “action bar”
was previously built with images to create the 1. A page (called Style) that contains the style
following navigation aid: sheet.
2. A page (called actionBar) that contains the
action bar. This page loads into a frame and
contains Hotspot links on it. It imports the
In that earlier implementation, each of the style page using the HTMLHeadContent
images also had a mouseover image — so the frame object.
that displayed the “action bar” contained about
20 KB in images (2 KB for each of the five images;
multiplied by 2 to account for the mouseover image), Before CSS, menus or action bars were
and 109 characters for each image tag; giving the most often created using images for the
image-based action bar a total of 20.5 KB. buttons. By replacing images with CSS-
styled text, you can reduce the size of a
With CSS, I was able to reduce the size of the page and make page creation and
page and increase the ease of creating and maintain- maintenance easier.
ing content. Changing the color of a button that is
created with CSS-formatted text is a lot easier than
having the button re-created by a graphic artist.
By replacing the images in the earlier action bar Implementing the Style Page
with styled text, I was able to achieve an effect like
this: To make each of the links look like a button, I needed
to define a style rule for the link element, so
the selector in my rule is an A. I applied a variety
of rules to the links to control the following
properties:
With a mouseover effect like this: • Font: Family (Webdings), size (10pt) and
weight (bold)
• Color: For text (green) and background (gray)
• Border: For style (groove for bottom and right;
The contents of the frame were reduced to ridge for top and left), color (dark gray for bottom
1 character for each button, plus 81 characters and right; light gray for top and left) and size
for the style sheet — this is the average for each (2 pixels for all sides)
18 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Figure 10 The Style Page in Domino Designer
• Other Layout: Padding (2 pixels for right The characters 5, 6, 7, 8, and 9 create the
and left) following Webdings symbols:
The content of the rule for the link element
is shown in Figure 10.
The actionBar page contains Hotspot links that To make the basic buttons, I created a Hotspot
are the buttons on the action bar. Each button is a link around each of the characters. It is important
character that corresponds to the appropriate symbol that these characters do not have any Domino styles
using the Webdings font. applied to them, so I made sure they were formatted
No portion of this publication may be reproduced without written consent. 19THE VIEW March/April 2001
Figure 11 The “actionBar” Page in Domino Designer
on the page in default sans-serif, size 10. In Domino Domino HTML Action Bars,” also in this issue of
Designer, my actionBar page looks like the one you THE VIEW.
see in Figure 11.
The page contains a horizontal rule and five
Hotspot links. The text for the links (5, 6, 7, 8, and 9) How to Design Elements That
is formatted in the Hotspot properties as default
san-serif, 10 point, regular. Between the Hotspots
Don’t Have an HTML Tab
are HTML entities ( ) that insert a space. Their The action bar example demonstrated how to apply
function is simply to space the buttons slightly apart . styles to link elements on a Domino page using an
imported style sheet that is defined on another
Note that this example has focused entirely Domino page.
on appearance. If you are interested in knowing
how to build a working action bar model, refer to You can use the same approach to format most
Robert Patt-Corners’s article, “Building Custom design elements on Domino forms or pages.
20 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Figure 12 Applying Styles to Elements without an HTML Tab on their InfoBox
If the actual design element that you want to Downloadable Fonts
apply a style to does not have a HTML tab on its
You may have wondered, “How is the action bar
InfoBox, then place the element in a table, and use
menu going to look if the user doesn’t have
the tab of the InfoBox for the table cell to apply
Webdings installed?”
the style.
A style can be applied to the entire table using This is a very good question. If you know
the Table HTML Tags section of the tab, or or suspect that your users don’t have a particular
it can be applied to an individual cell using the font installed (Webdings, for example), and your
fields in the Cell HTML Tags section, as shown formatting requires it, you will need to use
in Figure 12. downloadable fonts — a really valuable CSS
feature.
Neat Things You Can Do To declare a downloadable font for use in any of
the style rules on the page, add the following rule to
with CSS your style sheet:
Beyond styling text, you can implement some
useful functions with CSS. This section outlines @font-face {font-family: Webdings;
scr:url(Webdings.eot)}
some of them.
No portion of this publication may be reproduced without written consent. 21THE VIEW March/April 2001
The url() function points to an embedded The menuBar page in the sample application
OpenType font file, which you can create using a font demonstrates how to create the following menu,
compression tool. Then, when you apply Webdings which uses the Help cursor on mouseover of the
as a font-family, you can be sure that it is available Help link:
to the user.
Unfortunately, the downloadable font feature is
not available in Netscape Navigator.
Other cursor values include hand, wait, crosshair,
Using Style Rules to Hide Page Elements
and move.
It is possible to hide elements from the browser by
changing their display property. I use this technique
when I want to send an editable field to the browser, Bulleted Lists
but hide it from the user, without generating HTML
for all the hidden fields on the form. Simply wrap It is also possible to select the bullet that should be
the field in a tag, and apply a style that will used for list () elements on the page. You can
hide the contents of the DIV, like this: choose from a number of different bullet styles, or
import your own image.
Contents of the DIV tag here - Domino editable
fields etc… UL { list-style-image: url(star.gif) }
You can still get a handle to the field with In this example, the url() function will download
JavaScript, because it has been sent to the browser, the star image and display it as the bullet point for
but the user cannot see it or select it. all the unnumbered list elements on the page.
Cursor Appearance Positioning
You may remember this technique from Kevin CSS Positioning allows you to dictate the vertical
Pauli’s article on dynamic HTML, which appeared in (top), horizontal (left), and depth (z-index)
a previous issue of THE VIEW.2 You can specify the positioning of any of the HTML elements on
appearance of the cursor when it is hovering over an your page.
element on the page. The following code displays the
Help cursor (an arrow with a question mark beside it) The LearningZone graphic you saw back in
when the mouse is over the link on the page: Figure 2 is an example of how you can use position-
ing to make text headings on your pages more inter-
esting. The following style rules achieve the effect:
.help { cursor: help }
… #title1 {font: normal verdana 28pt; color: black }
Help #title2 {font-family: italic verdana 28pt;
color:#1e90ff;
position:relative; top:25px; left:-25px;z-index:1}
2
Kevin Pauli, “How Dynamic HTML Integrates with Domino in
Web Applications,” THE VIEW, September/October, 1998.
22 www.eVIEW.com © 2001 THE VIEW. All rights reserved.Using Cascading Style Sheets in Domino
Then, on the page where the title goes, you need • You can learn more about CSS Positioning
something like this: from this site’s CSS Positioning resource:
LearningZone author/css/csspos/csspos.asp
Because the title2 style invokes a relative posi- • For a list of the named colors and their RGB
tioning, the title2 tag will be positioned 25 values, refer to the Color Table link, which is
pixels lower and 25 pixels to the left of (“relative to”) beneath the DHTML References link:
where it would normally be positioned. The z-index
property makes the word Zone appear in front of the http://msdn.microsoft.com/workshop/
word Learning. author/dhtml/reference/colors/colors.asp
There’s a lot more to know about positioning.
• For more information about embedding fonts with
Kevin Pauli covered this topic in detail in his article
@font-face, see the font embedding page
(referenced earlier). I have also included a link to a
on this site:
useful explanation on positioning in the next section.
http://msdn.microsoft.com/workshop/author/
fontembed/font_embed.asp
Additional Sources
of Information and Help
To Check on Cross-Browser
CSS syntax is explicit and strictly applied (particu- Compatibility …
larly in Netscape Navigator), so if you find that noth-
ing is happening when you apply a style sheet, check For CSS-1 features and functionality, refer to the
the syntax thoroughly. House of Style Property-by-Property reference:
http://www.westciv.com/style_master/
academy/browser_support/
To Learn More … propertyXproperty.html
Go to the Microsoft Web Workshop (http://
msdn.microsoft.com/workshop/) home page, For CSS-2 features and functionality, refer to
and select the DHTML, HTML, and CSS link. David Baron’s comprehensive test results at:
Other useful links on this page are listed below:
http://www.people.fas.harvard.edu/~dbaron/css/
• For a complete list of the CSS Properties and test/results
their possible values, select the CSS Attributes
Reference link from the table of contents. This
is an excellent reference with links back to each
of the HTML elements that the properties will More Interesting Stuff …
work for:
The CSS standard is available from W3C’s site:
http://msdn.microsoft.com/workshop/author/css/
reference/attributes.asp http://www.w3.org/Style/CSS/
No portion of this publication may be reproduced without written consent. 23THE VIEW March/April 2001
W3C also provides a CSS Validator, which you With style sheets, changing a view is as easy
can download — useful if you have a sophisticated as changing a few lines in one page in the database.
structure and need to test it: This CSS benefit is particularly valuable during
development, as it allows you to show a customer
the effect of changes in styles immediately.
http://jigsaw.w3.org/css-validator/
DOWNLOAD.html
Amelia Pape (B.Bus., Grad.Dip., M.Com.,
For those who prefer a hard copy, Danny CLP, CA) is a director of Resolve IT, a
Goodman’s Dynamic HTML: The Definitive Guide Domino-based Application Service Provider.
(O’Reilly & Associates, August 1998) has a good
Resolve IT is currently developing one of
CSS Reference.
Australia’s first e-Learning portals —
LearningZone — which provides
organizations with fully managed,
end-to-end online training services.
Conclusion
Amelia has been working with Lotus Notes /
In my experience, the real gain that comes from Domino since 1997, focusing on Web-based
using style sheets is the ease of style maintenance on-line learning for most of that time.
across an application. Prior to her enlightenment, she qualified
as a Chartered Accountant working for
Consider the work that is involved in changing
PriceWaterhouseCoopers and then as an
the appearance of views in an application. Without
a style sheet, you would need to open each view in Associate Lecturer at Queensland University
Designer, select the view column, open the properties of Technology. She is the author of several
box, change the view column heading format, change technical articles and Domino R5 training
the view column row format, go to the next column, courses that are distributed worldwide. You
etc., etc. And that’s just one view! What if you need can e-mail Amelia at amelia@smespace.com
to change ten or twenty? Then, there are also forms or visit www.learningzone.com.au.
and pages and documents.
24 www.eVIEW.com © 2001 THE VIEW. All rights reserved.You can also read
