Using CSS Snippets

On websites with CSS as part of technical articles, such as Willmaster.com, you will occasionally encounter a CSS snippet.

A snippet usually is composed of one or more CSS declarations. If it's a property snippet or a value snippet, property and value need to be combined into a declaration before use.

Here is an example declaration (background-color is the property and skyblue is the value).

background-color: skyblue;

Here is a multiple-declarations snippet example:

font-size: 1em;
color: #030303;
background-color: #efefef;

There are two ways to use the snippet, inline or with a style sheet.

Inline CSS

Inline CSS has CSS declarations in a style attribute of the HTML element where it applies to. Example:

<p style="background-color: skyblue;">
Paragraph content
</p>

And here is an example with the multiple-declarations snippet:

<p style="font-size: 1em; color: #030303; background-color: #efefef;">
Paragraph content
</p>

With a Style Sheet

A style sheet begins with <style type="text/css"> and ends with </style> when it is located on the page with the content (usually located in the HEAD area of the source code, but can be anywhere). When the style sheet is a separate page that's pulled in when the page loads, the style tags aren't used.

When the style sheet is on a separate page, it is pulled in with a tag like this in the HEAD area of the web page where it will be applied to.

<link href="http://example.com/mystyle.css" rel="stylesheet" type="text/css">

In the above code, replace http://example.com/mystyle.css with the URL of your external style sheet.

Whether published on the page with the content or in a separate file, the format is identical (except for the use of style tags).

To use a CSS snippet in a style sheet requires two steps:

1. Add the CSS declaration to the style sheet with a class name or an id value. In the style sheet, a class name is preceded with a dot/period/full stop (".") character and an id value is preceded with the pound sign/octothorpe ("#") character.

   Here, the previous CSS declaration snippet examples are formatted for a style sheet, with class names and with id values. (Line breaks and spaces are optional.)

   <style type="text/css">
   
   .colored-background { background-color: skyblue; }
   
   .subdued-text {
       font-size: 1.5em;
       color: #ff0000;
       background-color: #efefef;
       }
   
   #colored-container { background-color: skyblue; }
   
   #subdued-text-container {
       font-size: 1.5em;
       color: #ff0000;
       background-color: #efefef;
       }
   
   </style>
   

2. Use the class name or id value specified in the style sheet.

   Here are examples for using the class names. You'll see the class name assigned to p tags and you'll see it assigned to span tags. The class name does not include the (".") character that it is preceded with in the style sheet.

   <p class="colored-background">
   Paragraph content.
   </p>
   
   <p>
   This is <span class="colored-background">designed text</span> within a paragraph.
   </p>
   
   <p class="subdued-text">
   Paragraph content.
   </p>
   
   <p>
   This is <span class="subdued-text">designed text</span> within a paragraph.
   </p>
   

   Here are the above four paragraphs as they appear on a page.

   Paragraph content.

   This is designed text within a paragraph.

   Paragraph content.

   This is designed text within a paragraph.

   Here are examples for using the id value. You'll see the id value assigned to p tags, although it could be any HTML tag for containing content. The id value does not include the ("#") character that it is preceded with in the style sheet.

   <p id="colored-container">
   Paragraph content.
   </p>
   
   <p id="subdued-text-container">
   Paragraph content.
   </p>
   

   Here are the above two paragraphs as they appear on a page.

   Paragraph content.

   Paragraph content.

Because the id CSS definition values and the class name CSS definition values are identical in the examples, the design is the same. This was intentional for illustrating the use of snippets.

For practical applications, when you're not compelled to use the snippets exactly as found, the various styles may be changed.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager