PDA

View Full Version : [Quick Tut] CSS



Aeroscythe
25-07-08, 01:53 AM
I FOUND THIS ON THE NET AND THOUGHT I OUGHT TO SHARE AND CONTRIBUTE TO THIS SECTION.

Source:CSS Quick Tutorial (http://www.htmlhelp.com/reference/css/quick-tutorial.html)
__________________________________________________ _______________________

A style sheet is made up of style rules that tell a browser how to present a document (http://www.htmlhelp.com/reference/css/quick-tutorial.html#). There are various ways of linking these style rules to your HTML documents (http://www.htmlhelp.com/reference/css/style-html.html), but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.

Note that while the STYLE element is a good method of experimenting with style sheets, it has disadvantages that should be considered before one uses this method in practice. The advantages and disadvantages of the various methods are discussed in the section on linking style sheets to HTML (http://www.htmlhelp.com/reference/css/style-html.html).

Each rule is made up of a selector--usually an HTML element such as BODY, P, or EM--and the style to be applied to the selector.

There are numerous properties (http://www.htmlhelp.com/reference/css/properties.html) that may be defined for an element. Each property takes a value, which together with the property describes how the selector should be presented.

Style rules are formed as follows:


selector { property: value }
Multiple style declarations for a single selector may be separated by a semicolon:


selector { property1: value1; property2: value2 }As an example, the following code segment defines the color (http://www.htmlhelp.com/reference/css/quick-tutorial.html#)and font-sizeH1 properties for H1 and H2 elements:


<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>The above style sheet tells the browser to show level-one headings in an extra-large, red font, and to show level-two headings in a large, blue font. The CSS1 Specification (http://www.w3.org/TR/REC-CSS1) formally defines all properties and values (http://www.w3.org/TR/REC-CSS1#css1-properties) available. The properties and values are also given in the CSS Properties (http://www.htmlhelp.com/reference/css/properties.html) section of this site.

This tutorial is intended as a very basic introduction to Cascading Style Sheets and should provide enough information to allow you to experiment with a few of your own styles. For a more in-depth look at Cascading Style Sheets, read the following sections:

ChimP
27-07-08, 01:57 PM
That's a really simple one. If possible, you should add some more examples, and more properties. E.g. backgrounds, padding, margin, position, height, width, etc.

But still, keep it up. ^^

Aeroscythe
27-07-08, 04:17 PM
I used to have old forums filled with HTML/CSS stuff, but I can't find the guides anymore that I used to have : /

Succy
02-08-08, 10:10 AM
Haha, This one is nice... Would like to see more coming:P

StickyIcky
02-08-08, 07:12 PM
Very nice aero
+rep

Aeroscythe
03-08-08, 01:22 AM
So people would like more CSS or HTML Tuts? Tell me which ones. I might continue a whole CSS Guide Compilation.

ChimP
05-09-08, 12:15 PM
Start by the base point of webdevelopment - HTML. ^^

DoPeT
10-01-10, 12:19 AM
Pretty nice tut