Cascading Style Sheets

References

Three ways to style:

External style sheets
- Using the import-at rule within the <head> section:
  <style type="text/css">
  
  </style>
- Using the link tag within the <head> section:
  <link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
  Format of external style sheet - a list of rules:
  h1 {color: red;)
  h2 {color: maroon; background: white;}
Document level styles within the<head> section:
<style type="text/css">
body {background: url(marble.gif);}
h1 {color: gray;}
</style>
Inline styles within the <body> section (depreciated):
<p style="color: gray;">

Style Sheet Comments

A CSS comment begins with /*, and ends with */ (C-style)

Element (HTML)

An HTML element is defined as everything between the start tag and the end tag
Some HTML elements have empty content and are closed in the start tag
Elements can be non-replaced or replaced (img,input,etc)
Elements can be block-level or inline-level
Most HTML elements can have attributes
CSS assumes that every element generates one or more rectangular boxes
Each element box has a content area at its core
The content area is surrounded by optional amounts of padding, border, and margin
Padding reveals the content background and cannot have negative width
Borders are generated by using pre-defined styles (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. If no color is set,the border takes on the foreground color of the content
Margins are always transparent and reveal the color of any parent. They can have a negative width

Simple Attribute Selectors

h1[class] {color: yellow;} - selects any h1 element with a class attribute
img[alt] {border: 3px solid red;} - selects any img with an alt attribute
*[title] {font-weight: bold;} - selects any element that has a title attribute

Exact Attribute Selectors

a[href="http://php.net"][title="home"] {font-size: 300%} - selects any anchor with those specific href and title

Partial Attribute Selectors

p[class~="warning"] {font-weight: bold} - same as p.warning {font-weight: bold}
img[title~="Figure"] {border: 1px solid black} - selects any img with Figure in the title
[foo^="bar"] - selects any element with attribute foo whose value begins with bar
[foo$="bar"] - selects any element with attribute foo whose value ends with bar
[foo*="bar"] - selects any element with attribute foo whose value contains bar

Particular Attribute Selector

[lang|="en"] - selects any element with lang attribute = en or begins with en-

Grouping Selectors

h2, p {color:gray;}

Descendent Selectors

Suppose you have:
tr.sidebar {background: blue;}
tr.main {background: white;}

Both blocks have links
tr.sidebar a:link {color: white;}
tr.main a:link {color: blue;}
Now links in the sidebar are white and links in the main block are blue

Any a:link, no matter how deeply nested will be selected. This is not true of child selectors

Child Selectors

ul > em {color:red;} will only be selected at a nesting level of 1

Adjacent Sibling Selectors

h1 + p {color:red;} selects a p which follows an h1 if the h1 shares a parent with the p. i.e. a body parent

Universal Selector (*)

* {color:gray;}

This makes every single element in the document gray

Grouping Declarations

h1 {font: 18px Helvetica; color: purple; background: aqua;}

Grouping Everything

h1, h2, h3, h4, h4, h6 {color: gray; background: white; padding: 0.5em;}

Class Selectors

*.warning {font-weight: bold;}
<p class="warning">
(* is universal selector, . is class selector)

.warning {font-weight: bold;}
<p class="warning">
(* can be ommited)

p.warning {font-weight: bold;}
<p class="warning">

Multiple Classes

.warning.urgent {background: red;}
(class attribute must contain both warning and urgent to match)
<p class="warning urgent">...

ID Selectors

Preceeded by an octothorpe (#) instead of a period (.)
Each ID value can only be used once within a document

*#first-para {font-weight: bold;}
<p id="first-para">

#first-para {font-weight: bold;}
(* can be ommited)

Pseudo-Class Selectors

Based on state. i.e. links can be visited or not.
:link :visited :hover :active :focus :first-child
All pseudo-class and pseudo-element keyword are preceded by a colon.

Pseudo-classes can be combined in the same selector
a:link:hover {color: red;}
a:visited:hover {color: maroon}
makes unvisited links red when they're hovered but visited links maroon when they're hovered

Pseudo-Element Selectors

p:first-letter {color: red;}
p:first-line {text-decoration: underline}
NOTE: Only certain properties are permitted on first-letter and first-line
h1:before {content: "**"; color: silver;} - inserts the generated content
body:after {content: " The end.";} - inserts the generated content

Shortcuts

top right bottom left
top left/right bottom
top/bottom left/right
all four

Border shortcut:
size style color
style must be present

Horizontal Properties

Only width and margin can be set to auto
If both margins are set to auto, they are set equal
If one margin and width are set to auto, that margin is reduced to zero
If all three are set to auto, both margins are reduced to zero
Borders cannot have percentage widths

Vertical Properties

If an auto-height, block-level, normal-flow element has only block-level children, the topmost child's margin and the bottommost child's margin will stick out past the parent containing block element unless that element has either top/bottom padding or top/bottom borders.Adding just a 1px border or 1px of padding is sufficient to cause the height to expand and contain the child's margin. (a border will show, padding will take the color of the element)

Horizontal Centering

To center a block: p {margin-left:auto; margin-right:auto;}; Setting both margins to equal lengths is the correct way to center elements, as opposed to using text-align. (text-align applies only to the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it.; This won't work, however, for centering a div in the viewport
To center a div in the viewport (position:fixed;): width:50%;left:25%;right:25%
To center a table inside the centered div: margin-left:auto;margin-right:auto;
To center text in a paragraph so that the text is centered in the div: first center the paragraph with margin-left and margin-right; then center the text within the paragraph with text-align="center"

Replacements

bold: .bold {font-weight: bold;}
Center a 200 x 100 px block in the browser window: In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the image's height, and a negative left margin of half the image's width.; position: fixed;; margin-left: -100px;; left: 50%;; margin-top: -50px;; top: 50%;
text alignment: p {text-align: center;}; p {text-align: right;}; p {text-align: left;}
Vertical alignment: td {vertical-align: top;}
border="1": table.border1 { border: 1px solid #666666; }

Send mail to the Webmaster

	This site best viewed with a browser
	Warning: This is a Debian centric site
	Many thanks to Debra and Ian Murdock for making Debian possible
	First created Apr 22, 2008 ~ Last revised June 13, 2010