CSS Language Guide

Posted on 14 September 2007 • BlogCSS & HTMLTechnology

This post is all about CSS (Cascading Style Sheets) and 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).

Here will follow the rest of this little beastie…

General Information

TRouBLe

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

margin: 1px 2px 3px 1px;

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.

Background CSS Syntax

/* Set Background Colour */
background-color: yellow;

background-color: #00ff00;
background-color: transparent;
background-color: rgb(250,0,255);

/* Background Formatting */
background-image: url('image.jpg');
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;

background-repeat: repeat-y;
background-repeat: no-repeat;
background-attachment: fixed;

Background Single Declaration Shorthand Form

<p style="background: #00ff00 fixed center; color: red;">
<div style="background-image: url('image.jpg');"></div>

Background Properties

Property Description Values IE F N W3C
background A shorthand property for setting all background properties in one declaration background-color
background-image
background-repeat background-attachment background-position
4 1 6 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
4 1 6 1
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
4 1 4 1
background-image Sets an image as the background url
none
4 1 4 1
background-position Sets the starting position of a background image top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
4 1 6 1
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
4 1 4 1

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.

Text CSS Syntax

/* Set Colour */
color: #00ff00;
color: black;
color: rgb(0,0,255);

background-color: yellow;

/* Character Space */
letter-spacing: -3px;
letter-spacing: 0.5cm;

/* Align Text */
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right

/* Decoration */
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}

a {text-decoration: none}
a {text-decoration: blink}

/* Indent */
text-indent: 1cm;

/* Characters */
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

Text Single Declaration Shorthand Form

<p style="text-transform: uppercase; text-align: left">

Text Properties

Property Description Values IE F N W3C
color Sets the color of a text color 3 1 4 1
direction Sets the text direction ltr
rtl
6 1 6 2
letter-spacing Increase or decrease the space between characters normal
length
4 1 6 1
text-align Aligns the text in an element left
right
center
justify
4 1 4 1
text-decoration Adds decoration to text none
underline
overline
line-through
blink
4 1 4 1
text-indent Indents the first line of text in an element length
%
4 1 4 1
text-shadow none
color
length
text-transform Controls the letters in an element none
capitalize
uppercase
lowercase
4 1 4 1
unicode-bidi normal
embed
bidi-override
5 2
white-space Sets how white space inside an element is handled normal
pre
nowrap
5 1 4 1
word-spacing Increase or decrease the space between words normal
length
6 1 6 1

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

/* Set Font */
font-family: Times, sans-serif;

/* Set Size */
font-size: 150%
font-size: xx-small

font-size: 22px

/* Set Style */
font-style: italic
font-style: normal

/* Set Variant */

font-variant: normal
font-variant: small-caps

/* Set Weight */
font-weight: normal
font-weight: bold
/* Browser Supported Sans-Serif fonts */
font-family: sans-serif
font-family: Andale Mono
font-family: Arial
font-family: Arial Black
font-family: Impact
font-family: Trebuchet MS
font-family: Verdana

/* Browser Supported Cursive fonts */
font-family: cursive
font-family: Comic Sans MS

/* Browser Supported Fantasy fonts */
font-family: fantasy

/* Browser Supported Generic Families */
font-family: monospace
font-family: Courier New

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

Font Single Declaration Shorthand Form

<p style="font: italic small-caps 12px arial">
<p style="font: bold 10px verdana">

Font Properties

Property Description Values IE F N W3C
font A shorthand property for setting all of the properties for a font in one declaration font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu

message-box
small-caption
status-bar

4 1 4 1
font-family A prioritized list of font family names and/or generic family names for an element family-name
generic-family

sans-serif — ABCMabcm1230
Andale Mono — ABCMabcm1230
Arial — ABCMabcm1230
Arial Black — ABCabc1230
Impact — ABCMabcm1230
Trebuchet MS — ABCMabcm1230
Verdana — ABCMabcm1230
cursive — ABCMabcm1230
Comic Sans MS — ABCMabcm1230
fantasy — ABCMabcm1230
monospace — ABCMabcm1230
Courier New — ABCMabcm1230
3 1 4 1
font-size Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
3 1 4 1
font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font none
number
2
font-stretch Condenses or expands the current font-family normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
2
font-style Sets the style of the font normal
italic
oblique
4 1 4 1
font-variant Displays text in a small-caps font or a normal font normal
small-caps
4 1 6 1
font-weight Sets the weight of a font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4 1 4 1

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 CSS Syntax

/* Set Background Colour */
border-style: dotted;
border-color: cyan;
border-right: 1px solid #ffeedd;
border: 2px 1px 0px 10px;

Border Single Declaration Shorthand Form

<p style="border-right: 1px solid #ffeedd;">

Border Radius

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

Description CSS v3 (Draft) Mozilla WebKit (Safari)
all corners border-radius -moz-border-radius -webkit-border-radius
Top Left border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
Top Right border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
Bottom Right border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
Bottom Left border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius

Sample CSS:

.all-round ul {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  -khtml-border-radius:5px;

}

.top-round ul {
  border-top-left-radius:5px;
  -moz-border-radius-topleft:5px;
  -webkit-border-top-left-radius :5px;
  border-top-right-radius:5px;
  -moz-border-radius-topright:5px;
  -webkit-border-top-right-radius:5px;

}

Border Properties

Property Description Values IE F N W3C
border A shorthand property for setting all of the properties for the four borders in one declaration border-width
border-style
border-color
4 1 4 1
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width
border-style
border-color
4 1 6 1
border-bottom-color Sets the color of the bottom border border-color 4 1 6 2
border-bottom-style Sets the style of the bottom border border-style 4 1 6 2
border-bottom-width Sets the width of the bottom border thin
medium
thick
length
4 1 4 1
border-color Sets the color of the four borders, can have from one to four colors color 4 1 6 1
border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width
border-style
border-color
4 1 6 1
border-left-color Sets the color of the left border border-color 4 1 6 2
border-left-style Sets the style of the left border border-style 4 1 6 2
border-left-width Sets the width of the left border thin
medium
thick
length
4 1 4 1
border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width
border-style
border-color
4 1 6 1
border-right-color Sets the color of the right border border-color 4 1 6 2
border-right-style Sets the style of the right border border-style 4 1 6 2
border-right-width Sets the width of the right border thin
medium
thick
length
4 1 4 1
border-style Sets the style of the four borders, can have from one to four styles none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width
border-style
border-color
4 1 6 1
border-top-color Sets the color of the top border border-color 4 1 6 2
border-top-style Sets the style of the top border border-style 4 1 6 2
border-top-width Sets the width of the top border thin
medium
thick
length
4 1 4 1
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin
medium
thick
length
4 1 4 1

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!

Margin CSS Syntax

/* Set Margins */
margin-left: 2cm;
margin-top: 2cm;
margin: 1px 2cm 3px 4em;

Margin Single Declaration Shorthand Form

<p style="margin: 1cm 2cm 3cm 1cm;">

Margin Properties

Property Description Values IE F N W3C
margin A shorthand property for setting the margin properties in one declaration margin-top
margin-right
margin-bottom
margin-left
4 1 4 1
margin-bottom Sets the bottom margin of an element auto
length
%
4 1 4 1
margin-left Sets the left margin of an element auto
length
%
3 1 4 1
margin-right Sets the right margin of an element auto
length
%
3 1 4 1
margin-top Sets the top margin of an element auto
length
%
3 1 4 1

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.

Padding CSS Syntax

/* Set Padding */
padding: 10px;
padding: 10px 2px 5px 2px;

padding-bottom: 10px;

Padding Single Declaration Shorthand Form

<p style="padding: 4px;">

Padding Properties

Property Description Values IE F N W3C
padding A shorthand property for setting all of  the padding properties in one declaration padding-top
padding-right
padding-bottom
padding-left
4 1 4 1
padding-bottom Sets the bottom padding of an element length
%
4 1 4 1
padding-left Sets the left padding of an element length
%
4 1 4 1
padding-right Sets the right padding of an element length
%
4 1 4 1
padding-top Sets the top padding of an element length
%
4 1 4 1

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.

List CSS Syntax

/* Item Markers Unordered */
ul list-style-type: disc
ul list-style-type: circle

ul list-style-type: square
ul list-style-type: none

/* Item Markers Ordered */
ol list-style-type: decimal

ol list-style-type: lower-alpha
ol list-style-type: upper-alpha
ol list-style-type: lower-roman
ol list-style-type: upper-roman

/* Item Markers Images */
ul list-style-image: url('arrow.gif')

/* Item Markers Placement */
ul normal
ul list-style-position: inside

ul list-style-position: outside

List Single Declaration Shorthand Form

<p style="list-style: square inside url('arrow.gif');">

List Properties

Property Description Values IE F N W3C
list-style A shorthand property for setting all of the properties for a list in one declaration list-style-type
list-style-position
list-style-image
4 1 6 1
list-style-image Sets an image as the list-item marker none
url
4 1 6 1
list-style-position Sets where the list-item marker is placed in the list inside
outside
4 1 6 1
list-style-type Sets the type of the list-item marker none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
4 1 4 1
marker-offset auto
length
1 7 2

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.

Dimension CSS Syntax

/* Set Dimension */
height: 10px;

line-height: 0.6cm;
min-height: 200px;
width: 2.2em;
max-width: 700px;

Dimension Single Declaration Shorthand Form

<p style="line-height: 0.6cm;">

Dimension Properties

Property Description Values IE F N W3C
height Sets the height of an element auto
length
%
4 1 6 1
line-height Sets the distance between lines normal
number
length
%
4 1 4 1
max-height Sets the maximum height of an element none
length
%
1 6 2
max-width Sets the maximum width of an element none
length
%
1 6 2
min-height Sets the minimum height of an element length
%
1 6 2
min-width Sets the minimum width of an element length
%
1 6 2
width Sets the width of an element auto
%
length
4 1 4 1

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 CSS Syntax

/* Set Classification */
display: inline;
display: none;
display: block;

float: right;
position: absolute;
cursor: crosshair;

Classification Single Declaration Shorthand Form

<p style="display: none;">

See www.w3schools.com CSS Classification for details and examples.

Classification Properties

Property Description Values IE F N W3C
clear Sets the sides of an element where other floating elements are not allowed left
right
both
none
4 1 4 1
cursor Specifies the type of cursor to be displayed url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4 1 6 2
display Sets how/if an element is displayed none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4 1 4 1
float Sets where an image or a text will appear in another element left
right
none
4 1 4 1
position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed
4 1 4 2
visibility Sets if an element should be visible or invisible visible
hidden
collapse
4 1 6 2

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 CSS Syntax

/* Set Positioning */

position: relative;
clip: rect(0px 50px 200px 0px);
overflow: hidden;

z-index: 1;

Positioning Single Declaration Shorthand Form

<div style="position: relative;"></div>

Positioning Properties

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

Property Description Values IE F N W3C
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element auto
%
length
5 1 6 2
clip Sets the shape of an element. The element is clipped into this shape, and displayed shape
auto
4 1 6 2
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element auto
%
length
4 1 4 2
overflow Sets what happens if the content of an element overflow its area visible
hidden
scroll
auto
4 1 6 2
position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed
4 1 4 2
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element auto
%
length
5 1 6 2
top Sets how far the top edge of an element is above/below the top edge of the parent element auto
%
length
4 1 4 2
vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Sets the stack order of an element auto
number
4 1 6 2

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 Syntax

/* Basic syntax */

selector: pseudo-class {property: value};
/* Classes within pseudo-classes */
selector.class: pseudo-class {property: value}
/* Pseudo-classes combined with CSS classes:  */
a.red: visited {color: #FF0000}

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.
/* Link classes */
a: link {color: #FF0000}        /* unvisited link */

a: visited {color: #00FF00}     /* visited link */
a: hover {color: #FF00FF}       /* mouse over link */
a: active {color: #0000FF}      /* selected link */

Pseudo-Class First-Child

The :first-child pseudo-class matches a specified element that is the first child of another element.

/* Format all paragraphs*/
p:first-child {text-indent: 25px}

p:first-child em {font-weight: bold}
a:first-child {text-decoration: none}
/* Format div paragraphs only */

div > p:first-child {text-indent: 25px}

Pseudo-Class Languages

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

q:lang(no) {quotes: "~" "~"}

Pseudo-Class Properties

Pseudo-class Purpose IE F N W3C
:active Adds special style to an activated element 4 1 8 1
:focus Adds special style to an element while the element has focus 2
:hover Adds special style to an element when you mouse over  it 4 1 7 1
:link Adds special style to an unvisited link 3 1 4 1
:visited Adds special style to a visited link 3 1 4 1
:first-child Adds special style to an element that is the first child of some other element 1 7 2
:lang Allows the author to specify a language to use in a specified element 1 8 2

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-Element Syntax

/* Basic syntax */
selector:pseudo-element {property: value}
/* Classes within pseudo-classes */
selector.class:pseudo-element {property: value}

/* Pseudo-elements combined with CSS classes
p.article:first-letter {color: #FF0000} */
/* Several pseudo-elements can be combined */
p {font-size: 12pt}
p:first-letter {color: #FF0000; font-size: 200%}

p:first-line {color: #0000FF}

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
p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}

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
p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}

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.

h1:before {content: url(beep.wav)}

h1:after {content: url(beep.wav)}

Pseudo-Element Properties

Pseudo-element Purpose IE F N W3C
:first-letter Adds special style to the first letter of a text 5 1 8 1
:first-line Adds special style to the first line of a text 5 1 8 1
:before Inserts some content before an element 1.5 8 2
:after Inserts some content after an element 1.5 8 2

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.

Media Type CSS Syntax

<style>
  @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} }
  @media print { p.test {font-family:times,serif; font-size:10px} }
  @media screen, print { p.test {font-weight:bold} }
</style>

Media Type Properties

Media Type Description
all Used for all media type devices
aural Used for speech and sound synthesizers
braille Used for braille tactile feedback devices
embossed Used for paged braille printers
handheld Used for small or handheld devices
print Used for printers
projection Used for projected presentations, like slides
screen Used for computer screens
tty Used for media using a fixed-pitch character grid, like teletypes and terminals
tv Used for television-type devices

CSS Units

CSS Unit Properties

Unit Description
% percentage
in inch
cm centimeter
mm millimeter
em one em is equal to the current font size of the current element
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)

CSS Colours

CSS colours can be defined in a variety of ways.

Colour Names CSS Syntax

A collection of names supported by most browsers.

background: white;
background: aquamarine;

Colour Hex Values CSS Syntax

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

background: #000000;  /* black */
background: #e0f72a;
background: #ffffff;  /* white */

Colour RGB Values CSS Syntax

  • Colour RGB — rgb(255,146,20) — rgb codes from 0 (black) to 255 (white).
background: rbg(255,255,255);

Colour RGB Percentage Values CSS Syntax

  • Percentage RBG — rgb(100%,41%,2%) — percentage codes from 0% (black) to 100% (white).
background: rbg(100%,10%,88%);

Colour Properties

Unit Description
color_name A color name — e.g. red
#rrggbb A HEX number — e.g. #ff0000
rgb(x,x,x) An RGB value — e.g. rgb(255,0,0)
rgb(x%, x%, x%) An RGB percentage value — e.g. rgb(100%,0%,0%)