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