with Lorelle and Brent VanFossen

CSS – The Things You Need To Know

While there is a lot of information about code styles and design layouts out on the web and throughout our CSS experiments and examples, some of the smallest details can be difficult to find. One of the little bits I needed to know was about how to layout a style sheet. Where do the spaces go? Does there need to be spaces between the codes? Does each rule need to be on its own line? And how to structure the rules, selectors, and declarations? When do I use colons and when do I use semi-colons? When do I use quote marks in CSS? Is there a reason and rhyme to naming DIVs and classes?

While HTML isn’t very forgiving when it comes to a slip of the finger or a space in a tag, CSS is a bit more forgiving. Here are a few things we learned along the way, especially while working on our CSS experiments.

Rules and Lines

There are several ways of laying out the style sheet rules and declarations. CSS ignores spaces between lines and how the rules are laid out as long as they stay within the contraints (brackets). Here are some layout forms that are all acceptable, though the ones with more spaces between lines and rules enlarge the file size, something you want to avoid.

This style keeps the whole rule on one line:

.title {
font-weight:bold; font-size:90%; text-align:center}

.heading {
color:navy; font-weight:bold; font-size:110%; padding: 0 0 5px 8px}

This style sets each declaration in the declaration block on one line:

.title {
font-weight:bold;
font-size:90%;
text-align:center}

.heading {
color:navy;
font-weight:bold;
font-size:110%;
padding: 0 0 5px 8px}

This style sets each declaration on one line and indents them for a cleaner and easier to read look:

.title {
font-weight:bold;
font-size:90%;
text-align:center}

.heading {
color:navy;
font-weight:bold;
font-size:110%;
padding: 0 0 5px 8px}

This style double spaces each declaration (or you can add space between each rule for easy reading of the layout):

.title {
font-weight:bold;

font-size:90%;

text-align:center}

.heading {
color:navy;

font-weight:bold;

font-size:110%;

padding: 0 0 5px 8px}

Remember, the more tabs and empty lines you add to your CSS file, the bigger it becomes. A fast loading web page begins with small file sizes on everything, including the style sheet, HTML, and the graphics and images.

Spaces in CSS

Spaces are another thing that can save space in your CSS sheet. That’s right. You can save space by removing space. While spaces are needed ocassionally, double spacing between lines and spaces between declarations can go. For example:

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

Would become like this with all the spaces removed, freeing up 11 bytes – it all adds up:

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

Using the shorthand method discussed in the next section on Combining Measurements, you can further condense the font declaration block down from 91 to 61 characters (bytes) like this. Notice the spaces kept between the font declarations. These spaces stay.

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

Quote Marks

In the early days of CSS, quote marks were okay around the values of the declarations. Today, quote marks are unnecessary and they consume a lot of file space. Text surrounded by quote marks is a “string” and has different properties. Here is an example with quotes – deemed unacceptable code today:

#content {
position: “relative”; display: “block”; width: “90%”; color: “blue”}

It should look like this to comply with web standards today:

#content {
position: relative; display: block; width: 90%; color: blue}

There are exceptions to the quote marks policy. When designating a phrase which includes a space (called a “string”), such as in the font-family name for Times Roman, the phrase must be surrounded with quote marks such as:

font-family: Arial, Helvetica, “Times Roman”, sans-serif

Any references to URLs like a linked image within a style sheet used to require quote marks such as:

#header {
margin-left: 50px; background-image: url(“images/back.gif”) repeat; background: green}

Remember, HTML and CSS is fluid, changing and evolving. With the CSS-2 Revisions and the coming of CSS-3, quotes around URLs might not be required. No quotes on URLs are currently acceptable depending upon your document type. XHTML and XML are becoming stricter about the use of quotes.

#header {
margin-left: 50px; background-image: url(images/back.gif) repeat; background: green}

In HTML tags, quote marks are required for XHTML compliance to be around class and ID names.

<h2 id=”level1″>Title for <span class=”level1a”>Level One</span></h2>

Pounds, Periods, Commas, Colons, and Semi Colons

Knowing when to use the pound (crosshatch), comma, colon, and semi-colon when layout out CSS rules can get confusing at first. Here are some simple definitions for when to use which:

Pound Sign(#)
The # is used to define a division within the style sheet. Everything within that division will be modified by the declarations within the division. It is set as div#name or simply #name.

#content {
position: relative; display: block; width: 90%}

or
div#name {
position: relative; display: block; width: 90%}
Periods (.)
A period before a word designates that word as a class. Tags featuring that class are modified by the class declarations. These can also be used in combination with tags and divisions, thereby modifiying only the elements within those tags or divisions and not elsewhere.

.blue {
color: blue}

#intro.blue {
color: blue}

p .blue {
color: blue}

.blue p {
color: blue}

Commas (,)
Commas are used to distinguish different selectors or declaration values within a rule. For instance, when declaring a font-family, several fonts can be listed such as font-family: Arial, Helvetica, "Times Roman", sans-serif. When combining declarations to shrink the file size of the style sheet, multiple selectors which use the same common declaration can be grouped, separated by commons, in a line before the declaration.

p , dl , dd , li {
font-weight:normal}

#intro , .section1 , #header.p1 {
color:green}

Colons (:)
Colons are used to separate the property from its value such as:

p {
font-weight :normal}

p {
font-family : Arial, Helvetica, “Times Roman”, sans-serif}

Semi-Colons (;)
Semi-colons are used to separate declarations within the declaration block. The last code in a declaration block does not have to have a semi-colon before the end-bracket. An example is:

#content {
position: relative ; display: block ; width : 90%; color : blue}

Comments in HTML and CSS

Comments are non-publishing content in a style sheet or HTML that permit the designer to insert text to set layout clues and to provide information to help the desiger or viewer of the code. For example, comments can be used to designate that the following space is where a new article should be pasted into an HTML template web page, the following comment would be made:

<!–ENTER Article Here –>

and followed by:

<!–END Article Here –>

A comment in a style sheet to help the designer group elements together or give information about a style would look like:

/* Sidebar Elements Here */

Comments can be added after a rule and within a rule such as:

h1 {
color: red;
font-size: 120% }
/* About 18 pt equivalent */

.bluesmall {
color: blue; /* Colors it all blue */
font-transform: uppercase; /* Forces uppercase */
}

A space after and before the — in the HTML comment, and space after the /* and before the */ in the CSS comment, are required for recognition of the material inside the comment to be separate from the content. Remember comments add to the file size so when you are optimizing your HTML and CSS, keep comments to a minimum.

Links: CSS From the Source – The World Wide Web Consortium

Hierarchy in CSS

There is a lot of information at the W3.org about the hierarchy and inheritance of HTML and CSS, but here is a tip that should help you remember. The closer the tag, division, or class to the actual content you want to modify, the more likely that modifier will change the content. The general order is HMTL, CSS, tag, div, then class, but this is not strict. Just remember, the closer it is, the more influence.

<div id=”#chapter”>
<h1>Chapter One</h1>
<p>This would be a paragraph set by the paragraph design elements under the division.</p>
<p class=”para1″>This is paragraph one class style with an
<span class=”para1span”>example of a span with a
<b>bold</b> tag</span>
which modifies the span which modifies the paragraph.</p>
</div>

Simply put, in the above hierarchy example, the division ID called chapter included how the H1 tag would look and how the paragraphs would look. Enter class="para1" and the new class statement overwrites the paragraph look for paragraphs under the chapter division. Then a span comes in and changes the look of para1 and then a bold tag adds an accent of bold, modifying the span, and then slowly the modification elements close and the paragraph returns to its original intent.

This is just a glimpse into the hierarchy of CSS. The list of links below will help you understand better the parent/child relationship CSS and HTML have to each other as you design your layout.

CSS hierarchy and Inheritance – Links and Resources

Hierarchy in Website File Locations

There is a hierarchy within your Website directory, too. This one involves the way hyperlinks (links) work within your web pages, between your web pages, and between your Website folders or directories.

Hyperlinks (links) within a document consist of external links, internal links, and named anchors (jump within a page). There are two types of links: absolute and relative. An absolute link to an image or another page would be similar to a strict web page address:

<a title=”article on web page validaton” href=” http://www.cameraontheroad.com/ learn/web/validate.html“>validating your web page</a>

Clicking the link would take you, literally, out of the site and back into it, reloading the page rather than just looking for the page on your site.

The relative method uses a feature that permits the link to move within the frame of the site relative to the page.

<a title=”article on web page validaton” href=” ../validate.html“>validating your web page</a>

This would send the browser looking one folder up the site’s hierarchy to find the page. To send the browser looking two folders up the site’s hierarchy to find the page, it would look like this:

<a title=”article on web page validaton” href=” ../../validate.html“>validating your web page</a>

The following sends the browser looking down from the current page’s position within the site’s hierarchy to the learn folder and then down again to the web subfolder to find the appropriate page.

<a title=”article on web page validaton” href=” learn/web/validate.html“>validating your web page</a>

There are pros and cons to using either method. The main benefit of using the relative method is the use of less characters in the anchor reference. If file size is important to optimize your pages to their fastest loading, this is one way to cut out a few bytes.

Anchor names, links which jump within a page rather than leaving the page, can also be absolute or relative, though most are considered relative. An absolute anchor name would be:

<a title=”jump to section” href=” page.html#here“>jump to here</a> and the anchor would be <a name=”here”>here </a>.

The above link would reload the page and move to the anchor name. A relative anchor name link would be:

<a title=”jump to section” href=” #here“>jump to here</a> and the anchor would be <a name=”here”>here </a>.

This link would jump within the page without reloading it. Reloading a page, and all its attached files and graphics, takes time. Jumping within a page without reloading it is a very quick process for the user.

Remember division ID names also act as targets so the links to an ID name of “thisone” would look like this:

<div id=”thisone”>This is This One</div>

<a title=”information on this one” href=” http://www.here.com/pageone.html#thisone“>link to thisone</a>

<a title=”information on this one” href=” pageone.html#thisone“>link to thisone</a>

<a title=”information on this one” href=” #thisone“>link to thisone</a>

If at any time in its search it can’t find the page, it will return a “page not found” or Page Error 404, so take care when assigning links to pages and images to make sure they are actually where you think they are.

Link Hierarchy Within the Style Sheet

Our Website features over 500 articles within 14 folders and numerous subfolders. Our Learning Zone hosts 11 different subfolders related to our various educational subjects like basic nature photography, closeup nature photography, composition, equipment, and weather. Yet, we only use one main style sheet for the entire Website.

The links within the style sheet to the various graphic effects, such as backgrounds or embedded fonts, are called out from the style sheet and not the page in which you are viewing the content. When you view a web page, it loads the linked style sheet, and then the elements within the style sheet are loaded. Therefore, for the background image associated with our H3 header, I can use one URL reference and it will show up on every page, no matter how deep that page might be within the hierarchy of the site. Instead of providing a relative link from every page on the site to the reused graphic, the CSS style sheet does the work for me, such as:

#header {
display:block; background: url(“images/core/takelogo.jpg”) no-repeat left bottom fixed}

Our style sheet can be found in a folder called styles and the core images for our site are found in the images/core folder. Therefore, using relative anchors, the link to the background image tells the browser to go up one folder then down two subfolders to find the graphic.

Internal and External Hyperlinks (Links) – Links and Resources

CSS Style Sheet Blues: Clean House

After playing with your style sheet and filling it with wonderful design elements, and after you’ve been living with it for a month or so, having passed all the tests, it’s time to clean house.

Go through the CSS style sheet and really look closely at everything you have in there. Ah, that funky box with the neato colored background and borders. Ended up not using it, right? Toss it. Or the BIG font that reaches over 200% high. You really didn’t need that, did you? Throw that away. Look for the clunky CSS that you thought was a bright idea but never used it. Junk it.

Also take time to really streamline and optimize your style sheet. Strip it of excess spaces and lines. Group similar declarations together to save space. Look for redundancies, too. While you combined and grouped similar declarations together, did you leave any laying around in the original selectors? Look closely and see how many ways you can clean up your style sheet house so it is a thing of sleek beauty.

Valdilate and Check, Check, Check

As you are making changes, even little changes, validate your CSS and HTML codes frequently. Check them thoroughly. Even a year later, I’m still finding little bits of code I can clean up and improve, or code I simply left out somehow. It is a never ending process that is not locked in stone. Feel free to change and adjust your coding, but always check it thoroughly as you go so you can catch the little boo-boos and not be stuck searching through reams of code after two days of changes for the one little boo-boo you missed. Check as you go.

8 Comments

  • Posted August 2, 2006 at 6:23 | Permalink

    Too much to read at once.. really nice to have such pages in the favourites.
    regards.
    Anand

  • Posted November 3, 2006 at 13:10 | Permalink

    It looks ok, but the shadow would look better if it was a gradient. This script can cause a very powerful effect though.

  • Posted November 29, 2006 at 19:33 | Permalink

    Great, works to me!

  • Posted December 4, 2006 at 0:29 | Permalink

    Great work and useful stuff!

  • Posted December 10, 2006 at 6:04 | Permalink

    Nice links for beginners – thanks!

  • Posted December 14, 2006 at 16:24 | Permalink

    Fine work and useful stuff for beginners – thanks!

  • Posted March 19, 2007 at 6:03 | Permalink

    Great for this document i`m search many days in the world wide web,but now i found this information on your site.

    Thanks for help,thats the answer of all my questions i`v had

    Thanks again

    Timo

  • Posted November 14, 2007 at 9:59 | Permalink

    Works out fine for me too , thanks for sharing this tutorial with us.

4 Trackbacks

Post a Comment

Your email is kept private. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>