CSS Tutorial

Table of Contents

  1. Introduction
  2. Adding Style Sheets
  3. Types of Style Entries
  4. Rules
  5. Units of Measure
  6. Properties

Introduction

 In the beginning  HTML was designed as a "page description language". This meant that it was supposed to describe what the text meant not what it looked like. Over time, Netscape® and Microsoft® expanded the language to add tags such as the <FONT> tag which described the physical appearance without defining purpose. CSS and HTML 5.0 are an attempt to return the language to page description. In the new system, tags should refer to function while their appearance is controlled by a Style Sheet. Style Sheets have been around long enough that most aspects of CSS are implimented in current browsers. In general, the newer the browser, the better the implementation of Cascading Style Sheets. FireFox, Chrome and Opera have the most complete implimentation with Safari and IE lagging behind. Be sure to check multiple browsers before using any particular style sheet element. When I refer to "current browsers" I specifically mean, Internet Explorer® 9 and above, FireFox® 12 and above, Safari® 5 and above, Chrome® 10, and Opera® 11 and above. CSS3 requires these browsers. Users of Windows XP cannot use the full capabilities of CSS3 with IE8 and should switch to one of the other browsers.


Adding Style Sheets

There are two ways to insert Cascading Style Sheets into a document:
  1. Creating a Style Sheet

  2. Style sheets are placed in the HEAD section of the document. For instance, in this document there is a style sheet that looks like this:
    <style type="text/css">
    <!--
    body    {font-size: 16px; background-image: url(image001.gif); 
    background-attachment: fixed; background-color: #E1D9C7; 
    margin: 5px; font-size: medium;}
    h1      {color: #330099; text-align: center; 
    text-shadow: blue 5px 5px 3px, yellow -2px -2px 3px;}
    h2      {color: green; text-align: center; 
    font-family:verdana,sans-serif;}
    strong  {font-family: Comic Sans MS,cursive; 
    font-weight: bold;}
    em      {font-family: Comic Sans MS,cursive; 
    font-size: large; font-weight: bold; 
    color: #0000CC;background-color: #FF9900;}
    code    {color: #663300;}
    pre     {color: #000099;}
    tt      {color: #000099; font-size: 1.2em;}
    ol b    {font-family: serif; font-size: 
    x-large; color: #000099;}
    .bb     {font-weight: bold; font-size: larger; 
    font-family: verdana,sans-serif;}
    ul      {list-style-type: square;}
    span.heavy           {font-weight: bold}
    p.fancy:first-line   {font-size: 1.3em}
    p.fancy:first-letter {font-size: 2em; font-family: 
    Comic Sans MS,cursive;}
    img.flash:hover {border:thick red solid;}
    #level1 {position: relative; border-style:ridge; 
    border-width:thick; border-color:red; background: #0000FF;
    color: yellow; width: 500px; height: 500px; margin-left: 
    40px; padding: 20px; font-weight: bold;}
    #level2 {position: absolute; left:200px; top:300px; z-index: 1;}
    #level3 {position: absolute; left:100px; 
    top:350px; height: 100px; width: 200px; overflow: a
    uto; background: #999999; padding: 2px; z-index: 2;}
    @font-face {font-family: Silly; src: url('techniqo-webfont.ttf'), url('techniqo-webfont.eot')}
    // -->
    </style>
    

    The <style type="text/css"> tag always starts the style sheet. The <!-- and // --> are used to comment out the text from browsers that do not recognize CSS. They are optional. The code between these comment tags defines the styles for the page. The style sheet ends with the </style> tag.

  3. Inserting a Style Sheet From a File

  4. This is also done in the HEAD section. In this page the code is:

    <link REL="StyleSheet"
    HREF="standard.css"
    TYPE="text/css">
    
    This is equivalent to inserting:
    body       {font-family: Arial,Verdana,Helvetica,sans-serif; 
    background-color: #FFFFFF; color: #000000;}
    
    /* Foreground Colors */
    .maize     {color: #FF9900;}
    .grey      {color: #666666;}
    .red       {color: #CC0000;}
    .brick     {color: #990000;}
    .offwhite  {color: #FAF0E6;}
    .white     {color: #FFFFFF;}
    .black     {color: #000000;}
    .green     {color: #006600;}
    .purple    {color: #663399;}
    .violet	   {color: #333399;}
    .lightblue {color: #0000FF;}
    .mediumblue{color: #000099;}
    .burgundy  {color: #660000;}
    .gold      {color: #FFCC33;}
    .olive     {color: #333300;}
    .lightolive{color: #666600;}
    .brown     {color: #996600;}
    .darkgrey  {color: #333333;}
    .darkbrown {color: #663300;}
    .teal      {color: #336666;}
    
    /* Background Colors */
    .yellow-b  {background-color: #FFFFCC;}
    .green-b   {background-color: #99CC99;}
    .white-b   {background-color: #FFFFFF;}
    .offwhite-b{background-color: #FAF0E6;}
    .tan-b     {background-color: #FFCC99;}
    .grey-b    {background-color: #CCCCCC;}
    .black-b   {background-color: #000000;}
    .sand-b    {background-color: #E1D9C7;}
    .gold-b    {background-color: #FFCC66;}
    .burgundy-b{background-color: #660000;}
    .teal-b    {background-color: #339999;}
    
    .inverse   {background-color: #000000; color: #FFFFFF;}
    
    /* Link Colors */
    a:link     {color: #0000FF;}
    a:visited  {color: #0000FF;}
    
    a.bur:link    {color: #660000; font-weight:bold}
    a.bur:visited {color: #660000; font-weight:bold}
    a.bur:hover   {color: blue; font-weight:bold}
    a.bur:active  {color: #660000; font-weight:bold}
    
    a.gray:link    {color: #333333; font-weight:bold}
    a.gray:visited {color: #333333; font-weight:bold}
    a.gray:hover   {color: blue; font-weight:bold}
    a.gray:active  {color: #333333; font-weight:bold}
    
    a.teel:link    {color: #336666; font-weight:bold}
    a.teel:visited {color: #336666; font-weight:bold}
    a.teel:hover   {color: blue; font-weight:bold}
    a.teel:active  {color: #336666; font-weight:bold}
    
    a.snow:link    {color: #FFFFFF; font-weight:bold}
    a.snow:visited {color: #FFFFFF; font-weight:bold}
    a.snow:hover   {color: #FFFF99; font-weight:bold}
    a.snow:active  {color: #FFFFFF; font-weight:bold}
    
    a.coal:link    {color: #000000; font-weight:bold}
    a.coal:visited {color: #000000; font-weight:bold}
    a.coal:hover   {color: blue; font-weight:bold}
    a.coal:active  {color: #000000; font-weight:bold}
    
    a.coal2:link    {color: #000000;}
    a.coal2:visited {color: #000000;}
    a.coal2:hover   {color: blue;}
    a.coal2:active  {color: #000000;}
    
    into the Cascading Style Sheet. This method allows a style sheet to be shared by all members of an organization. It is a way to enforce a standard color scheme on all pages.

Types of Style Entries

Each entry in a style sheet defines one or more parameters for one or more sets of entities. There are three types of entities for which entries can be made: tags, classes and IDs.
  1. Redefining Tag Attributes
  2. You can redefine the appearance of a tag using a style sheet entry. This is especially useful for logical text formatting tags (e.g. <em>, <strong>, <cite>, <dfn>, <del>, <ins>, <code>, <var>, <samp>, <kbd>, etc.). These tags define the function of the text they enclose but do not have a set display format (i.e. <em> is sometimes displayed as bold and sometimes as italics depending on the browser). For example, in the style sheet for this page:

    strong {font-family: Comic Sans MS,cursive; font-weight: bold;}
    em     {font-family: Comic Sans MS,cursive; font-size: large;}
    
    the strong tag is defined as using a Comic Sans font in bold and the emphasis tag is Comic Sans large.

    More than one tag can be redefined in the same entry as:

    pre, tt {color: #000099;}
    
    defines both predefined text and teletype text as being blue.

    Tags can also be redefined in relation to other tags. For instance:

    ol b   {font-family: serif; font-size: large; color: #000099;}
    
    says that the bold tag will appear large, in the default serif font and in dark blue, but only if it is inside an ordered list. At other times it will work normally. The headings for the numbered sections of this page are created this way.

    Another way to redefined a child tag in relation to its parent tags is:

    ol > li   {font-family: serif; font-size: large; color: #000099;}
    

    This says that the list item tag will appear large, in the default serif font and in dark blue, but only if it is inside an ordered list. In unordered lists it will work normally.

  3. Classes

  4. Classes are symbolic representations of a set of style attributes. Each class name begins with a period. The names do not have to be represenatative; however, it is useful to do so. Some examples are:
    .mediumblue{color: #000099;}
    .burgundy  {color: #660000;}
    .gold      {color: #FFCC33;}
    .gold-b    {background-color: #FFCC33;}
    .burgundy-b{background-color: #660000;}
    .inverse   {background-color: #000000; color: #FFFFFF;}
    
    A class can be applied to any HTML tag by adding class="classname" within the tag's brackets. For example this text was created this way:
    <i class="mediumblue">Test Text</i>
    
    Classes can be limited to one particular tag by placing the name of the tag in front of the class name declaration, for example:
    span.heavy           {font-weight: bold}
    
    The <span> tag is very important with styles. The <span> tag is an HTML tag that does nothing to the text it encloses but can be used to associate a class with that text. For example, if I enclose a line of text in <span> tags:

    Test Text

    nothing happens to the text; however, if I enclose a line of text in <span class="mediumblue"> tags:

    Test Text

    the text becomes blue as defined in the inserted style sheet. <span> unlike <div> has no line breaks associated with it, so it can be used within a line of text without affecting flow.

  5. Add a Style to a Tag

  6. You can directly add a style to a tag. The format is:

    <tagname style="property: value; ... ">

    For example:

    <i style="color: #CCCC00;background-color: #666666;
    font-weight: bold;">Test Text</i>
    Would look like this:

    Test Text

    The <span> tag is, again, very useful for applying styles this way.

  7. ID

  8. IDs are similar to classes with three exceptions:
    • you begin an ID with # (pound sign)
    • you invoke an ID by inserting id="idname" into a tag
    • an ID can only be used once
    IDs are generally used to create positioned elements and addressable entities for Javascript manipulation. You will normally use classes.

Rules

  • Order of Precedence

  • As seen in this tutorial, a style element can be defined in a linked style sheet, a style sheet on the page or within a tag. When an element is multiply defined, the order of precedence is:
    1. within the tag
    2. style sheet on the page
    3. linked style sheet
  • Cascading
  • If various properties of an element are defined multiple times, those elements will change according to the order of precedence. Other elements defined in lower order of precedence will remain valid if they are not redefined. In this page, for instance, the linked style sheet defines the background color as white and the text color as black. The style sheet on the page redefines the background color to a sandy brown but says nothing about the text color, therefore, the text color remains black.

    In addition, elements inherit styles from parent elements. So, if I had a table with a style defining the text color as red, then a list within that table would also have red text.


Units of Measure

CSS uses numerous units of measure which fall into two categories: Absolute and Relative.
  1. Absolute units of measure

  2. Absolute units of measure have set values. Some examples are:
    • milimeter: mm
    • centimeter: cm
    • inch: in
    • point: pt (72 pt = 1 in)
    • pica: pc (1 pc = 12 pt)
    • pixel: px

    The pixel is equal to the smallest display element on a video display. For print purposes, the pixel is adjusted so that the page prints at the same size as displayed.

    In general, it is best to use relative units instead of absolute units. Since users can change the size of the display font, any size measured in absolute units will not resize with the font. This is particularly bad when the font size of elements is set absolutely. When this is done, the font cannot resize which will make the font out of proportion with any other fonts on the page which can resize. In addition, the absolute font size chosen may be too small for some users to read on certain browsers or at certain resolutions, but the user will not be able to compensate for this if the font size is set absolutely. There will be times when an elements must have an absolute size, but try to minimize this.

  3. Relative units of measure

  4. Relative units of measure have values that vary in relation to other elements within a page. Some examples are:
    • em: em
    • percentages

    The em is a unit equal to the height of the base font of a parent element. For example, if the base font for this page is Arial 10, then one em would equal 10 pts. However, if I used the browser to change the size of the base font to 12, one em would equal 12 pts. So when lengths and font sizes are specified in ems, they will all remain proportional whenever the font size of the page is changed. To say: tt {font-size: 1.2em} makes the teletype font 1.2 times larger than the base font (as is the case in this document). The em is considered by some to be the preferred unit of measure for CSS elements.

    Most elements can also be expressed as percentages. To say: tt {font-size: 120%} makes the teletype font element 1.2 times larger than the base font just as in the previous example.


Properties

Cascading Style Sheets have an incredible array of properties. Several lists of all properties are available on the internet. An excellent one is: http://www.htmlhelp.com/reference/css/all-properties.html. This tutorial will cover only some of the most useful.
  1. Font & Text

    • Font Family
    • <span style="font-family:century schoolbook,times new roman,times,sans-serif;">Test Text</span>

      The parameter is a series of font names separated by commas. The font names are the exact display name of the font. Fonts are evaluated in the order they are listed. In the example, Century Schoolbook is used if it is installed, and, if not, Times New Roman is used, etc. If none of the fonts is found, the default page font will be used. To avoid this, always specify a generic font type. The list should include both PC (e.g. Arial, Times New Roman, Courier New) and Mac (e.g. Helvetica, Times, Courier) fonts. The names are not case sensitive. Remember, some PC's may have only Arial, Times New Roman and Courier New installed, although most will also have Comic Sans MS, but don't predicate the looks of your page on any other font.

      There are also five generic font names which will give the default font for each type. They are:

      <span style="font-family:serif;">Test Text</span>
      <span style="font-family:sans-serif;">Test Text</span>
      <span style="font-family:monospace;">Test Text</span>
      <span style="font-family:cursive;">Test Text</span>
      <span style="font-family:fantasy;">Test Text</span>

      The appearance of the generic fonts will vary (particularly cursive and fantasy) depending on the browser and the installed fonts on the viewer's computer.

    • @Font Face
    • The @font-face declaration causes a font file to be loaded into the browser. It is made in the style sheet section of the web page.

      @font-face {font-family: Silly; src: url('techniqo-webfont.ttf'), url('techniqo-webfont.eot')}

      The attributes are a font family name which should be a name other than a font normally used on computers, and source URL's for the font. There is a dispute between the web browser makers over what format web fonts should be in, so you should use both a ttf and eot in your declaration. Free web fonts are available. To use the web font, invoke it with the font-family attribute in a style.

      <span style="font-family:Silly;">Test Text</span>

    • Font Size
    • The size can be expressed as an exact number of points, a percentage, or symbolically. Remember, when using exact font point sizes, you limit or remove the users ability to resize text for better viewing. Only use exact point sizes where maintaining text size and relative position is crucial, such as in text rollover menus. Otherwise, use percentage or symbolic sizes.

      Symbolic sizes have two forms: relative and exact. The relative sizes are larger and smaller. They approximate the +1 and -1 attributes of the Font size= tag.

      The text will grow <span style="font-size:larger;">larger<span style="font-size:larger;">and larger</span></span> or <span style="font-size:smaller;">smaller<span style="font-size:smaller;">and smaller</span></span>

      Note that the tags can be nested to further increase size.

      Exact symbolic sizes approximate the 1 through 7 attributes of the Font size= tag. They are:

      <span style="font-size:xx-small;">Test Text</span>
      <span style="font-size:x-small;">Test Text</span>
      <span style="font-size:small;">Test Text</span>
      <span style="font-size:medium;">Test Text</span>
      <span style="font-size:large;">Test Text</span>
      <span style="font-size:x-large;">Test Text</span>
      <span style="font-size:xx-large;">Test Text</span>

      Sizing using either of these techniques will vary depending on the browser.

      Sizing by percentage is done in em's which represent the size of the letter M in the current font.

      <span style="font-size:1.3em;">Test Text</span>

      <span style="font-size:2em;">Test Text</span>

      <span style="font-size:3em;">Test Text</span>

    • Font Style
    • The parameters for this property are normal and italic. Use the normal parameter to suppress italics in tags such as <em>.

      <span style="font-style:italic;">Test Text</span>

    • Font Weight
    • The parameters for this property are normal and bold. Use the normal parameter to suppress bolding in tags such as <strong>.

      <span style="font-weight: bold">bold</span>

    • Font Variant
    • This property has one parameter small-caps. With small-caps, all letters look like capitals and only vary in size. This property has very limited support on older browsers.

      <span style="font-variant: small-caps">This Text is in Small Caps</span>

    • Stacking Font attributes
    • Font attributes can be stacked in a single statement with the attributes seperated by spaces. For multiple font family choices, seperate the values with commas. The order of attributes is: weight style variant size family.
      <span style="font:bolder italic small-caps 3em Century Schoolbook, serif">Text with stacked font attributes</span>

    • Color

    • Sets the text color. The parameter may be a hexadecimal number preceded by the pound sign (#) (e.g. #FF0000) or a color literal (e.g. red). (See the Colors page of the HTML Tutorial for a more detailed discussion.) The number of color literals is more limited in CSS than in HTML; only sixteen are defined: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua (for white and yellow the background-color property was changed to black).

      <span style="color: red;">Test Text</span>

    • Link Colors and Psuedo-classes
    • Hyperlink colors cannot be changed using a standard class= attribute. Instead, you must either embed a style= attribute or create a Psuedo-class. An example of Psuedo-classes for links is:

      a:link    {color: blue;}
      a:visited {color: blue;}
      a:hover   {color: red;}
      a:active  {color: #660000;}
      
      In this example, the color for both unvisited links and visited links is blue while active links are burgundy and the cover while the mouse is hovering over a link is red. Placing this code in the style sheet will change all links. In addition, you can create a named Psuedo-class which can be invoked with the class= attribute. An example is:
      a.bur:link    {color: #660000; font-weight:bold}
      a.bur:visited {color: #660000; font-weight:bold}
      a.bur:hover   {color: blue; font-weight:bold}
      a.bur:active  {color: #660000; font-weight:bold}
      
      The code to invoke this class is:
      <a href="http://www.geocities.com/olli_web_class/"
      class="bur">Homepage</a>
      
      In this case, the link is burgundy and bold except when hovered over.

      The hover pseudo-class can be used with other elements. In the example below, a border appears when the cursor is over the image (except IE).

      Don't Panic

    • Letter Spacing
    • Used to increase the space between letters. The parameter is a numeric value.

      <span style="letter-spacing: 3px;">Test Text</span>

    • Word Spacing
    • Used to increase the space between words. The parameter is a numeric value. NOTE: this property is only implemented in current browsers.

      <span style="word-spacing: 30px;">Test Text</span>

    • Text Decoration
    • The parameters for this property are none, underline, overline, and line-through. Text decoration of none is used to remove the underlines from links. To remove all link underlines, add the line:

      a   {text-decoration: none;}
      to the style section of the page.

      <span style="text-decoration: underline;">Test Text</span>

      <span style="text-decoration: overline;">Test Text</span>

      <span style="text-decoration: line-through;">Test Text</span>

      <span style="text-decoration: blink;">Test Text</span> (FireFox and Opera only). Note that CSS3 officially removes the blink attribut.

      <span style="text-decoration: line-through overline underline;"> Text decorations can be stacked</span>

    • Text Indent
    • Indents the first line of a block of text. The parameters are either a number (e.g. 3em) or a percentage.

      This paragraph has an indent of 3 ems. A positive number in a text-indent causes the first line of the text in the paragraph to be indented. A 3 em indent is equivalent to 3 times the height of one character in the font used.

      This paragraph has an indent of -3 ems and a left margin of 3 ems. A negative number in a text-indent causes a hanging indent while the margin moves the paragraph back into alignment with the rest of the text. A 3 em indent is equivalent to 3 times the height of one character in the font used.

    • Text Transform
    • Changes the appearance of the text. The parameters are capitalize, uppercase and lowercase

      This block of TEXT can be transformed to:

      <div style="text-transform:capitalize">This block of TEXT can be transformed to capitalized</div>

      <div style="text-transform:uppercase">This block of TEXT can be transformed to uppercase</div>

      <div style="text-transform:lowercase">This block of TEXT can be transformed to lowercase</div>

    • Text Shadow
    • Adds a shadow around the text. The title of this page should have a shadow. Each shadow value has four parameters color horizontal_distance_right vertical_distance_below blur_radius. Multiple shadow values are seperated by commas.

      <div style="shadow:magenta 5px 6px 3px, cyan -2px -4px 3px;font-weight: bold;font-size: x-large;">Text with a shadow</div>

    • White Space
    • The white-space property has two useful properties: nowrap which causes the text within the tags not to wrap at the edge of the element; and pre which causes all spaces and line breaks to be displayed.

    • Pseudo-elements
    • Pseudo-elements, like the pseudo-classes discussed above are a way of functionally breaking down a particular tag and assigning styles depending on that function. The pseudo-elements work with the functions of the paragraph tag (<p>) tag. The two pseudo-elements are first-line and first-letter. For example:

      p.fancy:first-line   {font-size: 1.3em}
      p.fancy:first-letter {font-size: 2em; 
      font-family: Comic Sans MS,cursive; background-color:red;}
      

      This is an example of pseudo-elements. In this example, the first letter of the paragraph should be twice as tall as any other letter in the paragraph and in a cursive font. The rest of the first line of the paragraph should be 30% taller than subsequent lines. Note that in some browsers, neither of these changes will occur and the paragraph will be uniform throughout. In other browsers, the first-line functionality will work but not the first-letter. If neither pseudo-element works, the paragraph appears normally.

      CSS3 introduces new pseudo-elements. The before and after elements place content before or after the element enclosed by the tags. The content can be text or images.

      And now for something completely different

      To create this, the following was placed in the style section:

      h2.special:before {content: "Watch out for the bees"; background-color: red;}
      h2.special:after  {content: url(bee.gif);}
      

      The heading was assigned the class special and the text and picture automatically appended themselves to the content of the tags. Note that the content also retained the formatting inherited from earlier CSS declarations.

  2. Background
    • Background Color
    • Sets the background color. The parameter may be a hexadecimal number (e.g. #FF0000) or a color literal (e.g. red):

      <span style="background-color: red;">Test Text</span>

    • Background Image
    • Provides a background picture for any element including text, table cells, lists, or the entire body of a page (as with this page). All other elements (except background color) appear in front of the background image.
      <span style="color: yellow;background-image: url(next.jpg);">Test Text</span>

    • Background Attachment
    • This property works with the background-image property. The only used value is fixed (as on this page) which causes the image to remain fixed while the page scrolls. If the property is omitted, the background image will scroll with the text.

    • Background Repeat
    • Sets whether the background image is repeated (the default) and how it is repeated. The values for the property are no-repeat, repeat-x and repeat-y. A value of no-repeat causes the background image to be displayed only once. A value of repeat-x causes the background image to be repeated horizontally. A value of repeat-y causes the background image to be repeated vertically.

    • Background Position
    • Sets the origin for the background image if the image is not repeated. The property takes two values separated by a space. The values may be either a percentage or an absolute value (e.g. pixels). For example, the background image for this list was created with:

      <ul style="background-repeat: no-repeat; 
      background-position: 50% 50%;
      background-image: url(image001.gif);">

      then the image would have appeared only once and it would have been centered on the page. This property works with a limited number of HTML tags. Check with multiple browsers before publishing.

  3. Dimensions
    • Line Height
    • Sets the distance between lines. Values are a number (e.g. 12px) or a percentage.

    • Height
    • Sets the height of an element. Values are a number (e.g. 12px) or a percentage.

    • Width
    • Sets the width of an element. Values are a number (e.g. 12px) or a percentage.

      This example, <span style="border-width:thin; border-color:green; border-style:solid; height: 60px; line-height: 20px; width: 50%;">Test Text<br />Test Text</span> produces:
      Test Text
      Test Text

      Note that this example is not rendered logically (except IE) with the <span>, while the same example using <div> (see below) renders correctly in all browsers. Generally, <div> is a better choice for complex formatting.
      Test Text
      Test Text
    • Overflow
    • Since the Height and Width can be set so that they are smaller than the elements they contain, there needs to be a property to determine how the overflow is handled. The possible parameters are: visible (default), hidden, scroll, and auto. Visible lets the content go outside the set area. Hidden clips any content that goes outside the area. Scroll places scroll bars on the area to allow scrolling to view the clipped portion. Scroll bars will appear whether or not clipping has occurred. Auto creates scroll bars if necessary. Auto is generally the best choice.

      In the following examples, a box is created using the code: <div style="width: 228px; height: 150px; background-color: blue; overflow: "> with the values of Overflow set to visible, hidden, scroll, and auto respectivly. The first and second picture overlap slightly due to the extra content allowed using the visible parameter. In auto mode the performance of the browsers varies: IE gives no scroll bar and truncates the bottom of the picture; Firefox and Safari give two scroll bars allowing full viewing of the picture; Opera gives a vertical scroll bar but cuts of the width of the scrollbar horizontally.
      Don't Panic
      Don't Panic
      Don't Panic
      Don't Panic
  4. Borders
  5. The border is placed between the Margin and the Padding. All border properties can be limited to only one side by adding -top, -bottom, -left or -right or, if changing all elements, the values can be stacked seperated by spaces. If none is specified, the border will apply to all sides. All three properties must be set. The implementation of Border is now fairly standard across browsers (dotted varies most); however, placement of the border varies depending on the browser: FireFox place the border for this subsequent list outside the bullets; IE 5 places the border inside the bullets while IE 6 and beyond corrects this but still places the border closer to the bullets than any other browser. Always check borders with multiple browsers before publishing a page.

    • Border Width
    • Sets the width of the border. parameters are: thin, medium, thick or a numeric parameter (e.g. 5px).

    • Border Color
    • Sets the color of the border. Color rendering of borders varies greatly depending on the Border Style and browser used. Only solid borders will render in only the color chosen. For many border styles the border will render grey or black no matter what color is chosen.

    • Border Style
    • Sets the type of border used. The possible parameters are: solid, dotted, dashed, double, groove, ridge, inset, outset.

    • Setting multiple Border attributes
    • Multiple border attributes can be set in one statement. The order is: width style color seperated by spaces. In addition, each attribute can be set seperatly for all sides of the border in one statement. The order is: top right bottom left seperated by spaces.

      <span style="line-height: 40px; border:thick red solid;"> Test Text</span>

      <span style="line-height: 40px; border-width:thick; border-top-color:red; border-bottom-color:green; border-left-color:blue; border-right-color:purple; border-style:solid;"> Test Text</span>

      <span style="line-height: 40px; border-width:thick; border-color:red green blue purple; border-style:solid;"> Test Text</span>

      <span style="line-height: 40px; border-width:thin; border-color:red; border-style:solid;"> Test Text</span>

      <span style="line-height: 40px; border-width:medium; border-color:red; border-style:solid;"> Test Text</span>

      <span style="line-height: 40px; border-width:thick; border-color:red; border-style:solid;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:solid;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:dotted;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:dashed;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:double;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:groove;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:ridge;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:inset;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:outset;"> Test Text</span>

    • Box Shadow
    • Creates a shadow around a box. There are four parameters: horizontal length, vertical length, blur distance(opt.), color(opt.). The lengths can be positive (shadow extends to the right and down) or negative (shadow extends left and up). The optional blur parameter creates a gradient shadow. The value must be positive. The optional color can be either color literal (e.g. red), a hex value (designated with a pound sign, i.e. #888) or an rgb value (i.e. rgb(8,8,8)).

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:outset; box-shadow: 10px 10px 5px red;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:ridge; -10px 10px 5px #888;"> Test Text</span>

    • Border Radius
    • Creates rounded corners on boxes. There is one parameter, the length of the radius for the curve."

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:outset; box-shadow: 10px 10px 5px red; border-radius: 10px;"> Test Text</span>

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:ridge; -10px 10px 5px #888; border-radius: 20px;"> Test Text</span>

      A 50% radius will create an ellipse. Note that padding is needed to read the text.

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:ridge; -10px 10px 5px #888; border-radius: 50%;padding:5px;"> Test Text</span>

    • Outline
    • Creates a border outside the border. So if this is the boxed element:

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:outset; box-shadow: 10px 10px 5px red; border-radius: 10px;"> Test Text</span>

      This would be the element with an outline:

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:outset; box-shadow: 10px 10px 5px red; border-radius: 10px; outline: green 10px double;"> Test Text</span>

      The format for the outline is outline: color width style where the styles are the same as for borders. You can also offset the outline from the element with outline-offset: width.

      <span style="line-height: 40px; border-width:10px; border-color:red; border-style:outset; box-shadow: 10px 10px 5px red; border-radius: 10px;outline: green 10px double;outline-offset:20px;"> Test Text</span>

  6. Margins & Padding
  7. Margins and padding are similar and, in many cases, their effect is identical; however, there is a distinction. Margin defines the space between an element and its parent or adjoining elements. Padding defines the space within an element between its border and internal contents.

    10 pixel margin10 pixel margin

    10 pixel padding10 pixel padding

    Margins and Padding properties (like borders) can be limited to only one side by adding -top, -bottom, -left or -right. Additionally, all sides can be set in one statement in one of two ways: they can be set individually by specifying all four parameters seperated by spaces in the order top right bottom left; or by specifying two parameters in the order top/bottom right/left. NOTE: the left padding example below may overlap the word Margin below it.

    padding set 5, 10, 15 and 20px padding set 5, and 30px
    • Margin
    • The parameter for the margin property is a numeric value (e.g. 30px) or a percentage.

      This example text has style="margin-left: 25%". Unlike the text-indent which only indents the first line of the text, the margin-left indents all lines within the tag containing the style. Note that the margin-left does not affect any other margins. Multiple margins can be set, but unless all margins are to be set, each must be set individually.
    • Padding
    • The parameter for the padding property is also a numeric value (e.g. 30px) or a percentage.

      This cell has 30 pixels padding.

  8. Lists

  9. These properties can be used to customize lists.
    • List Style Image

    • This parameter allows use of an image as the bullet for a list. This list was invoked using:
      <ul style="list-style-image: url
      (spiral-button.gif)">
      This property only works with current browsers.
    • List Style Position

    • The properties for this parameter are inside and outside. The first element of this list is positioned inside, so the bullet appears inside the left margin of the text. This element is positioned outside, so the bullet is left of the text margin. The third element has no positioning and, therefore, takes the default positioning of outside (except in Safari).
    • List Style Type

    • Sets which of the standard bullet types are used with the list or list element. This parameter only works if the list-style-image is not set. The line:

      ul      {list-style-type: square;}
      sets the default bullet style for all unordered lists in this document to a square bullet. The parameters are shown with the corresponding bullet.
      For unordered lists (will work with ordered lists in current browsers)
    • none
    • disc
    • circle
    • square


      For ordered lists (will work with unordered lists in current browsers). Windows users must have international language support enabled for these characters to work (in the Control Panel, the Regional and Language Options tool on the Languages tab). FireFox and Safari support all languages. Those marked with [1] do not work in IE and those marked with a [2] do not work in Opera.
    1. decimal
    2. decimal-leading-zero [1]
    3. lower-roman
    4. upper-roman
    5. lower-alpha
    6. upper-alpha
    7. lower-greek [1]
    8. lower-latin [1]
    9. upper-latin [1]
    10. hebrew [1] [2]
    11. armenian [1]
    12. georgian [1]
    13. cjk-ideographic [1] [2]
    14. hiragana [1] [2]
    15. katakana [1] [2]
    16. hiragana-iroha [1] [2]
    17. katakana-iroha [1] [2]

  10. Positioning & Layers

  11. CSS makes it possible to create elements whose position is fixed within the document or completely independent of the rest of the document.
    • Text Align

    • Sets the alignment for a block of text or any other block level element. This property should actually be called "horizontal-align" since it is the primary means of horizontal alignment in CSS. The parameters are left, right, center, and justify. Although this property refers to text, it can be used to align any other block level element (i.e. align does not work with the <span> tag but does with the <div> tag).
      <div style="text-align: left;">Aligned left.</div>
      <div style="text-align: center;">Aligned center.</div>
      <div style="text-align: right;">Aligned right.</div>
    • Vertical Align

    • Unlike Text-align, Vertical-align is properly named. It provides vertical alignment for all elements of a page. The parameters may be a numeric value (e.g. 5px), a percentage of the vertical height or one of the following: text-top, text-bottom, top, bottom, middle, baseline, sub, super. Of these, only top, bottom, middle, sub, and super work in most browsers. The examples show the relationship of a section of large text to a section of small text with varying Vertical alignment.

      Large text Small text, vertical-align:text-top

      Large text Small text, vertical-align:text-bottom

      Large text Small text, vertical-align:top

      Large text Small text, vertical-align:bottom

      Large text Small text, vertical-align:middle

      Large text Small text, vertical-align:baseline

      Large text Small text, vertical-align:sub

      Large text Small text, vertical-align:super

      Large text Small text, vertical-align:5px

      Large text Small text, vertical-align:20%

    • Float

    • Float creates elements around which text will flow. The parameters are left and right. The parameters indicate the position of the object being floated not the position of the text.
      This block of text was created using the tag:

      <div style="width: 100px; float:right; margin-left: 10px; padding: 10px; border-width: thin; border-style: solid; background-color: yellow">

      If the browser is CSS compliant, this text should appear seperatly on the right hand side of the table with the accompanying text wrapping around it.
      This technique is equivalent to using the <img align="right"> except that it is not limited to images. As in this example, any block level element can have text floated around it.

      This technique can be used to approximate some typesetting effects as shown in the box to the right. Wrapping will continue until the text finally moves around the edge of the block.

    • Position
    • Position is used to set the placement of a block level element. Position has two parameters relative and absolute. Relative indicates that all positioning (e.g. left or top) is done with respect to the flow of the document. This is roughly equivalent to using the margin-left or margin-top properties. Absolute indicated that positioning is done with respect to the browser window; thus, an image positioned absolutely at 10 pixels left and 20 pixels top will appear in the upper left corner of the browser window regardless of where the rest of the document appears. So, even though the code:

      <img src="bee.gif" style="position:absolute; left:0px; top:0px">

      is inserted at this point in the document, the image appears at the absolute upper left hand corner of the browser (use ctrl home to view the image).

      Setting the position of a document creates an independent layer or sub-window within the main browser window. Care should be taken since these layers can overlap and block other elements.

      When creating a layer in the style sheet of the header or in an inserted style sheet, always use an ID, never use a Class.

    • Left & Top
    • Used with position to set the left side and top of the element. The parameters are numeric units (e.g. 20px).

    • Z-index
    • Sets the stacking order for positioned elements. The default value is 0. Positive values will appear above and negative values will appear below. Remember, it is possible to position layers so that they block other information, so check your page with multiple browsers and with multiple text sizes and display resolutions.

      This example demonstrates the use of various position parameters:

      This layer was created with the tag: <div id="level1">. The three layers in are defined as:

      #level1 {position: realative; border-style:ridge; border-width:thick; border-color:red; background: #0000FF; color: yellow; width: 500px; height: 500px; margin-left: 40px; padding: 20px; font-weight: bold;}

      #level2 {position: absolute; left:200px; top:300px; z-index: 1;}

      #level3 {position: absolute; left:100px; top:350px; height: 100px; width: 200px; overflow: auto; background: black; padding: 2px; z-index: 2;}

      Don't Panic
      This layer overlaps the picture below it because its z-index is set to 2 while the layer with the image has a z-index of 1.

      Note that the text in this box is yellow. This value is inherited from the base layer in which it appears.

      Note also that a vertical scroll bar is present because the overflow was set to Auto.
  12. Transitions

  13. Transitions are a new method of changing the value of a property. Hover over the picture below.

    Don't Panic

    The code for this is:

    img.fancy {
        border-style:ridge; border-width:5px; border-color:#996633;
        transition-property: border-width;
        transition-duration: 2s;
        transition-timing-function: linear;
        transition-delay: 1s;
    }
    
    img.fancy:hover {
        border-width: 20px;
    }
    

    Also notice that when you click on a link in the Table of Contents, the linked text turns red. The code for this is:

    a:target {
    		color:red;
    	}
    

    Both use psuedo-classes to transition elements. Transitions can also be done using javascript.