with Lorelle and Brent VanFossen

Understanding CSS Selectors and Attributes

Word Games – Understanding the CSS Jargon

Understanding how CSS and HTML work together is not easy. The idea that it takes two pieces to fit together to make a web page display is a challenge. We’ve broken down the concept into simple terms and definitions, as well as simple examples to help you understand how CSS influences HTML and how they work together, and how to start to create your own web page designs. We begin with terminology and then simple application, developing into an understanding that while tables no longer shape and form web pages, the containers created with HTML and CSS not only shape but provide a new form of control over the end result.

If you are considering exploring our CSS experiments, or doing any of your own web page design, then take time to understand how CSS selectors and attributes work.

At the core of cascading style sheets are rules. The simplest kind of rule looks like this:

H1 {
color: green }

Each rule consists of a selector and a declaration such as selector {
property: value}
. In the example above, H1 is the selector. It’s the HTML tag that the style is being attached to. The declaration defines what the style actually is, and it also consists of two parts: the property (in this case, color) and the value (green). The above rule tells the web browser that all text surrounded by <H1> and the closing tag </H1> should be displayed in green.

Graphic representation of a CSS rule, declaration block and declaration, graphic by Lorelle VanFossen

Any HTML tag can be used as a selector. Thus, you can attach style sheet information to any kind of element, from normal <P>; text to <TABLE>. They are attached to HTML tags and define divisions of style in the form of classes ( <p class="green">), divisions ( <div class="green"> or <div id="menu">), and spans ( <span class="green">). Check out the above tutorials and resources below for more details explanations and information and see our article on tips and tricks from our web page design, specifically our section on the differences and similarities of divisions and classes, and CSS fun, tips and tricks. If you are ready for the “big time” in CSS design, check out our extensive CSS design examples and experiments, putting CSS designs to the test.

CSS From the Source – The World Wide Web Consortium

The Differences and Similarities
Between DIV, CLASS and SPAN

While sometimes interchangeable, divisions and classes are different and they need to be used properly. Many amateur web page designers stick only to classes to modify the HTML, thinking this is easier. It actually makes things more complicated. Let’s see if we can clear up the similarities and differences between divisions and classes and figure out when and when not to use them.

Divisions, classes and spans are similar because they modify the content. All can influence tags. All are containers, influencing every tag within their container. The differences are more important and influence the design and layout of a web page.

A div represents a division in the structure of the web page called a generic block-level element, which means that it sits within its own line or block container. There are two kinds of div selectors. One is used just as a division, which sets up a block of content, and the other is a division that sets up a block of content modified by the design elements within an ID or class rule.

A plain div would look like this:

<div>This is content within a division. </div>

A div influenced by an ID, a unique, non-repeating name, would have the characteristics of the division selector as specified within the style sheet and identified with a hash or pound sign (#), such as:

#header {
position: relative; color:blue; background: white; font-size: 120%}
<div id=”header”>This is the header</div>

A div influenced by a class, a repeating non-unique name, would have the characteristics of the class selector, designated with a period before the name ( .red):

.red {
color:red; background:transparent}
<div class=”red”>This would be a division with red text.</div>

SPAN is also a container, but while div sits within its own line or section, a span is an inline container. This means that it influences the content within its container in relationship to the division or container it sits within. It can’t influence the parent container. Spans can be set by the declarations (design elements) of its div or class. We use span in our blue box to influence the text within the box elements in relationship to the container they are in. For example:

.red {
color:red; background:transparent}

span.blue {
color:blue; background:transparent}
<div class=”red”>This would be a division with a <span>blue text span</span> inline with the red text.</div>
This would be a division with a blue text span inline with the red text.

A class is more of a description code. It can be an inline container or set to be a block ( display:block) or modified in many different ways. It “describes” the presentation characteristics. It is a code that links to the presentation style selector within the style sheet and influences any HTML or division tag. Unlike an ID tag, a class can be used over and over again on the same page.

We’ve shown how the class works in the examples above, but let’s look at one more using all the elements we’ve discussed.

#section {
position: relative; color:blue; background: yellow; width:50%; border: 1px #000099 solid; font-size: 110%}

.red {
color:red; background:transparent}

.darkgreen {
color:#006600; background:transparent}
<div id=”section”>This is text within the division with blue type and a yellow background.
<p class=”darkgreen”>This is a paragraph within the division with dark green text and a span influenced by a class which turns <span class=”red”>this section of red text </span> before returning to blue.</p>
And more text which should be in blue.</div>
This is text within the division with blue type and a yellow background.

This is a paragraph within the division with dark green text and a span influenced by a class which turns this section of red text before returning to green.

And more text which should be in blue.

Classes modify content the same way as a div ID, but classes shouldn’t be associated with the overall layout structure. Their job is to change the smaller elements.

Classes, spans, and divisions can be used in combination. The containers used for pull-quotes and highlighting tips and resources within our articles are set within layers of divisions modified by classes. These containers are not unique to the page and are often repeated on a single page. Using classes allows these containers to be repeated. In the hierarchy of CSS, the span modifies the class which modifies the division, creating a child/parent relationship. The closer a modifier is to the content, the more control the modifier has to overwrite the parent characteristics.

<div class=”boxtip”>
<div class=”tiptitle”><span>Tip Box Title </span>
</div>
<div class=”tipbody”>Tip body content here…

These boxes are divisions within the page, but they are not unique to the page. I might have two or three tip boxes within a page, so the class rule allows me more than one division container.

Understanding the ID Even More

Each div has a unique name and characteristics set up in the style sheet, called an ID, and it can only be used once per page. Divisions usually represent the layout structure such as header, sidebar, container, footer, and content. The areas they represent tend to be large rather than small lines or elements.

Divisions representing the layout of the page help the designer when they make future modifications. Suppose you want to change the font in the sidebar sections on all of your pages from Arial to Times Roman. Having all of your sidebar content in the sidebar division, a simple change to the font-family selector would modify the sidebar on every page linked to that style sheet. Simple and easy.

But ID names are not limited to divisions such as div and a division is not limited to only div selectors. Any selector that acts works as a block container is a division. These include <h1>, <h2>, <p>, <table>, and <ul>. A div is a generic block element. An HTML tag is a division that is a specific block element. All of these can be assigned a unique ID name.

Take time to seriously peruse the many web page examples at CSS Zen Garden. If you look at the HTML on every page, it is exactly the same. Word for word, division by division. The only thing that changes is its style sheet, which they provide for examination on every page. In order to create this amazing feat, each element within the HTML is designated with an ID name, such as:

<div id=”head1″>
<h1 id=”header”>This is Header Under Head1 </h1>
<p id=”p1″>This is paragraph one and it says something. </p>
<p id=”p2″>This is paragraph two and it says something else. </p>
</div>
<div id=”head2″>
<h2 id=”header”>This is Header Under Head2 </h2>
<p id=”p1″>This is paragraph one under head2 and it says something else more. </p>
</div>

This way the designers, using the same HTML structure and content, can create such diverse and creative designs because each section is clearly identified. You can also see some of this at work in our other CSS experiments and pages on web design and layouts.

There is another powerful feature to the ID name. As it is unique, only one ID name per page, it can also represent a target point or anchor to link to. We discuss the hierarchy of various links later, but in a jump-with-a-page anchor, the traditional link looks like this:

<a href=”#here”>Jump to section </a>

Landing on the target anchor which looks like this:

<h3><a name=”here”>Heading Here</a></h3>

With an ID name in the jump or target points, the visitor can click on the same link as above but it will take them to the unique ID name target reference like this:

<h3 id=”here”>Heading Here</h3>

This is another method to help streamline the code and makes the process more efficient. Since division IDs are unique, and classes and spans aren’t, this is only possible with div IDs.

The unique ID element for a division has limits. You can’t give two IDs to one division. But you can give multiple classes to a tag or division to influence its change, as you can read about in the next section on Combining Classes.

Just remember to use divisions for structure and classes for presentation elements, and it will help simplify your design.

Names for Classes and Divisions

A division ( div) must be unique within a web page, though it can be used repeatedly throughout a Website, such as #content found on every page with a consistent look reflected in the style sheet. The names for the various divisions which create the basic layout for a page are usually recognizable names: container, header, sidebar, content, column1, column2, footer, etc. Sometimes these are abbreviated to cont1, head, side, col1, col2, foot, etc. Divisions within the content usually reflect the information within the division such as intro, ads, list, info, definitions, etc.

Classes are also reflective of what they do. For example, a class called “red” would probably turn the content in the tag modified to the color red. It really doesn’t matter what they are called as long as they are consistent and clear to the designer. There are no rules regarding name choices in CSS.

There are, however, rules about how the names should be formated. The names of divisions and classes can be a combination of letters or numbers, but they must start with a letter. Acceptable is <div id="w43564"> but <id="43564w"> is unacceptable. The words or phrases may have a hypen between them, such as white-text, but they cannot have spaces in between the words. The following are some elements that division and class names cannot have, usually because they are assigned elsewhere: &, \, /, @, *, {
, }
, [, ], +, =,
and %.

DIV, ID, CLASS, and SPAN – Links and Resources

CSS Shorthand: Combining Classes

You probably noticed a technique within these pages, especially in our CSS experiments, called “combining classes”. Generally, if you wanted to assign two class selectors to a tag, you might write:

<p class=”bold” class=”small”>This is bold and small</p>

When modifying a tag or element with more than one class, you can use them in combination. The above code should read:

<p class=”bold small”>This is bold and small</p>

If I want the paragraph to be bold, small, and green, it would look like this:

<p class=”bold small green”>This is bold and small and green</p>

CSS Shorthand: Combining Declarations

The speed of a web page loading is dependent upon many factors, most importantly the size of the file. Anything that can be done to make the file size smaller speeds up the process.

One technique in CSS is to condense the code, combining similar codes together. For example:

h1 {
margin:0; font-weight:bold; font-size:130%; color:blue; padding-left:5px; padding-top:10px}

h2 {
margin:0; font-weight:bold; font-size:120%; color:navy; padding-left:5px}

h4 {
margin:0; font-weight:bold; font-size:105%; font-style:italic; color:blue; padding-top:1.5em}

CSS has a feature which permits grouping selectors together and giving them a shared declaration. Selectors are grouped on one line with commas to separate them.

h1, h2, h4 {
font-weight:bold}

h1, h4 {
color:blue}

h1, h2 {
padding-left:5px}

h1, h2, h4 {
margin:0}

h1 {
font-size:130%;padding-top:10px}

h4 {
padding-top:1.5em;font-size:105%;font-style:italic}

h2 {
font-size:120%;color:navy}

CSS Shorthand: Combining Measurements –
Margins, Padding, Borders, and More

There are also shortcuts and ways of combining measurements in declarations that will shrink down a web page’s file size, and make it easier to write the code.

Measurements for margins and padding, follow the clock in clock-wide positions: top, right, bottom, left. So a measurement for a division or class could be:

.box {
margin-top: 1em; margin-right: 1.5em; margin-bottom: .5em; margin-left: 1.25em}

Consolidate all of that into this CSS shortcut and abbreviate it to:

.box {
margin: 1em 1.5em .5em 1.25em}

Much shorter and faster to work with. There are other modifications you can do when the magins values are repeated, such as the above with the same top and bottom margins of .5em and left and right margins of 1em would be:

.box {
margin: .5em 1em}

You can also streamline your border codes. Here is a border CSS code for a box:

.box {
border-top: 1px; border-right: 2px; border-bottom: 1.5px; border-left: 2.5px; border-color: blue; border-style: solid}

This can all be consolidated down to the CSS shortcut of:

.box {
border-width: 1px 2px 1.5px 2.5px; border: blue solid}

This makes a very unusually shapped box, but for a normal box in which all sides are equal:

.box {
border: 1px blue solid}

For more information on optimizing your HTML and CSS code for faster page loading, see our article series on Website Validation and Optimizing Your Web Pages.

Combining Classes and Declarations – Optimizing – Links and Resources

One Comment

  • WordPress › Error

    There has been a critical error on this website.

    Learn more about troubleshooting WordPress.