Cascading Style Sheets make you look good (Page 3)

Search DominoPower's 11,441 Lotus-related article archive

Home
EasyPrint
News details

Articles-only

Twitter Feed

Cascading Style Sheets make you look good (continued)

Each of these ways of implementing CSS is valuable in varying situations. Once you've mastered CSS, you'll probably use linked CSS for almost everything.

The easiest way to teach people the basics of CSS, however, is to use inline CSS. All of the examples in this article will use inline CSS. That means we'll be using the STYLE attribute within HTML tags.

As always, this article targets only the Microsoft Internet Explorer 5.5 browser. Other browsers do support CSS, but there may be minor differences. I'll leave it to the reader to adapt these examples to their target browser. Don't forget to read the reference guide for your browser to find out which CSS properties it supports.

The essential essence
The essential essence of this article is the use of the STYLE attribute within your HTML tags.

The STYLE tag allows you to specify as many CSS properties as you want, separated by semicolons.

CSS properties are the various style properties and attributes such as font, color, background, margin etc. Modern browsers support lots of CSS properties, so keep the browser reference guide close to hand. You can find Microsoft's CSS properties reference at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp.

Sharpening up your image.
Okay, here are some simple examples to get you started in sharpening up your HTML image and get you going with CSS.

Example 1: the BODY element
Save this example into an HTML file and load it into Internet Explorer 5.5:


<BODY style="

  font: 23px Verdana, Geneva, Arial, Helvetica, sans-serif; 

color : green; 

  scrollbar-3dlight-color : #00609f;

	scrollbar-arrow-color : #ffffff;

	scrollbar-base-color : Blue;

	scrollbar-darkshadow-color : Black;

	scrollbar-face-color : #00609f;

	scrollbar-highlight-color : Navy;

	scrollbar-shadow-color : White;

	scrollbar-track-color : #e7e7e7;

	background : #FFDEAD;"

>

This is some text.

<BR>

Once you've loaded it into the browser, you should see a light orange background and some large green colored text. The scroll bars on the right hand side of the screen now have their own blue color scheme. Very pretty.

I'm not going to explain the individual CSS properties in these examples. Most of them are self explanatory, and you can also explore them in the CSS reference manual.

I do want to draw your attention to the structure of the STYLE tag, which contains a CSS attribute followed by a colon and the value for that attribute, then followed by a semicolon and optionally more attributes. Notice that the values can be either hex color values or the names of specific colors, such as red or blue or white. Note also that using CSS you can specify font sizes in pixels rather than HTML's inflexible font size setting.

Example 2: the SELECT element
Save this example into an HTML file and load it into Internet Explorer 5.5.


<SELECT style="color: darkblue;

background-color: transparent;

font: bold 10pt verdana;

border: 3px solid #808080;

 background : #778899;" >

<OPTION VALUE="Menu item 1">Menu item 1

<OPTION VALUE="Menu item 2">Menu item 2

<OPTION VALUE="Menu item 3">Menu item 3

<OPTION VALUE="Menu item 4" SELECTED>Menu item 4

</SELECT>

<BR>

<BR>