Skip Navigation Links 

U of A University Information Technology Services

Was this page helpful?
 [+]





...Or log into AskIT
and request help.

 

Cascading Style Sheets (CSS)

The World Wide Web Consortium (W3C) defines Cascading Style Sheet (CSS) as a simple mechanism for adding styles (e.g. fonts, colors, spacing) to web documents. To read further information, visit the W3C's CSS web page.

Style sheets control the manner in which HTML elements are displayed. Font color, style, size, and spacing; page backgrounds, margins, and layout; table margins, cell padding, and alignment are examples of properties that can be designated with a style sheet.

Recommended CSS tutorials:

Adding a Style Sheet to a Web Page

Styles can be added to web pages in four ways. The first three require insertion into the <head></head> tags of the HTML code.

  • Link to external file: The styles can implemented from an external CSS file by adding the appropriate markup for the file type into the <head></head> tags (the href="" can be a relative or absolute link):
    • HTML or XHTML example:
      <link rel="stylesheet" type="text/css" href="example.css" />
    • XML example:
      <?xml-stylesheet type="text/css" href="example.css"?>
  • Import an external file: Importing a CSS file lets you hide the styles from old browsers that do not support CSS. It is similar to the above <link> method, but is only supported by version 5 and above browsers. Also, this method allows you to add a partial stylesheet should you want to make a small alteration without adding to the main stylesheet (the path to the file can be relative or absolute).
    • Example:
      <style type="text/css"> @import "example.css"; </style>
  • Adding styles in head tags: The style can be directly inserted in the code of the web page it is to control. Note that the main part of the style is commented out to hide it from old browsers.
    • Example:
      <style type="text/css">
      <!-- body { background-image: url("http://www.uark.edu/images/binary.jpg"); } -->
      </style>
  • Adding styles to tags: Styles can be directly added  to a tag. Be aware that not all tags can take direct style changes (WC3 property list). In the example below, all of the text enclosed in the <p></p> tags will be blue and Arial.
    • Example:
      <p style="color: blue; font-family: Arial; "> text </p>

Internal style sheets where the styles are defined in the code of the HTML file, as in the last two examples above, are commonly used when only one or two web pages require styles. The maximum usefulness of a style sheet, however, can be achieved by employing an external style sheet; it gives you the abilility to change the appearance and layout of all your web pages at once just by editing one single CSS document.

CSS and IE7

Internet Explorer 7 has many CSS bug fixes and treats Style Sheets differently than previous versions of IE and non-IE browsers. Traditionally, hacks were developed or found that allowed you to get around the differences while still using one CSS file. However, in addition to the bug fixes, the two most common hacks (often refered to as the 'child selector hack' and the 'star html hack') are now read by IE 7 and are ineffective.

A way around this is to resort to adding an additional CSS file that is keyed to only be picked up by IE 7. Use the following statement directly after other style declarations in the HTML header of all of the HTML pages using your original style sheet. You can name your file whatever you like; IE7styles is only an example.

<!--[if IE 7]><link rel="stylesheet" type="text/css" href="IE7styles.css" /><![endif]-->

The only command you need to add is the one that fixes the previous. For example if in your main CSS file you have:

#some_div {float:right;width:150px;margin-right:-15px; padding:0px;font-size:small;}

and you find that IE 7 misinterprets the margin. In the IE 7 CSS file you just need to override the margin-right command. Example:

#some_div {margin-right:12px;}

 
 
Thank you for visiting UITS. This page can be found at:
http://uits.uark.edu/web/index_4772_ENG_HTML.htm