How to Create an Ajax Autocomplete Text Field - Part 4 / Page 2 | WebReference

How to Create an Ajax Autocomplete Text Field - Part 4 / Page 2


[previous] [next]

How to Create an Ajax Autocomplete Text Field - Part 4 [con't]

Some CSS Basics

CSS syntax is made up of three parts: a selector, a property and a value:
  • The selector is the HTML element/tag you wish to define.
  • The property is the attribute you wish to change.
  • The value is assigned to the property.
  • The property and value are separated by a colon, and surrounded by curly braces.

There are four types of selectors.

The Tag Selector

The tag selector applies to whichever tag you specify. Here's an example of a CSS selector that sets the color for the entire document <BODY> to black:

Use semicolons to separate property assignments. Multiple properties can be assigned on the same line, but it's easier to read if each property is on a separate line:

The Attribute Selector

Attribute selectors limit the application of a style to HTML elements with particular attributes. The style rule below will match all input elements that have a type attribute of "button." In other words, all button elements on the page would have a white background color:

The class Selector

The drawback of using tag selectors is the style applies to all the tags of that type. By defining classes, we can apply the style to only the elements we want to affect. Classes also allow us to define different styles for the same type of HTML element. As an example, let's say you would like to have different background colors for odd and even table rows. Here's how you can do it with classes:

Append a dot and class name to the tag:

To define a CSS class, you also have to include the class attribute in your HTML document:

The tag name in the selector can be omitted to define a style that will be used by all HTML elements that have a certain class. For example, the following code would add 5 pixels of padding to all HTML elements with class="pad":

The ID Selector

The last way to define styles for HTML elements is with the ID selector. The ID selector is denoted by the '#' character. The style rule below will match the element that has an ID of "txtDate":

Our AutocompleteList Styles

There are a total of four styles defined in the AutocompleteList.css file, comprised of two ID selectors and two class ones, ordered from most outer to innermost element. Let's have a look at each of them.

At the <DIV> level, there's only one property set, via an ID selector. The position is set to absolute, so the list will overlay subsequent content, rather than push everything down:

[previous] [next]