Learning on CSS - Part 1

Learning on CSS - Part 1

Before we actually add a style sheet to a web page, we need to look at how to create the individual styles. First up: selectors.

Selectors

When you want to style a section of content in a web page, you need to figure out how to reference that content. In CSS terms, this is called a selector.

Tag selectors

Any HTML tag can be a selector. Furthermore, you can create custom selectors to suit your own needs. To help clarify how this works, let’s revisit the kitchen renovation analogy from previous post. In that situation, we created two content divisions for the cabinets:

<div id=”upper”>Upper cabinets go here.</div>
<div id=”lower”>Lower cabinets go here.</div>

If we wanted to use CSS to ‘style’ the cabinets, here’s what that might look like:

div#upper {
wood: pine;
color: white;
doors: glass;
}
div#lower{
wood: pine;
color:white;
doors: solid;
}

Or, because several of the style characteristics are the same for both divisions, you set up three content divisions – one for each of the types of cabinets, and then a third to hold both of the cabinet divisions.

<div id=”cabinets”>
  <div id=”upper”>Upper cabinets go here.</div>
  <div id=”lower”>Lowercabinets go here.</div>
</div>

In this case, the CSS would be more efficiently coded with something like this:

div#cabinets {
wood: pine;
color: white;
}
div#upper {
doors: glass;
}
div#lower {
doors: solid;
}

Here, div#cabinets is an example of a CSS selector. The div portion of the selector tells the browser to start by looking for all content contained in div elements. We then get a bit more specific. The hash mark (#) indicates the text that follows is the value of an id attribute. So, div#cabinets tells the browser to look for the particular div element in which the id attribute is cabinets.

If these three content divisions were the only three on the page, we could have left the first selector as simply: div. That would tell the browser to apply the wood and color styles to all div elements on the page, with the second and third lines changing the door styles for the upper and lower cabinets respectively.

Switching from kitchen renovations back to web pages, suppose you wanted to cause all the list items on a page to be colored blue. Can you imagine which select might be used to accomplish this?

li {
color: blue;
}

As you can see, when tags are used as selectors, the brackets are not included. Otherwise, any tag can be used as a selector in a style sheet – for example, paragraphs can be styled with the p tag as a selector, links can be styled with the a tag as a selector, and you can even style all the text on your page by using the body tag as a selector.

Id selectors

After selecting which tag(s) you’ll style, you can get more specific by referencing additional attributes of that tag. You saw how we did this with the cabinet example, but take a look at another example here:

#navigation {
border:1px solid black;
}

Notice we did not include the div tag, but just the contents of the id attribute for that particular content division. Because id attributes must be unique – no more than one instance of that name per page – it is acceptable to just reference the id name (preceded by the required hash mark to indicate this is an id name).

Descendent selectors

What if we wanted to set the font size of all paragraphs contained within the content division named footer? The best way to do this is to use another type of selector: a descendent selector. A descendent selector tells the browser to first look for one tag or content division, but then to only apply the style to a certain tag or content division within the initial selector. For example, the following code would cause all paragraphs inside the element named ‘footer’ to have a font size of 12 points:

#footer p {
font-size: 12pt;
}

A single space is placed between the initial selector and its descendent.

Multiple selectors

When it is necessary to apply a style to multiple content divisions, you can easily combine selectors by separating them with commas. Here’s an example where text in both paragraphs and lists are changed to the Arial font:

p, li {
font-family: arial;
}

Class selectors

Id selectors are essentially custom selectors you create, based on the structure of your page. However, id selectors are unique – they can only be applied to a single content area. What if you want to apply a custom style to multiple content areas on a page? While you could certainly use the multiple selector concept you just learned, there is another option.

The class attribute can be applied in much the same way as the id attribute, in that it can provide a referenceable name to a tag. The big difference is this: the name given in the class attribute can be reused throughout a single page. Consider this example:

<a href=”/index.html” class=”homeLink”>Home</a>

Suppose you wanted to cause all the links to your home page to be a different color to the rest of the links on your site. And what if some of the pages on your site had multiple instances of the home page link (such as a link to Home in the top navigation, as well as in the bottom footer)? You could apply a class to each of those links, then style it accordingly, like this:

.homeLink {
color: red;
}

Id selectors are prefaced by hash marks, but class selectors are preceded by periods. While you can include the tag name before the period, as in a.homeLink, it’s not necessary in this case.

Read Next - Learning on CSS - Part 2