Home :: Design and Layout


	Home \| Docs

Categories

Home - Design and Layout - CSS basics
CSS basics

The most important term in CSS (Cascading Style Sheets) is a style. A style is a set of formatting and design rules that tell a browser how to present elements of the HTML document. If you create document using simple HTML language you should type the same attributes (font, color, size, etc) for the large amount of the same tags. So if you decide to change the font size of a text you have to retype the same attributes many times.

Using of CSS allows you to resolve this problem more efficiently. You will need to define a set of attributes as a style one time only. Afterwards just specify this style for the appropriate elements.

Furthermore, you can define styles for your HTML document in external file, so styles could be applied for another HTML documents. Thus if you need to change font size in several HTML documents, you will have to change this attribute in one place only.

In general the CSS basic syntax is looking in the following way:

1.
2.
3.
4.
5.
selector {attribute: value;
                   attribute: value;
                   attribute: value;
                   attribute: value;
…}

Selector is simply an element that is linked to a particular style. The selector in the following example

1.
2.
3.
p {background: blue;
margin-top: 6px;
margin-bottom: 6px;}

is p (paragraph element).

A selector could have different classes, allowing the same element to have different styles. For example,

1.
2.
p.note {background: blue;}
p.warning {background: red;}

Classes may also be declared without an associated element:

1.
.note {background: blue;}

In this case, the note class may be used with any element.

For example,

1.
<a href="http:/sp-cart.com" class="note">Click here to contact us</a>

There are various ways of linking style rules to HTML documents:

Inlining style

Linking to an external style sheet

Embedding a style sheet

Importing a style sheet

SP-Cart Shopping Cart software uses the way of linking to an external style sheet. An external style sheet is linked to an HTML document through HTML link element. External style sheet is a *.css file which contains style definitions.

For example, in this case styles will be loaded from styles.css file:

1.

<link rel=stylesheet href=”/skins/CUSTOMER_SKIN_NAME/customer/styles.css” type=”text/css”>

If you decide to change styles in SP-Cart Shopping Cart software by yourself, you should edit the following CSS files:

administration area styles: SPCART_DIRECTORY/skins/ADMIN_SKIN_NAME/admin/styles.css

customer front-end styles: SPCART_DIRECTORY/skins/CUSTOMER_SKIN_NAME/customer/styles.css

For more information and extending your knowledge about CSS you can use the following references:

http://www.w3.org/Style/css - The W3C's CSS home page
http://www.w3.org/TR/CSS21/css2.zip - CSS 2.1 Specification
http://style.webreview.com – Web Review Style Sheets Reference Guide

<< Read Previous Read Next>>