CSS coding standards

1. Introduction

The requirements below apply to CSS code used in LiteCommerce software.

2. Base standard

Not available.

3. CSS code. General requirements

3.1 Including CSS styles in HTML documents

3.1.1 Inline descriptions

Make inline descriptions by describing the style directly in the style attribute of the respective object on the page. Example:

<div style="visibility: hidden; position: absolute; left: 1; top:1; width: 660; height: 480;">...</div>

Using inline CSS code is highly discouraged, except when the style is unique and guaranteed to not repeat on the same or other pages.

3.1.2 Descriptions in <style>...</style> blocks

When making style descriptions directly on an HTML page, enclosed the style description in the <style>...</style> blocks. This is a good way to describe the classes, unique for the page but not repeating anywhere else on the website.

Example:

<style type="text/css">
body, 
td, 
div, 
h1, 
p 
{
  font-family:  Verdana, Tahoma, Arial, Sans-Serif;
}
body {
  padding: 0px;
  margin: 0px;
}
p {
  padding: 0px 0px 5px 0px;
  margin: 0px;
}
ul {
  margin: 0px 0px 5px 20px;
}
ol {
  margin: 0px 0px 5px 30px;
}
form {
  margin-top: 0px;
  margin-bottom: 0px;
}
b {
  font-weight: bold;
}
a img {
  border: none;
}
</style>

3.1.3 Descriptions in external .css files

Place descriptions of styles used on several pages of a website, even united by a single template, in external .css files. Include that style file in an HTML document with:

<link rel="stylesheet" href="default.css" type="text/css" />

3.2 Acceptable units

Different browsers interpret font and padding/margin units different ways. This standard sets rules for acceptability and unit values for proper appearance.

3.2.1 Font sizes and families

Set font sizes only in block structures of the lowest level; that means:

• Semantic markup tags (except <big> and <small>) may not modify font size.
• Never allow embedding two blocks with a relative font size.
• Set font sizes for classes only, not for specific HTML tags.
• Using those classes in tags <div> and <span> is not recommended; using them in tags <td> and <li> is allowed on a condition that no <div> or <span> tags with similar font-setting classes are included in the latter.
• It is recommended to set font families in the same structures where you set font size.
• It is allowed to set font families in other structures.
• When setting a font family, it is recommended to specify one of 100% compatible analogs (serif, sans, monospace).

3.2.2 Units of measurement

• To set absolute font size values, use pixels — px.
• To set relative font size values, use percents — %.
• To set relative attribute values like left, top, width, height, padding, margin, etc., use pixels — px (if the value is modified by the scipt, also specify the units).
• To set color values, use the hexadecimal format #rrggbb (use lowercase letters a–f). It is allowed to assign color values using color name properties, such as “red”.

3.3. Sample style blocks for certain tags

To achieve browser compatibility and minimize the amount of CSS code, you may have to redefine or additionally define certain tags. Here is a sample block that redefines the style for most commonly used tags:

body, 
div, 
th,
td,
p,
input,
select,
textarea,
tt 
{
  font-family: verdana, arial, helvetica, sans-serif;
  color: #000000;
  font-size: 10px;
}
h1 {
  font-size: 15px;
}
h2 {
  font-size: 13px;
}
h3 {
  font-size: 12px;
}
body {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: #000000;
}
ul {
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 20px;
  margin-right: 0px;
}
ol {
  margin-top: 0px;
  margin-bottom: 5px;
  margin-left: 20px;
  margin-right: 0 px;
}
form {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}
b {
  font-weight: bold;
}
a img {
  border: none;
}
hr {
  height: 1px;
  background-color: #444444;
  color: #444444;
}

3.4 Formatting

The recommended formatting for CSS code is available in 3.3. It is also recommended to use same formatting for the entire website.