Do not leave spaces between the property value and the units! "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera.
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
Do NOT start a class name with a number! This is only supported in Internet Explorer.
If the link to the external style sheet is placed after the internal style sheet in HTML , the external style sheet will override the internal style sheet!
If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).
When setting the style for several link states, there are some order rules:
* a:hover MUST come after a:link and a:visited
* a:active MUST come after a:hover
Explanation of the different parts:
* Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
* Border - A border that goes around the padding and content. The border is affected by the background color of the box
* Padding - Clears an area around the content. The padding is affected by the background color of the box
* Content - The content of the box, where text and images appear
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you specify the width and height properties of an element with CSS, you are just setting the width and height of the content area. To know the full size of the element, you must also add the padding, border and margin.
The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Let's do the math:
250px (width)
+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px
Imagine that you only had 250px of space. Let's make an element with a total width of 250px:
Example
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
The total width of an element should always be calculated like this:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
The total height of an element should always be calculated like this:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
None of the border properties will have ANY effect unless the border-style property is set!
The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.
The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there:
Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.
Positioning: The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
Try the code below for various cursor types:
Mouse over the words to change the cursor.
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br />
<span style="cursor:crosshair">crosshair</span><br />
<span style="cursor:default">default</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:help">help</span><br />
<span style="cursor:move">move</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:pointer">pointer</span><br />
<span style="cursor:progress">progress</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:wait">wait</span><br />
</body>
</html>
