Number 2-07-01
CSS Selectors and their use in Page Layout
One of the main reasons for using a table to lay out a page would be that of stability and having a fixed dimension to work in whilst also providing fixed position placeholders in the form of cells in which to put our site content.
With a little extra work the same can be achieved in CSS with HTML but the issue of browser support comes to the fore in this endeavour, your site may display beautifully in the later more standards compliant browsers but older browsers DO lack support for later CSS2 features.
Experimentation and constant testing will definitely achieve the best results and it is best to get as many people using the widest range of equipment to aid you with your testing.
Examining Page Components
Your pages will be made up of many components which will comprise styles broken into three rough categories:
· Layout
· Formatting
· Navigation.
There are also different types of selectors which will best help you to define your styles.
The most common and regularly used of these are listed below with an example of usage but there are others which we will explore later.
Universal Selector / * {color: red;
} / The universal selector has no real practical value by itself. A style rule with no selector applies to all elements of all types on a page.
Element Type Selector / Body {
Color: black;
Background-color: white;
} / The single element selector is the most common, it specifies one HTML element type with no qualifiers or enhancements.
Class Selector / .special {
font-family:verdana, arial, sans-serif;
}
p.special {
font-face: verdana;
}
An HTML element can beleong to multiple classes if you wish.
Ie..
<p class=”special exiting”>
Just separate the class names with a space. / To apply a style to a potentially arbitrary group of objects you need to define a class in the style sheet and then identify the element as belonging to that class in the HTML
Ie
<p class=”special”>
The first example on the left indicates a style that can be applied to ANY text element, ie p, h1, h2 etc but the second example is restricted only to <p> elements identified as members of the “special” class. Notice also the preceding . in the class definition.
ID Selector / #top {
margin-left: 20px;
margin-top: 100px;
font-size: 20px;
background-color: red;
width: 22%;
border: 4px dashed #CC0033;
}
usage for page layout:
<div id=”top”> / Only one single instance of any ID selector is permitted per page.
ID Selectors are especially useful for identifying areas of a page for instance which only require one instance. The ID definition can contain everything related to that page area.
Pseudo Class Selector / a:hover {
Color: #ffcc00;
}
:hover
:active
:focus
:link
:visited
:lang
Any of the usual link pseudo classes can be defined in different page areas thus giving the ability to have different coloured links on the same page. / The pseudo class selector gets its name due to the fact it has no HTML tag or attribute equivalent.
The CSS2 specification defines the pseudo classes on the left.
In the case of our example application, all anchors (a) in the page will change their colour when moused over.
In the old HTML specifications we would have defined our links in the body of the document with ALINK, VLINK etc which are now deprecated.
Descendant Selector / li em {
font-size: 16px;
color: green;
} / ALL HTML elements except the HTML tag which appears as the first item on an HTML page are descendants of other HTML elements. Ie…Body is a descendant of HTML, P is a descendant of body etc…
A Descendant Selector as in our example restricts the applicability of the rule only to instances where the emphasis tag (em) is a descendant of the list (li) tag.
Redefined HTML / h1
or
#topnav h1
in combination with descendant / The h1 tag already exists with a pre-defined specification but this may not suit our purposes. To avoid creating a whole new custom class and losing the benefits of the h1. We create a new spec to be applied when a h1 tag appears in the code.
Combining this with a descendant selector also lets us use different h1 tags in different page areas.