CSS - Cascading Style Sheets. CSS defines the
visual look and feel of a markup document, typically HTML.
Rule - A selector and a definition that creates
one style sheet entry.
Selector - The portion of a CSS rule that identifies
a tag, class, or ID that the style applies to.
Class - A way of identifying a tag as a certain
classification and signifying that it is a member of a display group.
ID - A unique identifier for a document node.
IDs must be unique within a document, only one node may have a
certain ID.
Flow - The natural way certain HTML elements display
themselves. For example, text flows left to right and wraps at page
width, where as block elements display and break after each element
definition.
Parser - The process in which a computer program
analyzes a correctly formatted document. For example, a web browser
parses a HTML document.
Delimiter - A character that denotes the beginning
or end of a logical grouping. For example, the '<' character is the opening
delimiter for an HTML tag.
Curly braces - The "{" and "}" character.
Hover -The act of placing the mouse over an element,
but not necessarily clicking in that element.
Cascading Style Sheets (CSS) are author generated display rules which explicitly instruct a browser in how is should render HTML elements
Why use CSS
Consistency - one document dictates style for an entire site,
therefore, all pages have similar look and feel attributes. Consistency
even applies down to the HTML element level; on each page, elements
have similar visual representations.
Eases development - Style information for an entire site is localized
to one file, therefore, changes that may effect hundreds of files
may only require a change to one line of text.
Reduces file sizes - Style information does not decorate content
tags, thus reducing file size. Since a single CSS document can serve as
the style definition for an entire site, that CSS file may be downloaded
once and cached by the browser, thus reducing the amount of data
the end user must download for subsequent pages.
Style tags are not part of the new W3C HTML specifications - newer
HTML and XHTML specifications from the W3C deprecate many formatting
tags. In the future, the only formatting definition for HTML documents
will be through the use of CSS.
Allows the same content to be displayed in multiple formats without changing the HTML markup.
CSS rule format
CSS rules are made up of two parts: a selector and a declaration.
A CSS rules may contain more than one selector and more then one
declaration.
Embedding CSS
CSS may be embedded directly within the head region of a document, between a style tag.
The style tag supports a type attribute, which is set to “text/css”.
All style rules for that document may be placed inside of the style tag.
Selectors and their targets
tags - Selectors may list tags by name, thus applying a style rule to the content within all instances of that tag.
If more than one style rule is defined for a tag, the later declaration will override the previous.
If more than one style rule is defined for a tag and the declarations are different, the final rule will be an amalgamation of all of the declarations combined.
classes - Most HTML tags support a "class". The class attribute groups content into similar classifications.
Class selectors always begin with a "."
IDs - Most HTML tags support an "id" attribute. An id uniquely identifies an element node within a document. An element ID may then be used by a style selector to apply a style directly to that unique node.
ID selectors begin with a "#"
id styles override class styles - If a tag has a matching selector on both id and class, then the id style will override the assigned class style, since it is a more specific assignment.
combining selectors - A style rule may combine more than one selector into a common rule if the declaration is the same.
combining declarations - A style rule may combine more than one declaration into a common rule if the selector is the same.
Common selector properties
font-family - Defines the font face for a block of text. Common values are Verdana, Helvetica, Arial, and Courier
Note that the defined font must be available on the end user's computer
Contextual selectors - Allows different selectors to apply to elements based on how the items are nested within the HTML markup hierarchy
class/tag elements - Tag selectors may become even more specific by defining subclasses for that tag definition.
Generally speaking, only font related CSS rules cascade. THe reason for this is that some rules would be very troublesome if they did filter down and apply to child elements.
