A CSS rule has two main parts: a selector, and one or more declarations.
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets:
p {color:red;text-align:center;}
A CSS comment begins with "/*", and ends with "*/".

Element selector

The default selector, name of a HTML element.
p {color:red;text-align:center;}

Id Selector (#)

The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
#para1 { text-align:center; color:red; }
<p id="para1">Hello World!</p>

Class Selector (.)

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
The class selector uses the HTML class attribute, and is defined with a "."
Common: .center { text-align:center; }
<h1 class="center">Center-aligned heading</h1>

HTML specific: p.center { text-align:center; }
Will now only work with p tag.

Group selectors (,)

Multiple selectors can be separated by a ','. De different selectors get the same properties:
h1,h2,p { color:green; }
h1, h2 and p will now be shown in green.

Nested selectors

.marked p { color:white; }
paragraphs with class marked will now be shown in white.


A group selector goes before a nested selector. So
.a .b,.c .d {…}
should be read as
.a .b {…}
.c .d {…}
So (a and b) or (c and d)
and not a and (b or c) and d


External style sheet

An external style sheet is ideal when the style is applied to many pages. Each page must link to the style sheet using the <link> tag:
<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

Internal style sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Inline style

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

ASP.NET selectors

asp:Label - use span
asp:Textbox - use input (unless multiline = True, then use the textarea selector)
asp:Panel - use legend (GroupingText)
asp:RadioButtonList - use label
asp:GridView - use table


1em = 12pt = 16px = 100%

Center a div in another div


<div id="content">
 This is a DIV block that is to be centred. I don't want the text to be centred in this div, though, just the block.

To achieve this:
1.Specify a width for the DIV block.
2.Set both its left and right margins to auto.
#content {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;

Center listitems in an unnumbered list


Just read the yellow block on the top.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License