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:
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
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 "
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.
<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: