[TUT] CSS basic overview

Copy this into a text file or Word for best reading. If viewing in Word, select all then reduce Spacing to 0 (Page Layout > Spacing > After to 0pt, then press enter).

This is more of a reference sheet rather than a guide, but it can be used by newbies if they want to briefly skim through and learn some basics, written from scratch so please point out errors or anything wrong with it.

=====
ASSIGNING CSS TO INDIVIDUAL HTML ELEMENTS:
=====

----
* Class Selector: [COLOR:RED]MANDATORY FOR USING CSS PROPERLY, DO NOT SKIM THIS.[/COLOR]
----

.text { font-size: 12px; }

- The ".text" is placed infront of the definition.
- This creates a custom tag, which can be prefixed upon any HTML tags to create and modify the tag (eg. <p class=text> ..., where all elements with the class="text" now have font size 12px).

----
* ID Selectors: [COLOR:RED]MANDATORY FOR USING CSS PROPERLY, DO NOT SKIM THIS.[/COLOR]
----

#area1 { font-size: 16px; }

- The "#area" is placed infront of the definition.
- This creates a custom ID, which can assigned to any tag by implementing id="area1" within the HTML element (eg. <p id="area1" ..., which now has font-size of 16px assigned to its text).
- Designed for use once on an element (overrides Class selectors), but can be used like a class selector on many elements.

----
* Defining pseudo-classes
----

a:hover { font-size: 12px; }

- The pseudo-class is placed infront of the definition.
- This creates a custom specification to the pseudo-class specified in the rule (eg, <a (anchors)> now have font-size of 12px when hovered over).

=====
List of HTML selectors (with ex. and explanation):
=====

===
- FOR TEXT
===
- p { font-family:arial;
font-family:arial, helvetica; }

- Assigns paragraphs the font arial (font-family:arial), and if the font cannot be loaded, the generic font family Helvectica is used instead (font-family:arial, helvetica).

- p { font-style:normal;
font-style:italic;
font-styleblique;

- Assigns paragraphs the font style of either normal (font-style:normal), italic (font-style:italic) or obliquie (font-styleblique).

- p { font-size:normal;
font-size:14px;
font-size:14pt;
font-size:xx-small;
font-size:x-small;
font-size:small;
font-size:medium;
font-size:large;
font-size:x-large;
font-size:xx-large;
font-size:smaller;
font-size:larger;
font-size:75%; }

- Assigns paragraphs different font sizes; the average font-size (font-size:normal, an absolute value (eg. font-size:14px, a defined absolute value (eg. font-size:large or a ratio in percentage (font-size:75%

- p { text-transform:none;
text-transform:capitalize;
text-transform:uppercase;
text-transform:lowercase; }

- Assigns paragraphs transformations of capitalized (text-transform: capitalized, uppercase (text-transform: uppercase or lower-case (text-transform: lowercase. Can be made normal (text-transform: normal) also.

- p { text-align: left;
text-align: right;
text-align: center;
text-align: justified;

- Assigns paragraphs different alignments; justified (text-align: justified is where text is stretched to match the whole size of it's container.

- p { text-decoration:none;
text-decoration:underline;
text-decorationverline;
text-decoration:line-through;

- Assigns text different decorations; underlined (text-decoration: underline, overline (text-decoration: overline and line-through (text-decoration: line-through. There is also blink (text-decoration:blink, basically flashing text, but please don't ever fucking use flashing text, I'll use your whois, hunt your address and kill you. Ait?

- p { color: red;
color: #000000;
color: rgb(127,127,127)

- Assigns text colors; absolute defined colors (color: red, from hexadecimal (color:#000000; #000000 (or #000) is the hexi code for black), or from rgb scale (color:rgb(127,127,127); the hexicode for grey at 50%).

===
- FOR BACKGROUND:
===

- body { background-color:#FF6666;
background-image:url(myimage.gif);
[USE FOR ONLY WHEN YOU HAVE A BACKGROUND-IMAGE.]
* background-repeat:repeat-x
- Repeats image horizontally.
* background-repeat:repeat-y
- Repeats image vertically.
* background-repeat:no-repeat
- No background image repeating.
* background-position: 75px 75px;
- Positions the image 75px from the left and 75px from the top of the page.
* background-attachment: fixed
- The background image is fixed, so it does not move when scrolling.

- The whole page body can be assigned background values; blackground-color sets the background to a certain color (rgb, hexidecimal or absolute can be used), can be repeated either horizontally ( background-repeat:x or vertically ( background-repeat:y, be positioned certainly from the left and top of the page ( background-position: 75px 75px; ) and attached specifically ( background-attachment: fixed ).

===
- FOR LINKS (text styles still affect link text):
===

- a:link { font-size:12px; color:blue; }
a:visited { font-size:12px; colorurple; }
a:hover { font-size:12px; colorrange; }

- Assigns anchor text (<a>) dynamic properties for when it is active; all links are colored blue and font size 12px (a:link { font-size:12px; color:blue; }), all links are colored purple and font size 12px that have already been visited (a:visited { font-size:12px; colorurple; }), and links when hovered over turn orange ( a:hover { font-size:12px; colorrange; }).

===
- FOR DIFFERENT CURSORS:
===

- a:hover { cursor:help;
cursor:default;
cursor:text;
cursorrogress;
cursor;move; }

- Assigns anchor text, when hovered over, different cursors: a help cursor (cursor:help), the default cursor (cursor:default), the move cursor (cursor:move), the text cursor (cursor: text), or the progress (the one with the little sandtimer next to the pointer) cursor (cursorrogress).

===
- FOR POSITIONING AND OVERLAPPING IMAGES/TEXT:
===

- #image1 { position: relative; left:100px; top:100px;
z-value: 1; }
#image2 { position: relative; left:0px; top:0px;
z-value: 2; }

- This is best shown as an example:

- Save this as a .html file (notepad > file > save as.. > "image-overlapping.html" [WITH QUOTES]) and open. As you can see, the two monkeys dressed in sanitary towels are overlapping one another. The z-value (z-value:1) denotes which one is on the top of the overlap. If you change the z-value of #image2 and #image1 so that #image1 has the larger value z-value, you will notice the images overlap the other way, hallelujah praise the lord.

[/CODE]

Thanks alot man , though it'll look nicer if you put it in the thread (Not with the scrolls etc)

The best editor to get for doing html and for reading text files is notepad++. Just google it, its free, its better than word for avoiding any formatting issues.