CSS

Linking a css file externally

 * How to link your css externally: - you should be linking it externally whereever possible, and only having inline css for small or unusual bits.
 * Some people hide the CSS code from older browsers by "commenting" it out cos ancient browsers display it as a html mess

Attributes

 * Use the Class and id elements. Class is more flexible (for a group of items) and id is more specific (has to be unique). Remember it with the help of this: [[File:class_and_id.gif]]
 * class attribute - fullstop selector
 * id attribute - hash selector
 * do note that you can combine multiple class and id attributes and even with no spaces between them. eg .thing.stuff will select something with div class thing and p class stuff. you can basically apply classes and id attributes to EVERYTHING! (nearly everything... try it!)

Selectors

 * CSS also has a special universal selector
 * asterisk is universal for every element not already specifically defined it will be formatted as such (be careful)
 * selectors can be grouped with commas (eg: h1, h2, h3, h5)
 * descendant selectors
 * selectors descendants can be selected by grouping with spaces - eg: p cite will retrieve all cites in ps. all descendents apply however deeply nested. does not necessarily have to be immediate child.


 * pseudo-classes
 * :active - elements (like a) which ahve been clicked on
 * :first-child - first child of the element
 * :focus - things like form fields which have focus (receiving input first)
 * :lang - language used (eg: span lang defined as en-uk, or british english)
 * :hover - things which are mousedover
 * :link - unfollowed link
 * :visited - previously visited links
 * you can combine pseudo-classes with real classes, order doesnt really matter, a:link.nav and a.nav:link will be the same thing.


 * pseudo-elements - used to insert generated content!
 * :before, after, first-letter, first-line - only certain properties work
 * interesting idea: use first-line with first-child
 * display - html understands all things as being block or inline. for example, "p" is a block like a flat thing on a plate while inline things like "em" are things on the plate. but you can reset it and change it to the other type. eg if you have a few links as inline, they will just be next to each other on a line but if they are block they will force break after each item.

Box Display

 * box display (V. IMPORTANT)
 * order of the cascade
 * @import css
 * inline style attribute
 * id selector
 * classes or psuedo classes
 * elements which are more plentiful
 * if number of elements is the same then whichever was declared first wins
 * using !important in css - overrides normal order of cascade. just insert it anywhere in curly brackets


 * alternative to using it as a stylesheet, importing css using the @import line makes those styling rules more important than your css in your page itself or externally linked CSS page. for this, just write as @import url("filename.css");
 * CSS is so great that you can even select tags with specific value already assigned to them
 * example is hr[noshade] will select all hrs with no shade
 * uses of this: *[title] with some attribute defined will return all titles with that specific attribute (ah thats where the universal tag is useful)
 * element[attribute="value"] - exact match
 * element[attribute~="value"] - match if value of rule is one of several, seperated by spaces
 * element[attribute|="value"] - match if match before hyphen (mostly used for language groups like en-us or en-uk)
 * example of usage: to remove all banners, apply this: img[height="60"][width="468"] {display:none}
 * family relations
 * blockquote > p - selects only paragraphs which are direct children of blockquote
 * li + li - selects only adjacent siblings of list items
 * the more fancy text effects - text-decoration (blink, line-through, overline, underline), text-transform (capitalise, lowercase, uppercase), letter-spacing, word-spacing, line-height (can be in px, multiples of, or percentage)
 * white-space - how html condenses white space and doesn't reflect more spaces as more spaces but just as one if there is more than one
 * nowrap - dont wrap lines
 * pre - like pre tag, wrap lines as in source
 * pre-line - like pre but wrap lines where there are line breaks in source/at end of line
 * pre-wrap - like normal but wrap lines where there are line breaks in source or at end of line

Positioning
CSS positioning can come in a few forms: Another very important idea is the float element.
 * relative
 * absolute
 * fixed

So what does this all mean?
 * Relative positioning: an element which has its position set to relative will set its positioning according to other elements around it.
 * Absolute positioning: an element with a position which is set absolutely to the page (and not relative)
 * Fixed positioning: this is rarely used, only for FIXING things permanently like maybe if you had to use a super small viewport for handphone or something specific.

You can use the float element to have something that "floats" and repositions itself. But, you must not define its positioning as absolute or fixed then. We'll go through an example here...

CSS
 .thumbnail { float: left; width: 100px; border: 1px solid #000; margin: 0 15px 15px 0; padding: 5px; }

.clearboth { clear: both; }



HTML
the code for each individual thumbnail entry (you can have as many as you want!)

  Caption 

Clear the float


-OR-



Center Alignment
Here is an example in which I have center aligned the page.

 I LOVE QRCODE - qrcode.sg body {	text-align: center; }

{	margin-top:50px; margin-left: auto; margin-right: auto; width: 650px; text-align: left; }
 * 1) container

{	margin-top:50px; font-family:arial; font-size:40px; line-height:38px; color:#fff; text-transform:uppercase; letter-spacing:-0.1em; font-weight:bold; border:5px dashed #fff; } 
 * 1) container_text

  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

