Cascading Style Sheets, commonly referred to as CSS, is one of the best advancements in HTML allowing for a real abstraction between content creation and display design. While the CSS language syntax can be a tad confusing, the concept is not confusing at all. CSS allows for identification tags within normal HTML that tell the web browser how to display a block of data.

Providing a tutorial on CSS is beyond the scope of the Village Glossary, however we offer this short snippet to clarify things. Note how this one paragraph is formatted differently from others, this is performed using inline style statements.

That paragraph was created using the following HTML inline code:

 
<p>
 <span style="border-style: solid; 
                     border-color: #5d01ac;  
                     font-family: Geneva,Arial,Helvetica,sans-serif; 
                     font-size: 14pt; 
                     font-style: italic; 
                     line-height: 250%; 
                     color: #0216c9;  
                     background-color: #c1d7c0;">
      Providing a tutorial on CSS is beyond the scope of the Village Glossary, 
      however we offer this short snippet to clarify things. Note how this one 
      paragraph is formatted differently from others, this is performed using 
      inline style statements.
 </span>
 

Clearly style statements provide great flexibility in how information is displayed, this silly example only touched on some of the possibilities, however there are two distinct and very real problems with using styles:

</p>

1. The content source itself contains the formatting information which makes it difficult to reuse the content in a different layout or to enforce a particular layout
   
   1. For some people and tasks, like creating this very GATE Village Glossary Item, this is a desireable and useful "problem" that allows for WYSIWYG editing
      
2. The HTML source (what is downloaded to computers) is much larger as all the style tags are inserted, a minor problem for a small Information Object but a non-trivial problem for more complex displays.

CSS offers a the same flexibility as style tags but with a naming structure that allows for re-use of the same formatting. For instance, the above could have been written as special CSS class called, say, "goofy-gate" (see below) and then written simply as:

<p class="goofy-gate">Providing a tutorial on CSS is beyond the scope of the Village Glossary, however we offer this short snippet to clarify things. Note how this one paragraph is formatted differently from others, this is performed using inline style statements.</p>

and then, either in the source document or (more often) in a separate CSS file, the following declaration:

.goofy-gate {

    border-style: solid;

    border-color: #5d01ac;

    font-family: Geneva,Arial,Helvetica,sans-serif;

    font-size: 14pt;

    font-style: italic;

    line-height: 250%;

    color: #0216c9;

    background-color: #c1d7c0;

}

Note that we have chosen to show the color declarations using HEX codes, the more common format, however if you look at the source to this you'll see that the actual style color attributes use RGB codes -- that is due to the WYSIWYG editor being used to create this -- however the declarations are semantically identical.

So, that is a brief explanation of what CSS is and why somebody might want to use it. With the right Village Role, you can supply a full CSS describing the entire page (See My Budding Tattoo as an example) and display Village and external content in any way you like.