CSS Terminology
Style sheets are text files (or text, embedded in an HTML document head section). Style sheets which import (inherit) from another are called cascading style sheets (CSS). To resolve “specificity” conflicts, the importing style sheet (or latest specification within a single style sheet) overrides prior inherited style specifications.An element differs from a tag in that an element includes the tagged content, as well as the designating/identifying tag, which presents the content. Every element is contained by another element … to the point that, ultimately, all elements are contained within <html> elements </html> tags.
Recommended architecture: Content goes in the HTML file; appearance (control elements) goes in the (CSS) style sheet.
CSS syntax
CSS classes
A CSS class is analogous to a dot-notation Property (e.g. object.Property ~ element.class). In a CSS, you can omit the elementName to apply the settings to all class elements to have the specified property e.g. .class {property: value}or … in HTML <elementName class=”className”>
CSS comments
CSS uses the following comments style, which may go multi-line. HTML comments should not be used in external/attached style sheets./* C-style multi-line comment. */
HMTL-style comments will also work: <! HTML-style single-line comment. >
CSS declaration
… a property:value container, consisting of one or more property:value pairs, separated by semicolons and contained within braces.
CSS elements
… are HTML elements, sans < />.
CSS margin Property
Margin refers to outside the border (i.e. the box) e.g. an 80% left-margin would place the box in the remaining 20% right-side of the page i.e. to the right of the 80% left-margin. For example,
<div id=”navBar”>
#navBar { Margin: 0 0 0 80%; }
Margin or padding pixel values (or percentages) are specified clockwise … top right bottom left … if four values are specified.
CSS padding property
In contrast to margin outside the border, the padding property refers to space inside the border.
CSS properties
… are CSS element & value combinations. Because many properties are inherited, a Property default value will usually be inherit, rather than medium, none etc., as defined in the CSS specification. A Property can only take values, defined in the CSS specification. Sometimes a Property can take a number of values, as in the font-family example above. Values should be delimited by a comma and a space. Sometimes a value will have a unit specification, as well as the actual value. You must not put a space between the value and its unit. Otherwise, white space can be used for legibility.
Page Layout
HTML lacks page layout capabilities; CSSPproperties do provide for page layout ... and should be used to control page layout, instead of HTML hack workarounds.
A layer is not necessarily a <div /> (the generic block element).
Positioning
Static: according to browser element flow
Absolute: positioning, relative to parent element
Fixed: element positioning, relative to Window top-left (regardless of scrolling). Fixed positioning obviates the need for frames.
Relative: positioning, relative to static flow position
CSS rules
… consist of a selector and a declaration. Selectors precede braces, enclosing declarations.
CSS selectors
A selector names/defines an HTML element, controlled by a CSS rule. The property is the controlled attribute; each property can take a value.
type selectors
class selectors
ID selectors identify a class object instance. Syntax: #idName or elementType#idName
descendant selectors
link pseudo class selectors
pseudo element selectors
selector groups
dynamic pseudo class selectors
language pseudo class selectors
child selectors
first child selectors
adjacent selectors
attribute selectors
CSS statements
… consist of a selector and a declaration i.e. { property: value; property: value }.
selector {property: value} |
CSS statement types
@rules
@import
@media
@page
comments
HTML comment tags
rules
Implementations
Floating boxes
Frames and tables appear to be discouraged, as old approaches to side-box placement. Instead, side boxes can be placed via the <div> margin Property.
Floating boxes must be specified before the central (expand to available space) content section; otherwise, the floating boxes will get pushed below the central expanding section, which will cross 100% of the browser window.
The clear Property means that the element can’t have any other elements next to it, horizontally.
Embedding vs. linking style sheets
Embedding CSS within a document header forfeits the advantage of contolling a site via a single, uniform style sheet file.
<style type="text/css"> </style>
Linking utilizes an external .css file.
<link rel="stylesheet" type="text/css" href="http://www.westciv.com/style/style.css" />
Embedding lists
If validation complains that you can't use an element within another (e.g. it will complain about using an un-ordered list within an ordered list), just place the un-ordered list within the preceding line i.e. bring the preceding closing line tag below the un-ordered list.Images and style sheets (CSS)
The xHTML <base> tag can be used to establish a base location in HTML files from which to locate image and CSS files in HTML files.
http://codeigniter.com/forums/viewthread/51209/
Regarding type, style sheets might (theoretically) be written in various languages. CSS is one language; XSL (eXtensible Style Language) might be another language choice.
The href location can be either a relative or an absolute URL.