PHP and HTML and CSS | CSS the Basics | Blog

Thought I would put a few basics of CSS on the blog for beginners...

NAME	DESCRIPTION	USAGE
span	An inline tag which inserts a style inside a another tag such as a <p>	<p>Here is some <span style="font-weight: bold">Bold</span> text.</p>
p	CSS to set paragraph tag <p>	p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 120%; }
body	CSS to set body tag <body>	body { background-color: #FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #0F0; }
h1, h2, h2 etc	CSS to set header tags <h1> or <h2> or <h3> etc	h1 { font-family: "MS Serif", "New York", serif; font-size: 12px; line-height: 140%; }
div	A block level tag which sets the style of a group of tags such as <h1> and <p>	<div style="color: #F00"> <h1>Header</h1> <p>Here is some text</p> </div>
.classname	A class selector which sets the style of a tag such as <h1> and <p>	.first_para { text-indent: 5em; } <p class="first_para">Here is some text.</p>
tag.classname	Same as above except more specific	p.first_para { text-indent: 5em; } <p class="first_para">Here is some text.</p>
tag#idname	An ID selector which is the same as above except it can only be used once	h1#first_header { text-indent: 5em; } <h1 id="first_header">Here is a header.</h1>

NAME	DESCRIPTION	USAGE
Absolute positioning	Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties *note needs a outer/container block such as a relative position to work correctly	#page { position: absolute; }
Relative positioning	Positioning an element relatively places the element in the normal flow of your HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required.	#page { position: relative; }
Fixed positioning	Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements. Furthermore, an element that is positioned with a fixed value, will not scroll with the document. It will remain in its position regardless of the scroll position of the page. *note IE6 (Internet Explorer 6) does not support the fixed value for the positioning of an element.	#page { position: fixed; }
Float property for positioning	The float property specifies whether or not a box (an element) should float. *note Absolutely positioned elements ignores the float property	img { float:right; }