CSS Under the surface

If you don’t know what CSS is, what it’s for or how to implement it in a webpage, please read part 1 of this tutorial first.

As discussed in part 1, every CSS style consists of two parts: a selector and a series of properties. The selector defines to which HTML element the style applies, the properties, define the style itself.

Selector types

Element type

There are many types of CSS selectors. We’ve already seen the element type. It looked like this:

h1 {
font-size: 12px;
font-weight: bold;
}

h3, p {
font-size: 10px;
}

The element type of selector is the most common selector. If there are no other style rules applying to the element(s) specified in the selector, this rule applies to all the such elements on the page. If certain rules apply to more than one element, you can add more elements to the selector and separate them with a ‘,’ (comma), as in the example above. Both <h3> and <p> get a font size of 10 pixels.

Class type

However, if you need to apply a certain style to only a group of HTML elements, you can’t use element type selectors, because they apply to all elements specified in the selector. You need to define a class and then identify which HTML tags take the style of that class. This may seem quite complicated, but it will become clear with an example:

.special {
font-size: 120%;
font-family: verdana, arial, sans-serif;
}

The example above defines a class named ‘special’. Like you can see, a class is preceded by a required ‘.’ (dot) and no space is permitted between the dot and the class name. All HTML tags that have the class defined in the class=”” attribute, will take the class’ style properties. If you want the class to have effect on only certain HTML elements with this class defined, you can use a more specific class, like this:

p.special {
font-size: 120%;
font-family: verdana, arial, sans-serif;
}

Here only paragraph tags, <p></p>, with the class special defined in the class=”” attribute will take the style properties.

In the HTML markup, you can define a class in the class=”” attribute like this:

</p><p class="special" >This paragraph is special</p>
<p>This paragraph isn't special</p>
<h1 class="special">This is a header</h1>

In the previous example, there are three HTML tags. The first, a paragraph, takes the style of the ‘special’ class, because it belongs to the ‘special’ class. The second paragraph gets the default layout for a paragraph. The third, the header, also gets the default layout if only elements of a particular type are in the class, like p.special. If this is not the case, and the class is just .special, the header gets the class’ layout.

A HTML element can belong to more than one class. Just specify all the classes in the class=”” attribute, separated by spaces, like this:
<p class="special greaterlayout">This paragraph looks nice</p>

The paragraph in the example above, gets the style of the ‘special’ class, as well as the ‘greaterlayout’ class.

ID type

The ID type selector allows you to affect a single instance of an HTML element. Like the class type selector, the ID type selector requires you to explicitly include the style in the HTML tag. To specify to which element the style applies, use the “#” symbol. The text after that, refers to the ID of the HTML element. IDs of HTML elements must be unique, within a single document! Here’s an example of a style sheet rule that applies to the HTML element with the same ID:

#myseachbox {
font-size: 10px;
}

In your HTML code, you give a certain HTML element an ID with the id=”” attribute like this:
<p id="mysearchbox">Here comes my searchbox</p>

Now, what if you have an HTML element with a class defined and an ID? Well, easy, the class style is applied first, then the ID selector style. Why? Because the ID selector style is more narrow than the class selector style. The more specific the selector style describes the HTML element, the higher the priority is for that style.

(Note: even though IDs must be unique within an HTML document, a lot of browsers don’t force this behavior. This is clearly not in regulation with the CSS specifications. Without the uniqueness of IDs, the ID type selector is the same as the class type selector)

More selector types

The following type selectors are fully or at least partially available in CSS 1, but you most likely need a browser that supports CSS 2 to make use of them! CSS 2 became a W3C recommendation in May 1998.

Pseudo-Element type

The style of a pseudo element cannot be created using HTML tags or attributes. This is why they are ‘pseudo’-elements, pseudo being false. Although they are false, they can be quite useful.

Until the moment of this writing, there are three pseudo-elements present in the CSS specifications:

* first-letter
* first-line
* first-child

The first two pseudo-elements, :first-letter and :first-line, are browser specific. This means that the browser is free to interpret them as he likes. i.e.: :first-line being the first sentence he displays, or the first line, which changes when you resize your browser window. The :first-child pseudo-element is browser independent. It always means the first descendant of the element to which it applies.

Defining pseudo-element selectors is exactly the same as it is for normal element selectors:

p:first-line {
font-size: 150%;
}

This will result in each first line (interpreted by the browser, remember?) of all paragraphs in the HTML document to be displayed 1.5 times larger than the normal font size.

Pseudo-class type

A pseudo-class selector is almost the same as an pseudo-element selector. The only difference is that the pseudo class applies to the whole element, but only under certain circumstances, whereas the pseudo element only applies to a portion of the element, but at all times.

There are six pseudo-classes in the current release of CSS:

* hover
* active
* focus
* link
* visited
* lang()

Both :link and :visited are link pseudo-classes. :link applies to links that have not yet been visited and :visited to the ones that have been visited, obviously. The :hover, :active and :focus are dynamic pseudo-classes. They apply to items that are hovered over, that are currently activated and focused respectively. The :lang() pseudo class is not discussed here, because almost no browser supports it for the moment.

A pseudo class is defined exactly like a pseudo-element, like this:

a:hover {
color: red;
}

Descendant type

In HTML every element is an descendant of an other element (except the <html> element). To apply a style to a descendant element, use the descendant selector. The descendant doesn’t have to be a direct child of the parent element. This type of selector is defined as follows:

li a {
color: green;
}

The style above only applies to <a> elements (anchors) that are descendants of the <li> element. When you have the following HTML code:

<ul>
<li>Item one.</li>
<li>Item <a href="itemtwo.html">two</a>.</li>
</ul>
<p>A paragraph with a <a href="linkinparagraph.html">link</a> in it.</p>

Only the link in the list will get a green color. The link in the paragraph will not, because it’s not descending from a list element.

To give an extreme example of descendant selectors, check this out:

div p li code em {
color: green;
}

Here the emphasized text (text in the <em> tag) becomes green, if it’s a descendant of a <code> tag. But only if that <code></code> tag is a descendant of a <li> tag. The <li></li> tag in its turn has to be a descendant of a paragraph and that paragraph has to be descending of a <div> tag. There can come some elements in between, but this line has to be followed before the text becomes green. OK I admit, this is far-fetched, but it works and it’s legal CSS. (You probably won’t need it and should use an ID selector type or class type instead.)

Parent-child type

The parent-child selector is exactly the same as a descendant-selector, with one limitation. The descending tag must be a direct child of the parent tag specified. Here’s a code example:

div > p {
font-size: 10px;
}

Here the style applies only to paragraphs that are direct descendants of a

tag.

For the moment, IE (up to and including version 6) is the only major browser that doesn’t support parent-child selectors. Because of this, the parent-child selector is often abused to specifically create styles that do not apply to IE.
Grouping selectors together

As you’ve seen, there are quite a few ways to define style. But what if you have an element type selector and a class type selector with the same style? You can make them separate, or group them together. The selector types don’t need to be of the same type to be grouped. Here’s a sample:

h1, h2, h3 {
color: green;
font-family: verdana, arial, sans-serif;
}

h2, p.special {
font-size: 18 px;
}

In the example above, all three headers, h1, h2 and h3 get a green color and the verdana font. Also the h2 header and paragraphs with the ‘special’ class assigned to it, get a font size of 18 pixels applied to them. The space between the comma-separated items is optional, however I think it improved readability a lot.
Do you have a comment?

If you have written in any computer language, you most likely be familiar with a comment. Comment in HTML look like this:
<!-- this is a normal HTML comment -->

Comments are completely ignored by the browser and are only there for the developer’s convenience. But if you’ve ever needed to edit someone else’s code or code you haven’t touched for 5 months? You’ll be happy for those comments you wrote. My advice: they may feel awkward in the beginning, but write them anyway, you’ll thank me later :p

Comments in css are written between /* and */. A comment looks like this then:

body {
color: black;
}
/* You can include a comment about this style rule
even multi-line comments are possible */

A final note

In this part of the tutorial, you’ve seen how you can define style on an element. I have 2 more tips for you.

First of all, play with it, test things out, let yourself go, … This is the best way to learn it.

Secondly, be lazy. If you can write style in three selector instead of four, write three. Juggle around with your rules, finally you end up with a small but fully functional CSS. Don’t be too lazy however, write those comments, if it isn’t possible to do in four selectors, do it in five or more. Don’t limit your outcome because you want a small and clean CSS file. This must be a target, but not the objective.

No Responses to “CSS Under the surface”.

Leave a response