CSS Help - CSS glossary

CSS glossary and useful CSS definitions

Absolute

Absolute positioning allows us to position an object using CSS to any position on the page right down to the pixel

Absolute postioning can be used for elements that would appear out of place if allowed to flow with the surrounding elements.

There are two types of positioning: absolute and relative. The CSS code is as follows:

tag {position: absolute; top>: 0px; bottom: 0px; left: 0px; right: 0px; }

You just add in which method of positioning you're using at the start, and then push the image out from the sides it's going to be closest to.

If we required an image to appear 66 pixels from the top of the page and 86 pixels in from the right, the CSS code we would use is a follows:

img {position: absolute; top: 46px; right: 80px; }

Active

Active is part of the dynamic-psuedo class and is most commonly used in button elements.

The :active pseudo-class applies while an element is being activated by the user. For example, between the time the user presses the mouse button and releases it.

A.menu:active
{
colour: #FFFFFF;
background:#003366;
text-decoration: none;
}

Attribute

A value associated with an element, consisting of a name, and an associated textual value.

Background

The 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.

Color

Colour is defined as is either a keyword or a numerical RGB specification.

There are 16 defined color name keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

For numerical RGB specifications hexidemical values are used and always preceed the # symbol - #RRGGBB. A shorthand value of the RGB specification is also used - #RGB.

Declaration

A declaration is the most basic of CSS syntaxes. It binds a value to a CSS property. CSS declaration is style attached to a specific selector. It consists of two parts; property which is equivalent of HTML attribute, e.g. font-size: and value which is equivalent of HTML value, e.g. 10pt. Properties are always ended with a colon.

A declaration block contains a series of declarations. It begins with a left curly brace - ( and ends with the matching right curly brace - ). In between lie semicolon-separated (";") style declarations.

em

Em is a proportional unit of length in CSS to scale properties in relation to an elements font size. If a font size is 12px then 1em is 12px for that element alone. 2 em for that element woul be 24px.

Float

Float is aproperty which can have the values left, right and none. With the value 'none', the element will be displayed where it appears in the text. With a value of 'left' ('right') the element will be moved to the left (right) and the text will wrap on the right (left) side of the element. With a value of 'left' or 'right', the element is treated as block-level (i.e. the 'display' property is ignored).

Font

CSS allows excellent control over the way your text is displayed. Edittable attibutes include colour, family, size, weight and style.

List

Lists are a good way of getting information across quickly to the user in a structured manner. There are three different lists we can produce - unordered, ordered and definitions lists. The appearance of list elements should be defined with CSS.

Unordered lists - The ul element is used to create an unordered list (a list of items that have no specified order, unlike a numbered list for example). Items in the list are defined with the li element.

Ordered lists - The ol element is used to create an ordered list (numbered). Items in the list are defined with the li element. An ordered list creates the same list as the previous example, but numbered rather than using bullet points.

Definition - The dl element is used to create an ordered list. Definition Lists consists of term/definition pairs. Terms are defined with the dt element, and definitions are defined with the dd element.

Margin

Margin properties specifiy the space around an element. CSS Margins are nearly identicle to the CSS Padding attribute except for one important difference: a margin defines the white space around an HTML element's border, while padding refers to the white space within the border.

Padding

CSS padding is the space between an element's border and the content within it. With CSS Padding you will be able to change the default padding that appears inside various HTML elements ( paragraphs, tables, etc ).

Position

CSS positioning enables you to plot and manipulate the exact position of your HTML elements. Position can be defined as absolute or relative.

Relative

Relative postioning changes the position of the HTML element relative to where it normally appears. If we had a header that appears at the top of our page, we could use relative positioning to move it a slightly to the right and down a couple of pixels.

There are four possible directions for defining relative positioning - left, right, up and down.

 

---

---