Software, Systems, and Solutions

"We do not run your business. We make your business run better."

Skip Repetitive Navigational Links

Cascading Style Sheets

What are Style Sheets?

  • Cascading Style Sheets separate the appearance of web pages from the content of web pages. 
    • This means that the information goes into HTML files, but HTML files should not contain information about how that information is displayed. 
    • Information about how the pages should
      appear goes into style sheet files.

Advantages of Style Sheets

  • The traditional HTML approach is to "hardcode" all of the appearance information about a page. 
    • eg. Every heading, in every page, the font size and face properties etc. need to be set. 
    • As the page count increases the editing/re-editing times increases as does the possibility for introducing errors.
  • Cascading Style Sheets allow formats for headings etc. to be set once. 
  • They allow whole organizations to share style sheets, ensuring consistency across the site.

Using the Style Attribute

  • Styles can be declared inside an HTML tag by adding the style=" " attribute:  
           style="property:value" 
    • eg. for red text in a paragraph:  
      <p style="color:red">Totally red!</p>       

      Totally red!

    • To add more than one property in a style. Put a ";" after your first property:value, & add another: 
      <p style="color:red; font-style:italic"> Red-hot italic!</p> 

      Red-hot italic!

Styles in the Head Section

  • Styles can also be declared for an entire document.
  • These styles are declared inside the head section of the page and begin with the <STYLE> tag and end with the </STYLE> tag.
  • Below is an example that declares the style for
    the <SPAN> tag in the head of the document. (The SPAN tag is a division in a page. It won't break to the
    next line after you close the tag) : 
<HEAD> 
<STYLE>Begin style definition
<!--   Comment to hide style from older browsers
SPAN { color:red; Set text color to red for a span
       font-style:italic; Add italics 
        font-size: 1.5em;  font 1.5*surrounding size 
     } End definition  for a span
// --> End comment to hide style
</STYLE> End style definition
</HEAD> 
  • The following HTML in the body of the document:
<SPAN>Red & italic 1,</SPAN> not anything
<SPAN>Red and italic too!</SPAN> 

Yields: Red and italic 1, not anything Red and italic too!

Using Classes to Define Styles

  • Style classes allow styles to be defined without using up a tag each time you wish to have a new style. 
  • Define 2 classes,  one gives you a red font, another gives you a green font, both w/ background color by: 
 
<HEAD> 
<STYLE type="text/css"> <!-- 
  .redfont { color:red;Note "." immediately precedes
       background-color:#ffcccc;} //   the class name
  .greenfont { color: green;
       background-color:#ccffcc;}  
--></STYLE> 
</HEAD> 
  • If you would like to have a section with a red font and a section with a green font, but wish to use the <p> tag for both, you can! 
  • > <p class="redfont">I am red, & I'm important</p> 
    <p class="greenfont">I am green, so there</p>
  • This gives: 

    I am red, & I'm important

    I am green, so there

Using External Style Sheets

  • External style sheets allow the use of one group of styles on many pages at once. 
  • External style sheets are TEXT files ending with the .css extension. They just contains style definitions for different types of elements.  
  • To link to a style sheet, you need to add the <LINK> tag inside the head section of your html document: 
    <LINK rel="stylesheet" type="text/css" href="style1.css"> 
  • The following was saved in a file style1.css and linked to in a file testCSS.html.
DIV { font-family: Arial, sans-serif;DIV is a
      color: blue; //  block of text w/ breaks before & after
      font-weight: bold;
      font-size: 14pt; }

SPAN { color:red;      SPAN is inline text
       font-style:italic; 
       font-size:1.5em;}

.greenfont { color: green;The greenfont class again
             background-color:#ccffcc;} 
  • Now, any time you use the DIV tag in one of your pages linking to the style sheet, you will get:
    • Blue, Bold, 14 point, Arial text (or if Arial is not available you will get the default sans-serif font)
      <DIV>I am Arial!</DIV> 

I am Arial

  • And when you use the "greenfont" class, you will get a green font, italic and 1.5em (1.5*neighboring size): 
    • This line is<SPAN class="greenfont"> really </SPAN>important! 
This line is really important!
  • This file uses the style sheet main.css. 

Properties

Font Properties

  • You have seen many of the basic font properties already, 
    • font-family: eg. Arial (sans-serif), Times (serif) and Courier (monospaced). 
      Include the generic font family name (serif etc) so an alternate font can be used if the one specified is not available.  
    • font-weight: normal, bold, bolder, lighter, 100-900
    • font-style: normal, italic, or oblique
    • font-size: in points (14pt), pixels (40px) or percent (1.5em).   
    • font-variant: normal or small-caps
.fonttest {font-family: Courier, monospaced;
           font-style: oblique; 
           font-weight: bolder; 
           font-size: 20pt;
           font-variant:small-caps; }
  • And when you use the "fonttest" class, you will test all the font properties: 
    • <p class=fonttest>This is a test!!!</p>

This is a test!!!

Text Properties

  • Text properties also control the way HTML text is displayed.  The text properties that can be set are:
    • letter-spacing, text-align, vertical-align, text-decoration, text-transform, text-indent, line-height
  • For example:
    <p style="text-align: right; text-decoration: line-through">Sample equation: E=mc<font style="vertical-align: super">2</font></p>

    Sample equation: E=mc2

 

Color and Background Properties

  • Style Sheets will allow you to use background colors and images for your entire page and for certain sections you would like backgrounds on. 
  • Common properties include: color, background-color & background-image
  • A common use of Color/Background properties is to change the colors of a link when your mouse passes over it.  This is accomplished by creating a style for a:hover:

A:hover { text-decoration: underline;
          font-weight: bold;
          color: purple;
          background-color: #bb99cc;}

  • The properties background-attachment and background-repeat can also be set.
    • background-attachment allows the background to either scroll along with the page (default) or be 
      fixed so that the background will remain in place while the page contents scroll over it. 
    • background-repeat determines how the background is repeated on the page.  It can be repeat (default), no-repeat, repeat-x or repeat-y

Box Properties

  • Box properties allow the properties of HTML box elemnts to be set.  These elements include <DIV>, <TABLE>, <IMG> etc.
  • The primary Box Properties are width and height which allow you to set the dimensions of the box element in either pixels or as a percent of the available space.
    • overflow: When an element does not fit in the defined width or height overflow determines whether the remaining part of the element should be hidden, scroll or visible. 
  • The appearance of the borders on the box can also be changed using (or just border:):
    • border-style: none, solid, double, dotted, dashed, ridge, inset, outset, and groove. 
    • border-width: number of pixels, thin, medium, thick
    • border-color: color name
  • The style sheet defined for this page (main.css) has the following border properties set for the <DIV> element (Note: they are all in one statement):
div { font-family: monospace; color: #993366;
      font-weight: bold; font-size: 15pt;
      border: thick groove #993366 }
  • The margins around the outside of the box and the padding between the text and the inside of the box can be set using:
    • margin-left, margin-right, margin-top & margin-bottom
    • padding-left, padding-right, padding-top & padding-bottom
    • Possible Values are the number in pixels, a percentage or auto

Positioning & Classification Properties

  • Cascading Style Sheets allow more control over the position of elements on an HTML page using the position property. 
  • The default position property is "static", which places an element wherever you wrote the code. 
  • "absolute"  or "relative" positioning allows a section to be placed exactly where you want it using the number of pixels or percent from the top & left of the window or relative to the current location. 
  • "z-index" allows elements to overlap with higher z-index elements on top of lower ones.
<DIV style="position: relative; top: 10; left:420; width:100; height:200;z-index=1; overflow:hidden">This DIV text will be in the positioned DIV box which will still have all the old properties above!</DIV>
<IMG src="sparky.gif" width=75 height=75 style="position:relative; top:-120; left=400; z-index=2"> 
This DIV text will be in the positioned DIV box which will still have all the old properties above!
  • Cascading Style Sheets also can position elements on the page without removing them from the normal flow of the text.  
  • Floating allows elements to be placed to the left or right of a document and nearby text will wrap around the floated element:
<DIV style="float: right; width:100; height:200; overflow: scroll">This DIV text will be in the floated DIV box which will also have a scroll bar so you can see any overflow text!!</DIV> <IMG src= "Sparky.gif" width=75 height=75 style="float:left;"> <P>This is just some other paragraph that should wrap around the floated paragraph and image</p>
This DIV text will be in the floated DIV box which will also have a scroll bar so you can see any overflow text!!

This is just some other paragraph that should wrap around the floated paragraph and image

Cursor Properties

  • With style sheets, you can change the cursor when the mouse moves over a certain area or over a link. The command is just: 

    cursor:type
    Where we will replace "type" with the type of cursor we want. 

    <A HREF="#" style="cursor:crosshair">A Cross Link</A>
    This would give us:    A Cross Link
  • Cursor Types 
    • auto: plain 
    • crosshair: Looks like a cross 
    • default:  
    • move: Looks like you should be moving something 
    • hand: The hand you usually see over links 
    • help: A question mark beside the arrow 
    • text: The bar you see when the mouse is over text 
    • wait: The "waiting" hourglass! 
    • n-resize, s-resize, e-resize, w-resize, ne-resize...: arrows pointing north, south, east ...