Things about Style Sheet Selectors you need to know
After you have learned some basic of CSS, we continue with creating style sheets and the different types of selectors that you can use in writing your own style sheets.
You may have already have an idea about some CSS selectors such as h1, h2, h3, h4, div, or span - so here are some information about the different selectors you can use in your website.
Creating a Style Sheet
Now that you are able to add a style sheet to your HTML document, we now go into CSS syntax which is quite simple, the format should look like:
selector {
property: value;
}
Like so:
h1 {
color: red;
}
h2 {
color: blue;
}
The selector identifies which part of your web page gets styled. The declarations, which are inside those curly braces, define the visual style. It is always formatted as property name (color), followed by a colon (:), the value (blue) and then a semi-colon (;) terminator. It a common mistake made by webmasters, like me, to forget to end each declaration with a semi-colon.
Selectors can also take on more than one property at a time to create more complex visual presentations. In order to assign multiple properties within a selector, use a semicolon to separate the properties as shown:
selector {
property: value;
property: value, value, value;
property: value value value value;
}
selector, selector {
property: value;
}
Different type of selectors
There are different types of selectors that you could use here are brief discussions about selectors you can use.
Element selectors are selectors that name the element or HTML tag to style; in short, it is the actual name of the HTML tag you used. Here is a CSS code that would set all text inside an <h1> and </h1> tags to be red while all text inside your <h2> and </h2> will be blue:
h1 {color: red; }
h2 {color: blue; }
Class selectors are selectors that affect any element that is declared with the class created. To declare a class selector precede a class name with a period (.), here is an example which makes the assigned class (red) text colored red, and in Arial Narrow:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>CSS Sample by Tiny Signs</title>
<style type=”text/css”>
<!–
.red {
color: red;
font-family: “Arial Narrow”, Tahoma, san-serif;
}
–>
</style>
</head>
<body>
<h1>Here is a sample</h1>
<p>This is a sample paragraph with a
<a class=”red” href=”http://www.tinysigns.com”>link</a> which is red. There are also a couple of other <em class=”red”>text</em> which are <strong class=”red”>red</strong>.</p>
<p class=”red”>And a whole paragraph in red!</p>
<strong>Nice</strong>, isn’t it?
</body>
</html>
ID selectors acts like the class selectors, although according to the specifications they appear only ONCE in the document. They are often used in a <div> element, but can be used somewhere else. A hash (#) is used to denote an ID selector, insert the following to the embedded CSS in the previous example:
#nav {
border: 1px solid #000000;
padding: 20px;
}
And this just before the </body> end tag:
<ul id=”nav”>
<li><a href=”http://www.tinysigns.com”>Tiny Signs</a></li>
<li><a href=”http://www.tinysigns.com”>Free Tutorials</a></li>
<li class=”red”><a href=”http://www.tinysigns.com”>CSS Tutorial</a></li>
</ul>
The Descendants selector overrides the declared styles of the type and class selectors. A typical Descendant selector has two elements, the second element being a descendant of the first one.
Inserting the following codes to the style sheet would show that the links contained in the unordered lists are not underlined while other links are still underlined:
li a {
text-decoration: none;
}
Styling an element which is a directed descendant of its parent element is done by declaring a Child selector, which is a right-angled bracket (>) between two type selectors:
p > strong {
text-decoration:line-through;
}
With this example added to the CSS declaration, notice that only the first <strong> element gets line-through (the one colored red). This is because it is a direct descendant of the <p> tag.
The Universal selector, denoted by an asterisk (*), affects all elements in your HTML document. Here is an example, setting the font to Verdana:
* {
font-family: Verdana, Arial, sans-serif;
}
Adjacent siblings describe the relationship of two elements that are placed side-by-side within the flow of a page’s markup. An adjacent sibling can be seen by the plus sign between elements as shown here:
li + li {
font-size: 200%;
}
Observe that only the second and third list item are styled since the second and third list item are placed side-by-side with another list item. Not all modern browsers support this selector.
Attribute selectors have ways to find an element that has a matching attribute. Not all modern browsers support this selector. Take a look at examples of each option:
[attribute] - Search for matches based on the attribute.
a[href] {
text-decoration: none;
}
The link won’t be underlined, if the href attribute appears in an anchor element.
[attribute=val] - Search for matches based on the value.
a[href=”www.tinysigns.com”] {
text-decoration: none;
}
The link won’t be underlined, if a link that points to www.tinysigns.com appears in the HTML.
[attribute~=val] - Search for matches that contain the space-separated attribute somewhere in the value.
a[title~=”tiny”] {
text-decoration: none;
}
The link won’t be underlined, whenever “tiny” appears in the title attribute of an anchor title.
[attribute|=val] - Search for matches that contain the attribute with a hyphen.
a[href|=”tiny”] {
text-decoration: none;
}
The link won’t be underlined, whenever “tiny-” appears in the title attribute of an anchor element.
There are also available styles to an item that are not based on element’s name, attributes or contents, they are called pseudo-classes. Here are some examples:
a:link {
color: #0000FF;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF0000;
}
a:active {
color: #CCCCCC;
}
In this setup, a basic link (one that has not yet been visited) appears in blue. While the mouse pointer hovers over the link, it changes to red, while holding the left mouse button over the link, it turns gray and after visiting, the link is green.
When to use ID and Class selectors
Since these are the most used selectors, it is important to know when it should be used in your HTML document. When you need to apply a style repeatedly within a HTML document, use class selectors and ID selectors should be used on one-time appearances of a style within a HTML document since it is used to identify unique attributes that have one instance.
