CSS 102 - Basics on Selectors

Featuring: CSS-Cascading Style Sheets - More Basic Text styling and Targeting
Motivation: How to target when/where CSS will be applied- Selectors are the key

As we have seen in our intro CSS tutorial, Cascading stylesheets provide web developers with powerful ways to format and style their pages. But even more important, web developers are given better means to change their minds and modify their stylings as a website matures overtime. Why better ? Because the stylesheets are separate from the HTML tags which provide web page structuring. So CSS simplifies the original HTML, often substantially by ridding the HTML of bloated formating options. But also by having the stylesheets in one .css file, it is easier to do 2 things:

1)make a styling change because often only one style rule in one .css file can change dozens of HTML tags and stylings spread over dozens of files. This is hardcore efficiency;
2)re-using a particular styling is much easier as the developer does not have to search through dozens of files; and can often make simple changes or add a new style based on changes to a copy of an existing style.

So the question becomes when and how to use CSS styles most effectively.

The Art of Targeting

In this tutorial we shall see how to use and target CSS stylesheets so they apply to specific text , images, or containers. But if you have been applying stylings primarily through HTML tags like font= or b=, it is hard and inefficient to remove all HTML styling tags or what I call single property stylings . And so I only do so using CSS HTML tag stylings. However, whenever I see two or more styling properties being applied to a single object- then I immediately target that as a candidate for conversion to a class= style rule.

I discuss in detail both methods below.

For example, I was using underlines with bolding fairly often in reviews. That usage of two styling properties immediate became the following class= style rule:
.underbold { text-decoration: underline; font-weight: bolder;}

Now whenever I need to apply an underbold styling, say to a span of words I add the following CSS code to the tag: <span class="underbold"> (note no dot '.' proceeds underbold in the class= option). The other frequent need is to supply a CSS style for a specific HTML tag. For example I like to have <h6> always be large bold green text with underline - so it is easy to assign a CSS styling rule to the <h6> tag:
<h6> { color: green; font-weight: bolder; font-size: 18px;}

What this CSS rule means is that whenever the <h6> tag is used it will have a left margin of 20 pixels, it will be bolded and the font-size will be 18pixels. All the other default or previous properties for <h6> (say for font-size or padding)are retained and added to make the new set of styling properties for the <h6> tag.

Note we have used .underbold above to style its own description. In fact you can target the same CSS styles with several different Selectors. And that is what is illustrated next. I will use 4 of the more common ways in which Selectors can be applied to HTML. This will provide an overview of "targeting". As we shall see, targeting can be used to get the Descriptor part of a style applied to very specific HTML. Now here are 4 major selectors:
1)The wildcard selector, * , means that the CSS style applies to every HTML tag. Say you want to establish a uniform font across all the pages on your site. Then the following rule when placed in a sitewide .css, will do it:
* { font-family: Arial;}
However, use the wildcard selector with great care - unbridled use can have unintended consequences.
2) HTML tag selector - each HTML tag can have a specific CSS style assigned to it - the example above set the <h6> tag. Many developers use this as a way to set their own styles on various HTML tags and put the rules in their external website-wide .css file. Now its is important to remember that whenever that HTML tag is used; this new assigned style will be used unless overidden by a more specific styling rule. I have already shown how I customize <h6> in my osstyle.css file for this website. In addition for snippets of programming I have changed the<code> tag as follows:
<code> { padding: 4px 8px; display: block; background-color:gray; color: white; border-color: black; border-style: solid; border-width: 2px; font-size: 12pt; margin: 5px 10px;} and then put this tag around any snippets of code as above. For page or sitewide CSS styling, HTML tag Selectors are quite common and very useful. And CSS provides several additional Selector variations for targeting styles to various combinations of HTML Tags which we cover in our next tutorial.

Note two things. First, <code> and <h6> retain all their inherent stylings except the ones specified in the CSS style rule. For example,

<h6>has default margin settings which are retained and used along with the new tag stylings such as the green text, bold and larger font size.

Second now whenever I use the <h6> tag on a web page which uses the osstyle.css file, it will always result in green bold large text. But you can redefine the styles for any HTML tag by adding a style= option when the tag is used. This in fact is the next example, targetting for one specific tag usage.

3)Using the style= option in any HTML tag. This allows the styling to be applied directly to a specfic point on the Web page and not be associated with a particular HTML tag. In this case, we use a <span> tag and use the underbold styling properties; however it could be just about any HTML tag. So, <span style="text-decoration: underline; font-weight: bolder;"> That was easy enough to do</span>   - then produces the following styling:
That was easy enough to do
Note here that <span> does the equivalent of the .underbold . But there is a danger here with the the style= approach to CSS styling. I have seen Web pages with just as many style= options as there were old <font> tags. This is one of the situations CSS is designed to fix. So lets try a third method, creating your own style class. This will allow Web designers to shorten the reference to class="thisStyle" like statement as shown immediately below.

4)create your own style class in the<style>..</style> section or your own mystyles.css file like so:
.underbold {text-decoration: underline; font-weight: bolder;}   - apply it with <p>, <div>, <span> or any other HTML tag that allows the class= option(most do):
<h7 class="underbold">That was easy enough to do</h7>   - which results in:
That was easy enough to do
Notice that a period "." has to be put in front of underbold when defining the class in the <style>..</style> section or your own class file. However, when using the style in a class= option (as in the <h7> tag just above), now the period is not required and must not be used. But also notice the power of defining your own style class. Now you can add underbolding to just about any HTML tag - say <em> as we have just done here. So creating your own set of style classes is one of web developers major styling tasks and opportunities.

Now remember, this is just 4 of what are dozens of ways that that the .underbold or .greenlite or .whateverYourFavoriteStyleIs can be applied or targetted on a Web page. So as you shall see throughout these tutorials, learning how targeting works through CSS Selectors is as important as mastering all the different styling Descriptors.

A Second Look at Style=

The statement below uses a style= CSS style - a supposed no-no. Lets reconsider.

<p style=" border: solid darkred 4px; color: green; font-weight:bolder; font-style: italic;">

In this and the last tutorial I have been pretty harsh on using the style= option way of applying CSS in HTML tags as seen just above. I say it clutters up your HTML file, causing the same confusion as those huge font="..." monsters. However, there are two arguments in favor of style= .

First, how many times are you going to reuse "border: solid darkred 4px; ... " . Exactly. Likely never, so why not keep the style statement right next to the text it is modifying. Second, these inline style rules can cascade because CSS directives cascade down. Thus, the latest inline "style=" directive taking precedence over a document style. So in my osstyles.css file I have the statement:
body, p, table, td, tr {
    background-color:#CCCCCC;
    font-family: Georgia, Times, serif;
    font-size: 12pt; color:#333366;
}

So for me, the <p> tag has already been defined. However, by using the style= option in the <p> clause above, that styling is overridden and a new style applied. In effect, style= allows me to apply a specific, targeted style very effectively and override parts or all of my general stylings. In this case I have added a light orange background-color to this paragraph. So cascading style= rules similar to this one are, like targeting through Selectors, the essential secret to applying CSS successfully.

Now I took a course at a forever-shall-it-be-nameless university where the professor taught us with big points off in exams never to use the style= option. So be aware, though CSS styling should be a matter of efficiency and effectiveness and less about the style of styling - CSS, alas like religion, has its culture wars.

Summary

We have just sampled some of the essentials rules of Selector usage as a way of targeting or applying stylings to specific text or portions of a page. There is more, much more, to targeting than we have covered here as we shall see in upcoming tutorials. Also we got a quick intro into the the nature of Cascading CSS rules. For readers interested in exploring these topics further, let me recommend two excellent texts on CSS.CSS in Easy Steps by Mike McGrathcover these topics and more on pages 15-32 in a short but very well illustrated book on CSS. CSS: The Definitive Guide 3d Edition by Eric Meyer covers these topics on pages 23-61.