In order for CSS style codes to be applied to your page, you need to identify the areas where the styling should be applied as well as what style to apply. In the CSS world, the parts of the page to be styled are identified by a selector. Quite often these selectors are HTML tag names. If you view a SiteSpinner produced page, you will see several HTML tags, such as <body>, <div>, <a>, and <img>.
While HTML tag names are used as selectors, the problem with using them is that any style codes applied to a tag name is applied to all tags with that same name. For example, if you have several text links on your page and you want some of them in green and others in orange, then using the <a> tag name would allow you to choose only green or orange, not both.
To get around this limitation, CSS allows you to include class and/or id names inside an HTML tag definition. This allows CSS tag name selectors to have multiple “personalities.” Class and id names are added inside an HTML tag as:
<html_tag class=“class_name”>or
<html_tag id=“id_name”>
where html_tag is the HTML tag name being specified; and, class_name and id_name are descriptive user-defined name. Class and id names must start with an alphabetic character to work successfully in all browsers. An id name must be unique to the page, but a class name can be used more than once. A class name can also be used by more than one type of HTML tag.
When coding CSS, a class selector is the combination of the selector, a period, and the class name, but often the short-hand convention is used which consists of just the dot followed by the class name. For example:
html_tag.class_nameor just
.class_name
A CSS id selector is the combination of the selector, a hash mark (or pound sign), and the id name. It also has a short-hand syntax consisting of just the hash mark and the id name. For example:
html_tag#id_nameor just
#id_name
This last form, in particular the id selector, is very useful to SiteSpinner users. Since every SiteSpinner object is published as a <div> tag with an id name, it is easy to include CSS style code to a particular <div> tag block by using the supplied SiteSpinner name.
Pages: 1 2
Contact the LowTechGeezer
VM User's Forum
Bruceee's Sandpit
Webmaster's Corner
Other Useful Sites