You have an e-commerce website offering bottled drinking water in Las Vegas. You want to emphasize the words Las Vegas drinking water a number of times in the content on its main page as well as any other pages on the site. You can vary the key words, bottled drinking water by adding other descriptives beside Las Vegas. In addition, on all information pages such as Our Bottled water, Water Wisdom, Filtration, or Tahoe Reviews where bottled drinking water is mentioned you also want a link to the categories and products page where there are all the various types of bottled drinking water offered by the site. You can accomplish your goals with a CSS statement.

CSS can be ‘called’ in several ways, from within whatever markup language you happen to be using (that’s what we feel compelled to say…even though it will be HTML 99.99% of the time).

In-line CSS is written right along with the HTML code using the “style” attribute:

<p style=”color:blue”>Everything in this paragraph is blue!</p>

However, that often defeats most of the advantages of CSS. A more useful method would be to embed the style under the HTML “head” tag, so that it covers the entire page:
<style type=”text/css”>
p {color:blue}

This will ensure that every paragraph on the page shows up in blue. Nice shortcut, but there’s an even better method: externally, using a CSS file.

If you save your CSS statements to a file with the extension “.css”, you may call it using the HTML link tag:

<link rel=”stylesheet” type=”text/css” href=”example.css” />

In this case, our CSS information is self-contained in the “example.css” file, which may be used for any number of pages or projects…and updated independently, resulting in automatic changes to all the pages that link to it!

As you can see, CSS is quite easy to understand and recognize. A typical CSS statement, such as those above, consist of the “selector” (frequently the HTML element that is being defined or changed) and the “declarations” (the changes themselves). Each selector consists of a property and a value.

So, a basic CSS statement that looks like this:

p {color:red}

is not radically different from the same statement in HTML:

<p color=”red” >

However (and this is a big however), with CSS (embedded or external) you could replace the HTML statement with simply “<p>” and the CSS would be applied without any further work. Every time.

Instead of a page bristling with markup and content, you now have a streamlined page with minimal markup that can be changed at a moment’s notice simply by updating the CSS.

And that is just the beginning…

In the second part of the introduction to CSS, we showed you a basic CSS statement (a declaration set including a property and its respective value).

p {color:red}

There may be multiple declarations applied to one selector:

p {color:red; font size:large}

As long as you put curly brackets on either side, you may include nearly any number of declarations under a single selector (but, of course, there are really only so many that will apply to any given statement).

The selector itself can be any HTML element, but it can also be a class. Classes are declared using the period (or full stop) with or without a respective element:

.example {color:blue; font size:small}

…this creates the “example” class, which may be then used by any element:

Leave a Reply

Your email address will not be published. Required fields are marked *