2004 February | HTMLCenter - Web Development Blog

Archive for February, 2004

Feb 2 Preparing your CSS for Internet Explorer 7 Posted at 8:39 pm | No Comments »

Later on this year Microsoft will officially release Internet Explorer 7. If you can’t wait until then, you can download a beta version and see how it works. Microsoft has hinted that when IE7 is officially released they’ll be looking to quickly upgrade users from IE6, so it’s essential that your website is prepared for this new browser.

You can also grab a screenshot of your website on Internet Explorer 7 using a service such as Browsercam. Although this will only provide you with static screenshots, it’ll save you having to download IE7 and will mean you can keep using IE6 on your computer.

When looking at your website in Internet Explorer 7, you may notice a few things look different or even that the layout is totally broken. This will almost certainly be due to a number of changes that have been made in IE7 from its predecessor, IE6.

Internet Explorer 7 will understand the child selector

Historically, one of the easiest ways of hiding CSS rules from Internet Explorer is to use the child selector. To date, Internet Explorer hasn’t understood the child selector so will totally ignore any CSS rule that uses it. Internet Explorer 7 will however understand the child selector.

The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

If you wanted to send a different width value to IE than to other browsers, you could have used the following:

#foo {width: 400px;} html>body #foo {width: 300px;}

Historically, the first CSS rule would have been just for IE and the second for every other browser. Now, the first CSS rule is for IE6 and previous versions and the second for IE7 and non-IE browsers.

Internet Explorer 7 won’t understand the star html hack

The star html hack worked in the opposite way to the child selector, in that any CSS commands that use this hack are only seen by Internet Explorer. So, to send commands only to Internet Explorer (including IE on the Mac), you can use:

* html #foo {width: 400px;}

The * essentially means a wildcard (i.e. it refers to any and every element). The above rule will apply to any element assigned id="foo" that’s nested within the <html> tag (which of course it will be), which is itself nested inside any other HTML element.

Huh? Surely the <html> tag can’t be nested inside another tag!? Well, no of course not… but Internet Explorer 6 and before disagree and will actually obey the above command. Internet Explorer 7 will however (correctly) ignore the above command, along with all other non-IE browsers.

XML prolog won’t force quirks mode

There are currently two ways of declaring the ISO value in HTML files. One of them is to place the XML prolog on to the very top line of each HTML file, directly before the doctype declaration. Declaring it this way means that the first three lines of each HTML file might look like this:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(The first line is the XML prolog; the second and third lines are the doctype declaration.)

By not having the doctype declaration on line 1, Internet Explorer 6 reverts to quirks mode (despite the fact that the above HTML code is perfectly valid). Internet Explorer 7 however will not revert to quirks mode, and will instead render the web page in standards mode. (You may wish to read more about quirks and strict modes, if you haven’t heard of these terms before.)

There are a number of differences between quirks and strict mode, so if your site uses the XML prolog then you may see quite a contrast in how it looks on IE6 (quirks mode) and IE7 (strict mode). One of the main differences between the two modes is that the box model is incorrectly calculated in quirks mode (in quirks mode, the padding and border are placed inside the content area, thereby reducing the amount of space available for the text).

Filtering / hacking to Internet Explorer 7

Your website may end up looking very different (or even illegible) on Internet Explorer 7 compared with other versions of IE and also non-IE browsers. On top of this, the two hacks traditionally used to hide from or show exclusively to IE (child selector and star html hack) won’t work anymore! What to do!?

Microsoft are suggesting that to filter CSS commands from/to Internet Explorer 7 you use conditional comments. You’ll need to create a CSS file for any Internet Explorer 7-only commands and then use conditional comments to send this CSS file only to this browser. To do this, you’ll place the following code into the header of each HTML file, after the command calling up the main CSS file:

The only commands you need to place into this extra CSS file are those which will override commands in the main CSS file. You don’t need to duplicate commands across the two CSS files as IE7 will also read through the main CSS file. Do also note that conditional comments can only be placed inside HTML files and not CSS files.

CSS Improvements on Internet Explorer 7

The good news is that Microsoft has made a number of CSS bug fixes to Internet Explorer 7, so much of the weird behaviour in Internet Explorer should cease.

Internet Explorer 7 will also have increased support for more CSS commands and rules, most notably that :hover will work on all elements (currently it only works on links in Internet Explorer). This means that you can make CSS dropdown navigation menus in Internet Explorer 7 without any JavaScript. Non-IE browsers have supported the use of :hover on all elements for a long time.

Conclusion

Internet Explorer 7 will be officially released very soon and there will almost certainly be a quick upgrade to this version. Once the browser has been officially released expect the number of site visitors using IE7 to increase very quickly. Make sure your website is ready.

This article was written by Trenton Moss. He’s crazy about web usability and accessibility - so crazy that he went and started his own usability and accessibility consultancy (Webcredible) to help make the Internet a better place for everyone. He knows a lot aboutaccessible web design and likes to conduct a website review as often as he can.

Tags: internet explorer css
Posted in css tutorials

Feb 2 CSS Tips Posted at 8:39 pm | 1 Comment »

Check out some tips and tricks for CSS and style sheets.

Link Color

Want to make some of your links a different color? Try adding a color style to your link.

<A href="file.html" style="color: green" > click here </A>

Mouseover Link Color

Want to make your links change a different color? Try using the hover declaration.

<style>
A:hover {color:green}
</style>

<A href=”file.html”  > click here </A>

No Underline Link

Want to remove the underline from your links? Try adding a color style to your link.

<A href=”file.html” style=”text-decoration: none” > click here </A>

Change the font inside a table

So you made a table but you would like to change the style of font used in your columns. Instead of inserting font tags inside each of the cells change your font with CSS.

<style>
TD.red {color:red }
TD.Arial {font-family:Arial }
</style>
</head>

<table>
<tr><td class=”red”>
This is some text
</td></tr>
<tr><td class=”Arial”>
This is some text
</td></tr>

</table>

Special Headline

Want to make a special headline for your page? Try using positioning to place text over text.

<HTML>
<HEAD>
</HEAD>    
<BODY bgcolor=yellow>

<DIV style=”position: absolute; 
top: 15px; 
width: 370px;
height: 80px; 
font-size: 60pt; 
font-family:Verdana; 
color:red”>CHICKEN</DIV>

<DIV style=”position: absolute; 
top: 35px; 
left: 110px; 
width: 300px; 
color:blue; 
height: 20px; 
font-style:italic; 
font-family:Arial; 
font-size: 45pt “>
Super</DIV>

</BODY> 
</HTML>

Drop Shadow

Want to make a Text drop shadow but you don’t want to use a large gif or jpeg image. Use absolute positioning to make a duplicate block of text. Then offset the first text block and use a dark gray color for the text.

<HTML>
<HEAD>
</HEAD>  
<BODY bgcolor=yellow>  


<DIV style=”position: absolute; 
top: 15px; 
width: 370px;
height: 80px; 
font-size: 60pt; 
font-family:Verdana; 
color:808080″>CHICKEN</DIV>

<DIV style=”position: absolute; 
top: 10px; 
width: 370px;
height: 80px; 
font-size: 60pt; 
font-family:Verdana; 
color:red”>CHICKEN</DIV>

</BODY>
</HTML>

Drop Caps

Want to make the first letter in your paragraph a drop cap? Try floating that character in a span element.

<HTML>
<HEAD>
<style>
.dropcap {
width: 1em;
height: 1em;
float: left;
text-align: center;
font-size: 20pt;
color:red;
font-style:italic
}

</style>
</HEAD>
<BODY bgcolor=ddddaa>

<TABLE><TR><TD width=”200″>
<p><SPAN class=”dropcap” >
T</span>his is a dropcap
text text text text text text text text 
text text text text text text text text 
text text text text text text </p>
</TD></TR></TABLE>
</BODY> 
</HTML>

Tags: CSS Tips
Posted in css tutorials

Feb 2 CSS Text Posted at 8:38 pm | No Comments »

Text Formatting

Where Font attributes apply to the character level Text Formatting applies to how the characters are manipulated to makeup words and how words are used to make sentences.

Indenting

The text-indent property will allow you to indent the first line of a block of text.

Values include: length, percentage

 P { text-indent: 3em }

Text Alignment

Defines how a block of text will be aligned within a containing element.

Values include: left, right, center, justify

P { alignment: center }

Decoration

This property can be applied to text to add additional decorative features.

Values include: none, underline, overline, line-through, blink
Note: Blink does not work with IE and Overline does not work with NS4.

You can also use this declaration to override the default settings of the users agent. The following example will allow you to create links that are not underlined.

Also see Pseudo Class Elements.

<style>
  A:link, A:visited, A:active { text-decoration: none }
</style>

<a href=”file.html”>Click Here</a>

Text shadows

Allows you to define a shadow effect to your text. Note: This Text Formatting feature does not work in IE4 or NS4.

<style>
  P { text-shadow: black }
</style>

<P>This is some text</P>

Word Spacing

Word Spacing allows you to define the amount of space between words. Note: This Text Formatting feature does not work in IE4 or NS4.

Values include: normal, length, auto

  H1 { word-spacing: 1em }

Letter Spacing

Letter Spacing allows you to define the amount of space between letters in each word. Note: This Text Formatting feature does not work in NS4.

Values include: normal, length, auto

<style>
P { letter-spacing: 0.1cm }
</style>

<P>This is some text</P>

Text Transform Case

Case allows you to change how a block of text will appear. This is an easy way to override the formatting of a block of text that has already been typed and placed in the document.

Values include: capitalize, uppercase, lowercase, none

The values of this property have the following meanings:
capitalize: first character of each word is uppercase
uppercase: all characters are uppercase
lowercase: all characters are lowercase
none: element ignores parent element value

<style>
P { text-transform: uppercase }
</style>

<P>This is some text</P>

White Space

White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words. Note: This Text Formatting feature does not work in IE4 and has only partial support in NS4.

Values include: normal, pre, nowrap

In the example below the H1 element has been given the white-space value of pre or preformatted text. This means that additional spaces between words will be preserved as if the block was preformatted text.

<HTML>
 <HEAD>
  <STYLE type=”text/css”>
  H1   { white-space: pre }
</STYLE>
<BODY>

<H1>This is     some text </H1>

</BODY>
</HTML>

Tags: CSS Text
Posted in css tutorials

Feb 2 CSS Tables Posted at 8:30 pm | No Comments »

Caution should be used when defining selectors that alter the proportions and layout of your tables. If selectors are used to set widths or row and column spanning there is the possibility that your documents could become unreadable by User Agents that can not correctly parse the selectors.

Tables are often used by Authors to organize their page content into readable and visually appealing documents. Tables are defined by using a layered grid.

The <TABLE> element being on the bottom defines:
the overall width and height of the table and how the cells of the table will be separated with margins.

The <ROW> element is then used to separate the table into a number of horizontal rows but can not contain the actual page content.

Finally the top layer the <TD> element is used to define columns that are placed inside the rows to hold the actual information to be displayed.

Table Headers <TH> are also used to provide comment lines between the row / column contents. They can not contain column elements and are considered row elements.

The <CAPTION> element can be used to contain a description of the table. Although the code is placed inside the <TABLE> element it is displayed outside the boundaries of the table border.

Because all of these elements are containers many formatting Declaration Values can be applied to them to define: width, color, border,… and styles can be inherited by their child elements to define: text color, size, and family and so on.

An example would be:

<HTML>
 <HEAD>
<style>
 TABLE {background:00C9FF }
 CAPTION {background:blue; color:yellow; font-size:20pt;
 caption-side:bottom }
 TR.whitetext {color:FFFFFF ; font-size:18pt}
 TD.redtext {border: thick solid red; color:red;
 font-size:24pt}
 TD.ltgreenbackground {background:lightgreen}
 #width30 {width=30}
 TD.image {background: url(chicken.jpg) fixed;
 vertical-align:bottom }

</style>

</head>
<body>  

<table border=0>
<th colspan=3>This is the header</th>
<tr class="whitetext">
<td>This is the first row first column </td>
<td class="ltgreenbackground" width=30>
<font color="green">second row second col</font>
</td> <td>Row 1 Col3</td> </tr>
<tr>
<td ID="width30" class="redtext">
This text should be red
</td>
<td bgcolor="yellow">Row2 col2
</td> <td class="image">
<font size="2">can you see the chicken?</font> </td> </tr>
<caption bgcolor="green">This is a caption</caption>
</table>

</BODY>
</HTML>

The following images are representations of how this table is displayed in Internet Explorer and Netscape. You can see that the tables are dramatically different. However IE4 offers the best representation of the table when styles are used for element declarations. In the table you should notice that when Selectors are applied to parent elements like the <TR> they are inherited by their child elements the <TD> tag. You can override the style selectors locally by applying formatting values to the child elements.

This is important to remember and as suggested care should be taken to check compatibility across browsers.

Yes it is an ugly table but that’s not the point. Take a look at the differences between what endusers will see and what you may see if you develop with only one browser in mind.

This is the table in Internet Explorer

This is the table in Netscape

With this in mind here are the declarations that may be used for your
table elements.

column-span

Sets the number of columns that a will be spanned by a column that is above two or more columns.

row-span

Sets the number rows a cell will span.

width

Sets the width of the table cell

border

The border Declaration can be used for shorthand to define the color, style, width of your border.

Example you define a border of a cell with the following selector:
TD.red {border: red thick}
The cell will be red and thick.

You can also use the following declarations to define these properties individually.

border-width

Sets the width of the border of the Cell.

border-color

Sets the color of the border.

border-style

Sets the type of line used for the border.

Values that can be used in IE include:
blank, double, solid, ridge, groove, none

The following values are not implemented in IE:
dashed, dotted

vertical-align

When you align contents in the sell you are shifting the baseline of the cells contents. The first Line of text or the bottom of the first image is used to set the baseline of a Table Cell. If the Cell is empty the bottom of the cell is considered the baseline.

<Style>
TD {vertical-align:bottom}
</Style>

Alignment

Used to align text horizontally within a cell

caption-side

Used to position Table Captions

speak-header-cell

Used to tell Text to Speech Synthesizers how they should interpret and read the table.

Tags: CSS Tables
Posted in css tutorials

Feb 2 CSS Selectors Posted at 8:30 pm | No Comments »

Selectors

A Selector is the definition of a formatting Style that can be applied to a HTML Element. The Selector has three basic parts:
Element {Declaration: Value}

The Declaration and Value are surrounded by {} braces and the Declaration is separated from the value by a colon : and a space.

The Selectors relation to common HTML would be similar to this tag structure that is used to define the color of a font:
< font color=orange >

Where Font is the Element, Color is the Declaration and Orange is the Value of the Declaration.

Type Selectors

Type selectors are used set the definition of a certain type of element. If you wanted to assign a property to all of the <H1> elements in your document you would use the following.

<style>
H1 {color: 000fff}
</style>

The syntax is:
Element {declaration: value }

Multiple Declarations

If you would like to define more than property for your Element you can use a semicolon ; to separate Declarations.

<style>
H1 {color: 000fff ;
    font-weight: bold;
    font-size: 12pt
}
</style>

The syntax is:
Element {declaration: value ; declaration: value}

Grouping Elements

If you would like to apply the same properties to different elements you can use a coma , between the elements and use the same Declarations and Values.

<style>
H1, TD, P {color: 000fff }
</style>

The syntax is:
Element, Element, Element {declaration: value }

Parent Child Elements

Contextual elements can be combined to for a selector that will be applied only if a certain element pattern is used in the HTML.
(Only works in IE4)

If you wanted all Italic characters to be Blue but only if they were contained inside a H1 headline.
You could define the selector like this:

<style>
B ~ I {color: 000fff }
</style>

The syntax is:
ParentElement ~ ChildElement {declaration: value}

The following text would be bold but the Italic (e) would be rendered both Italic and Blue. However Italic text that is not contained inside a Parent B Element will be rendered just plain Italic and not blue.

<B>T<i>e</i>xt</B>

Sequential Selectors

When you want to define a selector that would be applied only if one element directly follows another element you can use the following format.
(Only works in IE4)

<style>
/P ~ I/ {color: 000fff }
</style>

The syntax is:
/FirstElement ~ SecondElement/ {declaration: value}

And would be applied as follows:

<P>Chickens</P>
<I>happy chickens</I>

ID Elements

If you would like to define a declaration and value that you can apply to elements in your document but you do not want to apply this declarationto all tags of one type you can use an ID element and then apply that ID to your tags as you wish.

<style>
#abc123 {color: 000fff }
</style>

<P id=abc123> text </p>

The syntax is:
ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>

If you would like to set up optional declarations for a single element you can apply an ID to an element. This will allow you to use varying styles within the same element.

<style>
H1 #abc123 {color: 000fff }
</style>

<H1 id=abc123> text </H1>

The syntax is:
Element ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>

Class Elements

Class Elements are defined in a similar method to ID Elements. They can be applied various to HTML elements in a per element method or they can define a subset class of an element.

<style>
.chicken {color: 000fff }
</style>

<H1 class=”chicken”> text </H1>

The syntax is:
.class {declaration: value }

The HTML Tag referenced:
<tag class=”classname”>

Pseudo-Classes

The ability to change the properties of a element based on the state of the element can be accomplished by using a Pseudo Class Element.

The Anchor < A > element can have different rendering properties applied to it based upon the current state.

The possible variations include:
link - unvisited links
visited - visited links
hover - user hovers
active - active links

<style>
A:hover {color: orange }
</style>

<A href="file.html> click here </A>

The syntax is:
element:pseudo_class {declaration: value }

Tags: CSS Selectors
Posted in css tutorials

Feb 2 CSS Lists Posted at 8:28 pm | No Comments »

Lists

CSS Selectors can provide the Author extended control over how their Lists are formatted. Properties can be applied to the markers that appear before the list items to provide order to the information. In addition to the regular list styles that are available in HTML the author can also define their own marker item by using animage. Other proposed CSS declaration values would control how the list item markers are applied and indented in relation to the line items.

The possible values have the following meanings:
disc: A disc (exact presentation is UA-dependent)
circle: A circle (exact presentation is UA-dependent)
square: A square (exact presentation is UA-dependent)
decimal: Decimal numbers, beginning with 0.
lower-roman: Lower case roman numerals (i, ii, iii, iv, v, etc.)
upper-roman: Upper case roman numerals (I, II, III, IV, V, etc.)
lower-alpha: Lower case ascii letters (a, b, c, … z)
upper-alpha: Upper case ascii letters (A, B, C, … Z)
none: No marker

<STYLE>
  OL { list-style-type: lower-roman }
</STYLE>

<BODY>

<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>

</BODY>

list-style-image

When you would like to us an image to represent the bullet of your list items you can use the URL value you can also define a list-style-type to be used if the enduser has disabled the loading of images.
(Works only with IE4)

The following example sets the marker at the beginning of each list item to be the image “icon.jpg”.

<style>
  UL { list-style-image: url(http://www.server.com/icon.jpg) }
</style>

list-style-position

CSS2 has also defined a selector declaration that would allow you to position the List marker either away from the Line Item or it could have the value compact that would make the Marker move to the position of the first character in the Line Item.
(This is not implemented in either IE4 or NS4)

Possible values include: inside, outside

<style>
  UL { list-style-position:inside }
</style>

Tags: CSS Lists
Posted in css tutorials

Feb 2 CSS Cursors Posted at 8:27 pm | No Comments »

Cursors

To add context to the elements in your documents you can use the Cursor property to control how the pointer will be displayed when it passes over your elements.

This declaration only works in IE4 Animated cursors can not be defined.

Values and their descriptions include:

auto: Allows the Enduser’s browser to select the Cursor.

crosshair: Crosshair

default: Default Cursor

pointer: Pointer that indicates a link.

move: Indicates something is to be moved

*-resize: Cursor used to reposition windows.

text: Text I-bar.

wait: Busy or wait hourglass cursor.

help: Help cursor

url: Is used to download a cursor. Special Care should be taken using this Value.

The selector and tag would look like:

<style>

A.help {cursor:help}

</style><A class=help href="faq.html" mce_href="faq.html">help</a>

Here are some test cursors you can try:

AUTO	Crosshair	Default	Pointer
Move	*-resize	Text	wait	help

Tags: CSS Cursors
Posted in css tutorials

Feb 2 Aural CSS Posted at 8:26 pm | 1 Comment »

Aural style sheets

To provide visually impaired users access to your pages CSS has provided some formatting declarations that will control how your pages are converted to synthesized speech. To date there are no browsers or addon products that
will take advantage of these features. One similar application would be the Hawaii Education Literacy Project’s
Freeware application Read To Me.

Although their program uses proprietary scripting to define how web pages are converted to speech it seems to be a good partial simulation of what will be provided by Aural style sheet declarations in future versions of web browsers.

There are three main groups of Aural declarations that will be available to Authors.

Volume properties

The first group will allow the author to control the volume and flow of the content through pauses. It will also provide a way to combine audio files that will be played in the background at defines times as the text is generated.

The possible declarations include:
volume, speak, pause-before, pause-after, pause, cue-before, cue-after, cue, play-during

Spatial Values

The second set of declarations will control the 3D spatial value of the direction of the speech. This is similar to the properties that are found in VRML and Multimedia Games.

Spatial Property Declarations include:
Azimuth which positions the sound in a 360 degree plane can be
used to position the direction of the speaker and if more than
one speaker is active then relative positions will be used to
offset their position to reduce confusion.

Values include: angle, left-side, far-left, left, center-left, center, center-right, right, far-right, right-side, behind, leftwards, rightwards

Elevation: is used to position the Y value or height of the direction the sound is coming from.

Values include: angle, below, level, above, higher, lower

By using these two declarations if you wanted the sound to come from the lower right you would set Azimuth to right and Elevation to lower.

Voice characteristic properties

The final group of declarations will control the quality of the voice used to generate the synthesized speech. Choice of characters the rate of speech and the ability to control how words are emphasized to provide sentences structure will allow authors to tweak their presentation.

The possible declarations include:
speech-rate, voice-family, pitch, pitch-range, stress, richness, speak-punctuation, speak-date, speak-numeral, speak-time

Tags: Aural CSS
Posted in css tutorials

Feb 2 Applying CSS to Forms Posted at 8:25 pm | No Comments »

Forms are an essential part of interaction on the Internet but they can look rather drab. With CSS we can position form items so they all line up nicely and add a bit of colour to jazz them up.

The original form

That form looks horrible! Here’s the code behind it:

<form action="destination.htm">
<label for="name">Name</label> <input type="text" id="name" /><br />
<label for="e-mail">E-mail</label> <input type="text" id="e-mail" /><br />
<input type="submit" value="submit" />
</form>

Positioning the form with CSS

The first thing we need to do to the form is make it line up nicely. In the old days this could only be achieved with tables - not anymore, courtesy of our old friend, CSS. First, we’ll assign a class to each form item:

<form action="destination.htm">

<label for="name">Name</label> <input type="text" id="name" class="input-box" /><br />

<label for="e-mail">E-mail</label> <input type="text" id="e-mail" class="input-box" /><br />

<input type="submit" value="submit" class="submit-button" />

</form>

The two input boxes have been assigned the class, input-box, and the submit button, submit-button - hmm… how did we think up those names?

Now they’ve got their classes we’ll need to assign some rules to them:

label

{

width: 4em;

float: left;

text-align: right;

margin: 0 1em 10px 0

clear: both

}

.input-box

{

margin-bottom: 10px
}

.submit-button

{

margin-left: 5em;

clear: both

}

Right, let’s go through that CSS bit-by-bit. We gave the label a fixed width of 4em, although this should obviously be increased if the prompt text in the form is anything longer than what we’ve got now (‘name’ and ‘e-mail’). We also specified the width in terms of em and not px so that if users increase the text size the width will increase with the larger letters.

The margin: 0 1em 10px 0 CSS command means the labels will have a margin above them of 0, to the right of 1em (so that the text isn’t up against the input box), a bottom margin of 10px (to create some space between each line) and a left margin of zero. The clear:both CSS command is necessary to ensure the text (‘name’ and ‘e-mail’) starts on a new line.

The submit button has a left margin of 5em so that it aligns with the input boxes, which are 5em from the left. This includes the 4em width and the 1em right margin of the prompt text.

So, putting that altogether gives us this form:

Looks much better, but it’s still rather plain. Let’s use some more CSS to jazz up the form so it’s more inline with the colour scheme on the page.

Applying colours to the form

The three CSS commands we’ll use to make those forms look good are border, background and color (you can also use any other CSS command, such as font, text size, bold etc.).

So, let’s say we want the input boxes in this form to have a dark blue text colour and border and a pale orange background, and the submit button to have black text, an orange background and a dark blue border. In addition to the above CSS, we would add in the following commands:

.input-box

{

color: #26a;

background: #feb;

border: #26a solid 1px

}

.submit-button

{

color: #000;

background: #fb0

border: 2px #9cf outset

}

(#26a is an abbreviation of #2266aa - you can apply this shorthand version with any colour value with repetitive numbers like this.)

We use ‘outset’ for the button’s border so that it looks like a button. If we used ‘solid’ it would look flat. Here’s how the form comes together:

One word of warning, be careful about using a light text colour for text with input boxes. More and more Internet users are using the Google Toolbar which fills in online forms for you. Whenever a form appears it automatically turns the background colour of input boxes to yellow - if you’ve specified white text it would be virtually impossible for your site visitors with this toolbar installed to see what they’re writing when completing the form.

Formatting the whole form

We may want to give this form its own title and border. To do this we add the <fieldset> and <legend> commands to the HTML code:

<fieldset>

<legend>This is my form</legend>

<form action="destination.htm">

<label for="name">Name</label> <input type="text" id="name" class="input-box" /><br />

<label for="e-mail">E-mail</label> <input type="text" id="e-mail" class="input-box" /><br />

<input type="submit" value="submit" class="submit-button" />

</form>

</fieldset>

We’ll apply some CSS commands to the fieldset and legend to give the form a blue border and a title with an orange background:

fieldset

{

border: #26a solid 1px;

width: 20em

}

legend

{

background: #fb0;

border: #26a solid 1px;

padding: 1px 10px

}

The final form

Drum roll… Here it is:

This is my form

Here’s the CSS we used to make this, all in one place:

label
{

width: 4em;

float: left;

text-align: right;

margin: 0 1em 10px 0

clear: both

}

.input-box
{

float: left;

margin-bottom: 10px

color: #26a;

background: #feb;

border: #26a solid 1px

}

.submit-button
{

margin-left: 5em;

clear: both

color: #000;

background: #fb0;

border: 2px #9cf outset

}

fieldset
{

border: #26a solid 1px;

width: 20em

}

legend
{

background: #fb0;

border: #26a solid 1px;

padding: 1px 10px

}

Take this further

This article only touches on what you can achieve with CSS and forms. You can pretty much apply any CSS command to a form item, so the only limit is your imagination. Play around with a form and see what you can come up with!

This article was written by Trenton Moss. He knows an awful lot about accessibility and the Disability Discrimination Act.

Tags: css forms tutorial
Posted in css tutorials

Feb 2 Applying CSS Posted at 8:24 pm | No Comments »

Style Sheets in External Files

Link
To define an external Style Sheet to be used to format your HTML you use place a Link element in the Head area of the HTML file.

The basic tag would be:

<LINK REL=stylesheet href="mystyle.css" mce_href="mystyle.css">

HREF specifies the location and file name and REL indicates the file is a Style Sheet.

Additional Declarations include:

Media

Media is used to define the application of the CSS to its end use. If more than one external style sheet is defined with the link element the Media type would set the proper file to be used for the proper use of the page. The Media definition is not implemented in IE4 or NS4.

You can also define more than one profile with comas between the values.

Media=Print,Screen,Aural

PRINT - For documents viewed on screen in print preview mode.

SCREEN - a continuous presentation for computer screens.

PROJECTION - paged presentation for projected presentations.

BRAILLE - for Braille tactile feedback devices.

AURAL - aural presentation, e.g. for a speech synthesizer.

ALL - the default value, the style sheet applies to all output devices.

Title

The Title Attribute can be used to define the type of style sheet. Not using the TITLE tag makes your file persistent. This means the Selectors in a file without a title will always be applied to the document.

TITLE=”default”

If you define more than one Style Sheet to be applied to your document you can use the title attribute to group them.

<LINK href=”largefont.css” mce_href=”largefont.css”>
TYPE can be used to describe the file type of the Style Sheet.

Meta Tag

The Meta element can be used on your page to identify to the Enduser’s client that your page includes CSS information.

Style Sheet use by the Enduser

If the Enduser would like to construct their own style sheet they would follow the same method as an author that is constructing an external style sheet. However because the enduser will not be able to prepare style selectors that will override all the possible ID and Class Element Declarations the enduser’s User Agent should be able to ignore server side Style Sheets.

Internet Explorer agents define the client side Style Sheet in the Internet Options - General Tab Under the Accessibility area.

Tags: css tutorials
Posted in css tutorials

Categories

Archives