CSS Tutorial

    Part ii - Properties

  • Ch4- Text Manipulation
  • Ch5- Fonts

    CSS Applications

  • Tabs
  • Multi-column Layouts
  • Dynamic Drop-down Menus
  • Slide Show
  • Borders
  • Webmail
  • Input Forms
  • File Viewer
  • Calendar

    FAQ

     

CSS Ch1- The Essentials

1.1 CSS Rules

A css rule is used to direct what in a HTML document to format and made up a selector and a declaration. A rule begins with a selector, followed by a curly brace "{", then one or more declarations, and ends with a right curly brace "}". 
    body{
       margin: 0;
       padding: 0;
       background: #000;
       font: 12px sans-serif;
    }
For readability, white stapce and line bracks are used. However you can crunch it all together.

1.2 Selectors

In CSS, a selector is the HTML element or elements to which a CSS rule is applied. It tells the browser what to format. The following is the body selector which applies to the margin, padding, background, and font properties of <body> element. 
    body{
        margin: 0;
        padding: 0;
        background: #000;
        font: 12px sans-serif;
    }

1.3 Declarations

Declarations are enclosed within curly braces to separate them from selectors. It is the combination of a CSS property and value and ends with a semi-colon. The colon is used to separate the property from the value. 
    body{
        margin: 0;
        padding: 0;
        background: #000;
        font: 12px sans-serif;
    }
In the above example, margin: 0; is a declaration of which margin is the property name and 0 is the value.

1.4 Grouping Selectors

You can group multiple selectors together in a single rule by providing a comma after each selector. The result is that the rule applies to more than one selector at a time. 
    h1, h2, h3, h5, h6{
        font-family: sans-serif;
        color: maroon;
        border-bottom: 1p solid rgb(200,200,200);
    }
This allows a rule to reference more than one HTML element at once. In the above example, the rule applies to the HTML elements, <h1>,<h2>,<h3>,<h5>, and <h6>.

1.5 CSS Comments

As is the case with HTML, comment text can be added to a style sheet as well. CSS supports multiline comments that begin with a forward slash and an asterisk (/*) and terminate with an asterisk and a forward slash (*/). 
   /* This is a comment */
   body{
      margin: 0;
      padding: 0;
      background: #00;
      font: 12px sans-serif;
   }

1.6 Strings

A string is any sequence of characters. For example, "Hello,World" is a string. Strings are enclosed within either single or double quotation marks.

One use of string in CSS is to specify a font that contains spaces in its name. Strings may also be used to include content in an HTMl document from a style sheet.
Example  
<html>
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="Content-Type"/>
<title>CSS Generated content</title>
<style type="text/css">
   div {
      font-family: "Times New Roman", Times, serif, sans-serif;
   }
   div::before {
     /*
      * This feature is supported by Safari, Firefox, or Opera.
      * IE 6 and IE 7 don't support it.
      */
      content: "I said, \"Hello, world!\"";
      background: black;
      color: white;
      margin-right: 25px;
   }
</style>
</head>
<body>
<div>The world said, "Hello, yourself!"</div>
</body>
</html>

1.7 Length and Measurement

There are two kinds of lengths used in CSs: relative and absolute. Absolute lengths are not dependent on any other measurement. An absolute measurement retains its length regardless of the environment (operating system, browser, or screen resolution of a computer monitor) in which it is applied.

Relative lengths, on the other hand, depend on the environment in which they are used, such as the computer monitor's screen resolution or the size of a font.

    References

    (1) CSS - Cascading Style Sheets for Web Design, 2nd Edition, (beginning).

KHMERCyber.com ©2008