CSS Language Guide

   CSS Language Guide

This page contains a guide to CSS Markup techniques. Each section contains:
 * CSS Syntax.
 * Single Declaration Shorthand Form which can be used in the markup of an HTML page.
 * CSS Properties Table with the complete list of CSS syntax for each type of CSS call. This includes columns indicating: Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the W3C column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

TRouBLe
When declaring properties you order them Top, Right, Bottom, Left, or TRBL: stay out of TRouBLe by doing it Top Right Bottom Left.

Class vs ID

 * .class — use the class selector for repeated elements.
 * #id — use the id selector for unique elements.

Background Tags
The CSS background properties allow you to control the background color of an element, set an image as the background, repeat a background image vertically or horizontally, and position an image on a page.

Text Tags
The CSS text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between characters in a text, align a text, decorate a text, indent the first line in a text, and more.

Font Tags
The CSS font properties allow you to change the font family, boldness, size, and style of a text element. In CSS1 fonts are identified by a font name. If a browser does not support the specified font, it will use a default font.

Font CSS Syntax
See upsdell.com Browser Support Fonts for chart of browser implementation.

Border Tags
The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element.

Border Radius
Define border radius. Does not work for IE and some other browsers.

Sample CSS:

Margin Tags
CSS margin properties define the space around elements. It is possible to use negative values to overlap content (some IE problems with negative values). The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.

Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!

Padding Tags
CSS padding properties define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once.

List Tags
CSS list properties allow you to place the list-item marker, change between different list-item markers, or set an image as the list-item marker. These can be a powerful tool for creating Navigation Menus and are highly recommended for this.

Dimension Tags
CSS dimension properties allow you to control the height and width of an element. It also allows you to increase the space between two lines.

Classification Tags
CSS classification properties allow you to control how to display an element, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and how to control the visibility of an element.

Classification Single Declaration Shorthand Form
See www.w3schools.com CSS Classification for details and examples.

Positioning Tags
CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

Positioning Properties
See www.w3schools.com CSS Positioning for details and examples.

Pseudo-Class Tags
CSS pseudo-classes are used to add special effects to some selectors such as adding different colours to a link. Pseudo-class names are not case-sensitive.

Pseudo-Class Hyperlinks (Anchors)
Anchor Pseudo-classes are used to format hyperlinks active, visited, unvisited, or when you mouse over a link can all be displayed in different ways:


 * Note: a:hover MUST come after a:link and a:visited.
 * Note: a:active MUST come after a:hover.

Pseudo-Class First-Child
The  pseudo-class matches a specified element that is the first child of another element.

Pseudo-Class Languages
The  pseudo-class allows you to define special rules for different languages, such as defining the type of quotation marks for elements with a lang attribute.

Pseudo-Element Tags
CSS pseudo-elements are used to add special effects to some selectors such as adding an effect to the first letter or first line of text.

Pseudo First Line Element
The :first-line pseudo-element can only be used with block-level elements:
 * font properties
 * color properties
 * background properties
 * word-spacing
 * letter-spacing
 * text-decoration
 * vertical-align
 * text-transform
 * line-height
 * clear

Pseudo First Letter Element
The :first-letter pseudo-element can only be used with block-level elements.
 * font properties
 * color properties
 * background properties
 * margin properties
 * padding properties
 * border properties
 * text-decoration
 * vertical-align (only if 'float' is 'none')
 * text-transform
 * line-height
 * float
 * clear

Pseudo Before & After Elements
The :before pseudo-element can be used to insert some content before an element such as playing a sound before each occurence of a header element. The :after pseudo-element can be used to insert some content after an element.

Media Type Tags
The @media rule allows different style rules for different media in the same style sheet such as having a printer or pda version.

CSS Colours
CSS colours can be defined in a variety of ways.

Colour Names CSS Syntax
A collection of names supported by most browsers.

Colour Hex Values CSS Syntax
Hex codes which make up the RGB value of colours. From #00 (black) to #ff (white).

Colour RGB Values CSS Syntax

 * Colour RGB — rgb(255,146,20) — rgb codes from 0 (black) to 255 (white).

Colour RGB Percentage Values CSS Syntax

 * Percentage RBG — rgb(100%,41%,2%) — percentage codes from 0% (black) to 100% (white).

[[Image:Icon_Css_File_40px.png]] Fishcakes Wiki Reference Files

 * [[Image:Icon_Css_File_20px.png]] Fishcakes CSS Language — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Fishcakes CSS Colours — Fishcakes Wiki Reference File.
 * [[Image:Icon_Css_File_20px.png]] Fishcakes Lovely Colours — Fishcakes Wiki Reference File.