Information Systems College of Business Administration University of Missouri - St. Louis

Cascading Style Sheets

Sometimes you want to make changes in blocks of code to emphasize (or de emphasize) them. In this case, you want to use the "SPAN" selector. It allows you to set a particular feature globally and use it as you want. Consider the following code:

<STYLE TYPE="text/css">
<!--
H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
SPAN {font-size: 20pt; color:white; background-color:purple}
-->
</STYLE>

This means that any text between the <SPAN> and the </SPAN> tags will be larger, white and on an purple background. Look at the example where we used this definition in the style commands AND applied the <SPAN> and the </SPAN> tags to this paragraph. Please note that we also defined the <SPAN> and the </SPAN> tags on this page, but did not define them in the style commands.

This example is defined using the <DIV> and </DIV> tags similarly to the <SPAN> tags above. Notice the primary difference is the divider lines.

<STYLE TYPE="text/css">
<!--
H1, H2, H3, H4, H5, H6 {font-family:"Arial"}
SPAN {font-size: 20pt; color:white; background-color:purple}
DIV {font-size: 20pt; color:white; background-color:purple}
-->
</STYLE>

You want more information? Check out W3C's overview of CSS.

| Go to UM-St. Louis Home Page | College of Business Page | IS Home Page | Resource Page |



Page Owner: Professor Sauter (Vicki.Sauter@umsl.edu)