Home » CSS23 March 2007

Cascading StyleSheet (CSS) :: Property Value Pairs

CSS Syntax Introduction

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-family: “sans serif”}

If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

Properties

The different categories of property are explained below:

Text style properties

These properties affect how text appears on a page. The different text style properties are as under:

color

sets the foreground color of an element

{color: aqua}

{color: black} (default)

{color: blue}

{color: fuchsia}

{color: #808080}

{color: maroon}

{color: #ffa500}

font-weight

the weight of the font is how bold it is

{font-weight: normal} (default)

{font-weight: bold}

{font-weight: bolder} (use of relative keywords: bolder, lighter)

{font-weight: lighter}

bolder specifies that the text should be one degree bolder than the parent element and lighter specifies that the text should be one degree lighter than parent element

{font-weight: 100} (use of numeric values: 100,200,300,400,500,600,700,800,900)

Each value is one degree bolder than the previous value. normal is equivalent to 400 and bold is equivalent to 700.

font-family

this property specifies a hierarchy list of preferred fonts that a browser should use to draw the element

{font-family: Verdana, Arial, Helvetica, sans-serif}

font-size

specifies how large text appears on a web page.

{font-size: 2point} (abbrev. pt)

{font-size: 2em} (abbrev. em)

{font-size: 2ex} (abbrev. ex)

{font-size: 2pica} (abbrev. pc)

{font-size: 2pixel} (abbrev. px)

{font-size: 2inche} (abbrev. in)

{font-size: 10millimeter} (abbrev. mm)

{font-size: 5centimeter} (abbrev. cm)

{font-size: small}

{font-size: larger}

{font-size: smaller}

{font-size: xx-small}

{font-size: x-small}

{font-size: medium} (default)

{font-size: large}

{font-size: x-large}

{font-size: xx-large}

font-variant

this specifies that the text should appear in small capitals

{font-variant: normal } (default)

{font-variant: small-caps}

normal specifies that the text should appear using capital or lowercase letters as it appears in source and small-caps specifies that the lower case letters (but not capitals) should appear as small capital letters

font-style

{font-style: normal} (default)

{font-style: italic}

{font-style: oblique}

text-decoration

{text-decoration: none} (default)

{text-decoration: underline}

{text-decoration: overline}

{text-decoration: line-through}

{text-decoration: blink}

text-transform

this allows you to specify the capitalization of text

{text-transform: capitalize} (the first letter of each word is in capital letters)

{text-transform: uppercase} (every letter is in uppercase)

{text-transform: lowercase} (every letter is in lowercase)

Text Layout Properties

letter-spacing

this gives you control over the space between characters

{letter-spacing: normal} (default)

{letter-spacing: 2px}

{letter-spacing: 2in}

Other units of measurement are em, ex, pica (pc), point (pt), pixel (px), millimeter (mm), centimeter (cm), inch (in).

word-spacing

this gives you control over the space between words

{word-spacing: normal} (default)

{word-spacing: 2px} (other example of length units are given above)

line-height

this property sets the distance between adjacent lines

{line-height: normal} (default)

{line-height: 1.2}

{line-height: 120%}

{line-height: 2px}

vertical-align

this property gives control over how elements align vertically across the page

{vertical-align: baseline} (default)

{vertical-align: middle}

{vertical-align: sub}

{vertical-align: super}

{vertical-align: text-top}

{vertical-align: text-bottom}

{vertical-align: top}

{vertical-align: bottom}

{vertical-align: 20%}

text-indent

this property enables you to control how the first line of any element is indented, or outdented

{text-indent: 5px}

{text-indent: 10%}

text-align

{text-align: left}

{text-align: right}

{text-align: center}

{text-align: justify}

direction

this property specifies the base direction for text

{direction: rtl} (means the text should flow from right to left)

{direction: ltr} (means the text should flow from left to right) (default)

Background properties

background-color

specifies background color of an element

{background-color: maroon}

{background-color: #336699}

background-image

{background-image: url(image1.gif)}

background-attachment

specifies whether the background image should scroll or remain fixed

{background-attachment: scroll} (default)

{background-attachment: fixed}

background-repeat

{background-repeat: repeat} (tiling the background image horizontally and vertically)

{background-repeat: repeat-x} (tiles an image horizontally but not vertically)

{background-repeat: repeat-y} (tiles an image vertically but not horizontally)

{background-repeat: no-repeat} (makes the image appear once and doesn’t tile image)

background-position

specifies where a background image is placed

{background-position: 0% 0%} (default)

{background-position: 15% 25%}

{background-position: 20px 20px}

{background-position: top left}

{background-position: left top}

{background-position: top}

{background-position: top center}

{background-position: right top}

{background-position: left center}

{background-position: right center}

{background-position: bottom left}

{background-position: bottom-center}

{background-position: bottom-right}

background

this is a shorthand property that lets you set any or all background properties at once

{background: url(http://www.chapagain.com.np/gifs/mukesh1.gif) fixed no-repeat top center} is equivalent to the below four properties:

background-image: url(http://www.chapagain.com.np/gifs/mukesh1.gif);

background-attachment: fixed;

background-repeat: no-repeat;

background-position: top center;

Border properties

{border-width: thin}

{border-width: medium} (default)

{border-width: thick}

{border-top-width: 2pt}

{border-left-width: medium}

{border-right-width: 2em}

{border-bottom-width: 2px}

{border-color: #336699}

{border-color: #336699 #003366}

{border-color: maroon green blue}

{border-color: maroon green blue yellow}

{border-style: none} (default)

{border-style: dotted dashed}

{border-style: solid}

{border-style: solid double groove}

{border-style: none ridge inset outset}

border, border-top, border-bottom, border-left, border-right let you specify with one property any or all of border-style, border-width, border-color values for each edge respectively, or the entire border.

{border-top: red thick solid}

Margin properties

A margin is the space between an element and the elements to its top, left, bottom and right. Margin can be negative values.

{margin: auto}

{margin-top: 20%}

{margin-bottom: 2px}

{margin-left: -2cm}

{margin-bottom: 2em}

Padding properties

Padding is the space between the edge of an element (its border) and its contents. Padding cannot take negative values.

{padding: 4px}

{padding-right: 20%}

{padding-left: 9mm}

{padding-bottom: 1in}

Page Layout properties

position

this property is used to determine what the coordinates are with respect to, or how the element will be drawn

{position: static} (default)

{position: relative}

{position: absolute}

{position: fixed}

top

specifies where the top of an element will be placed

{top: auto} (this is default)

{top: 4px} (using length values)

{top: 4%} (using percentage values)

left

specifies where the left of an element will be placed

{left: auto}

{left: 4px}

{left: 55%}

bottom

{bottom: auto}

{bottom: 4in}

{bottom: 9%}

right

{right: auto}

{right: 4cm}

{right: 40%}

width

specifies how wide an element will appear on the page

{width: auto} (default)

{width: 5%}

{width: 5em}

min-width

allows you to specify a minimum width for an element

{min-width: auto} (default)

{min-width: 5%}

{min-width: 5mm}

max-width, height, max-height, min-height are similar as above

z-index

determine which elements will appear in front of others when they overlap

{z-index: auto} (default)

{z-index: 5} (using integer values)

visibility

lets you make an element either visible or invisible

{visibility: inherit} (having same visibility as its parent) (default)

{visibility: visible}

{visibility: hidden}

overflow

let you specify how a browser should display an element where its contents do not fit into its width and height

{overflow: visible} (default) (means browser should increase the actual width and/or height of the element to display all of its contents)

{overflow: scroll} (means that the browser should place scrollbars on the element whether or not the contents of the element have overflowed)

{overflow: auto} (means that the browser should add scrollbars as needed to enable users to scroll horizontally and/or vertically to show hidden contents of the element)

{overflow: hidden} (display only the contents which are visible within the specified width and height)

float

this property takes an element out of the flow and place it to the right or left of other elements in the same parent element

{float: none} (this is default)

{float: right}

{float: left}

clear

this property can be used in conjunction with float to specify whether and or where an element allows floating alongside it

{clear: none} (default) (element allows floating on either side)

{clear: left} (element doesn’t allow floating on its left)

{clear: right} (element doesn’t allow floating on its right)

{clear: both} (element doesn’t allow floating either on its left or its right)

User Interface properties

cursor

this property sets the shape of the cursor when the mouse is hovering over a selected element

{cursor: auto} (default)

{cursor: crosshair}

{cursor: default}

{cursor: pointer}

{cursor: move}

{cursor: *-resize} (Indicates that the edge is to be moved. * is replaced with N, S, E, W, NE, NW, SE, SW which are directions, for each of the edges)

{cursor: text}

{cursor: wait}

{cursor: help}

outline

sets the outline around an element

outline is the shorthand for three properties outline-color, outline-width and outline-style

{outline-color: invert} (default) (indicates that the outline will be visible regardless of background color)

{outline-color: #ffa500}

{outline-color: purple}

{outline-style: none} (default)

{outline-style: dotted}

{outline-style: dashed}

{outline-style: solid}

{outline-style: double}

{outline-style: groove}

{outline-style: ridge}

{outline-style: inset}

{outline-style: outset}

{outline-width: thick}

{outline-width: medium} (default)

{outline-width: thick}

{outline-width: 4px}

Element Type properties

display

determines how an element will be drawn on the page

{display: none}

{display: block}

{display: inline} (default)

{display: list-item}

{display: inline-block}

{display: run-in}

white-space

this property applies only to block elements, and specifies what should be done by the browser with extraneous whitespace (tabs, extra spaces, returns and so on)

{white-space: none} (default) (whitespace are handled in traditional manner. Any tabs, extraneous spacing will be ignored.)

{white-space: pre} (keeps all whitespace as it appears in the element)

{white-space: nowrap} (contents of the element will only wrap (break to a new line) when an explicit line break <br> is in the contents)

list-style-type

lets you determine what maker (or bullet point) if any is associated with a list item

{list-style-type: none}

{list-style-type: disc} (default)

{list-style-type: circle}

{list-style-type: square}

{list-style-type: decimal}

{list-style-type: decimal-leading-zero}

{list-style-type: lower-roman}

{list-style-type: upper-roman}

{list-style-type: lower-alpha}

{list-style-type: upper-alpha}

{list-style-type: lower-greek}

{list-style-type: upper-latin}

{list-style-type: lower-latin}

{list-style-type: hebrew}

{list-style-type: armenian}

{list-style-type: georgian}

{list-style-type: cjk-ideographic}

{list-style-type: hiragana}

{list-style-type: katakana}

{list-style-type: hiragana-iroha}

{list-style-type: katakana-iroha}

list-style-image

specifies an image by URL as the maker for the list item

{list-style-image: none} (default)

{list-style-image: url(image1.gif)}

list-style-position

{list-style-position: outside} (default)

{list-style-position: inside}

list-style

this property is the shorthand property that allows you to specify and set all list style property value with one property

{list-style: disc url(image1.gif) inside}

table-layout

enables the specification of which of the approach is taken to laying out a table

{table-layout: auto} (default) (recalculate the row and column and cell sizes based on their content)

{table-layout: fixed} (ignore any content and simply use the height and width specified for rows and columns)

Reference:

[1] www.westciv.com/style_master/academy/css_tutorial/introduction/index.html

[2] http://www.w3schools.com/css/css_font.asp

CSS

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed