# CSS notes

Comprehensive effects
CSS Popups
Horizontal Menu
Bar Charts
Horizontal Chart
Vertical Chart

CSS notes

Table of Contents

Notes taken from the following resources:: Cascading Style Sheets The Definitive Guide by Eric A. Meyer (2nd edition); CSS Reference Table on TechRepuplic's builder.com; W3C's CSS page; experimentation
Other References: W3 Style Sheets Home Page and Some Sample css

Table of Contents

Test pages

test2.html sheet2-1.css sheet2-2.css
formatsane.css - used on top-level page
testcss3.html - get unnumbered lists up and left...
reset.css - from Eric Meyer
Also there's some CSS in this document - view the source....

Markups I haven't used as much

alt in images - specify a textual replacement for the image - 'tooltip' kind of like
title in other links...

Comments I don't know where to put elsewhere right now

if you make containing divs smaller then the things they contain, they will generally push to match the items they contain (?)

In the style sheet or section

/* comments */

Selector	Declaration
H1	{color: red; ...;}
H2, H3	{color: red; ...;}	/* or */
H2 em	{color: red; ...;}	/* descendant selectors - em in H2 */

in html style format

usually up in the <head>

<style type="text/css"></style>

linked style sheet

usually up in the <head>

example 1

example 2

allows flipping between different styles in browsers that support it (like firefox 1.0+

rel="alternate stylesheet" important
title="whatever" important

Quick ref on selectors...

Class Selector	p.warning {font-weight: bold;}	every paragraph with class="warning"	<p class="warning">
ID Selector	p#lead-para {font-weight: bold;}	first occurance of id	<p id="lead-para">
Attribute Selector - Simple	h1[class] {color: silver;}	something with a class attribute in it	<h1 class="hoopla">
	a[href][title] {font-weight: bold;}	and	<a href="http://www.w3.org/" title="W3C Home">
Attribute Selector - Exact	a[href="http://www.blah.org/about.html"] {font-weight: bold;}		<a href="http://www.blah.org/about.html">
Attribute Selector/Value - Partial	p[class~="warning"] {font-weight: bold;}		<p class="urgent warning">
Attribute Selector - Selection Type	*[lang\|="en"] {color: white;}		<h1 lang="en-us">Hello!</h1>

quick ref - types of selectors

Descendant selectors	h1 em {color: gray;}	any em that is a descendant of h1
child selector	h1 > strong {color :red;}	strong that is a child (not just a descendant) of h1
adjacent sibling selector	h1 + p {margin-top: 0;}	paragraph that immediately follows an h1 element

Class Selector

<p class="warning">This is a warning </p>

Selector	Declaration
*.warning	{font-weight: bold;}

ID Selectors

(can only be used once)
<p id="warning">This is a warning </p>

Selector	Declaration
*#warning	{font-weight: bold;}

Attribute Selectors

h1[class] {color:silver;}

<h1>Hello</h1> /* this would not silver */
<h1 class="blah1">Hello</h1> /* this would silver */
<h1 class="yah2">Hello</h1> /* this would silver */

a[href="http://www.w3.org/"] /* look for exact attribute value */
p[class~="warning}] {font-weight: bold;} /* partial attribute - would work on following */
<p class="urgent warning">Very Important!</p>

*[lang|="en"] {color: white;} /*matches any lang attribute that betgins with 'en'*/
<h1 lang="en">Hello!</h1> /* matches */
<h1 lang="en-us">Hello!</h1> /* matches */
<h1 lang="uk-en">Hello!</h1> /* doesn't */

pseudo-classes

:link - any anchor that is a hyperlink (i.e. has an href attribute) and points to an address that has not been visited.
:visited - any anchor that is a hyperlink to an already visited address
:focus - any element that currently has input focus
:hover - any element which mouse pointer is over
:active - element that has been activated for user input (i.e. hyperlink that user is clcking on during time the mouse button is held down
:first-child - something that is the 1st child of something else (i.e. p:first-child {font-weight: bold;} matches p when it is the first-child of something else
:first-letter
:first-line
:before - h4:before {content: "yada"; color: silver;} - See example linked above
:clamp - The clamp() CSS function clamps a value between an upper and lower bound. clamp() enables selecting a middle value within a range of values between a defined minimum and maximum. It takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The clamp() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>>, <number>, or <integer> is allowed

Recommended Order: a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}

Specificity

a,b,c,d - 'left-weighted' (i.e. 0,1,0,0 wins over 0,0,1,0)
A selector's get weighted based on what components they have

Inline	add 1,0,0,0
For every ID attribute value	add 0,1,0,0
For every class attribute value	add 0,0,1,0
For every element and pseudo-element given	add 0,0,0,1

Universal Selector (*) does not contribute to specificity (i.e. has 0,0,0,0).
Combinators have no specificity (not even zero).
Zero specificity defeats no specificity.
Rule can be marked important which trumps rules that aren't marked important. Below p.dark color will get overridden but background will not....

p.dark {color: #333 !important; background: white;)

Things get inherited. Below the <em> will still be gray

h1 {color: gray;}
<h1>Blah <em>Here</em></h1>

Most box-moddel properties do not get inherited.

Specificity Sorting Rules

For all rules that match a given element:

!important rules trump those that are not. In order:

Reader important declarations
Author important declarations
Author normal declarations
Reader normal declarations
User agent declarations

Higher Specificity has more weight than lower specificity (0,1,0,0 wins over 0,0,1,0).
Later declarations have more weight then prior ones. Imported style sheets are considered to come before all declarations in style sheet that imports them.

Note: Non-CSS hints (i.e. the font element) have specificity of 0 and are treated as if they appear at the beginning of the author's style sheet. They can be oveerridden by author or reader styles, but not by user agent's styles.

Color

17 named colors in CSS2.1 (HTML4.01 + orange)
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
orange
purple
red
silver
teal
white
yellow
in something like
h1 {color: rgb(50%, 50%, 50%)}
you can have rgb(50%, 50%, 50%) or rgb(128, 128, 128) or #808080 or #567 which is shorthand for #556677
"web-safe" colorsafe colors that avoid dithering 256-color computer systems. multiples of RGB vlues 20%, 51 or hex-pair value 33.

Length Values

Absolute Length Units - Inches (in), Centimeters (cm), Milimeters (mm), Points (pt), Picas (pc). Traditionally there are 72 points to an inch. A pica is equivalent to 12 points. There's nothing to say that the monitor will have a size and resolution that match up your expected measurements.
Relative Lengths
- em - font-size for a font. For example if a font-size is 14 pixels, then 1em = 14 pixels
- ex - the height of a lowercase x in the font being used (in points).
- px - pixels. Remember that there's nothing to say that a monitor will have a size and resolution that match up your expected measurements. Also, printers commonly re-scale pixel lengths to something more sensible.
- Recommendation is to use em and px where appropriate.
- vw and vh are length units representing 1% of the viewport size for viewport width (vw) and height (vh), respectively
- 1 rem equals the font size of the html element (which for most browsers has a default value of 16px).

URLs

@import url(subdir/blah.css);
@import url(http://www.dasite.org/dathings/special/things.css);
body (background: url(http://www.pix.web/picture1.jpg) /* note no space between url and opening parens */

Keywords

none	different from 0	a: visited {text-decoration: none;}
inherit	forced inheritance	#toolbar a {color: inherit;}

Fonts

Generic Font Families

body {font-family: sans-serif;}

Serif - Proportional and have serifs.
Sans-serif - Proportional wihout serifs
Monospace - Non-proportional
Cursive - attempt to emulate human handwriting.
Fantasy - totally different fonts, such as Western, Woodblock, and Klingon.

Specific Font Families

h2 {font-family: Georgia;)

Can list general after specific. This allows general to apply if specific is not available.
h2 {font-famiy: Arial, sans-serif;}

This one goes through all the fonts in order until it gets a match
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;} /* use single quotes, not double if necessary*/

Font Weights

Every number corresponds to a weight at least as heavy as the number that precedes it. strong {font-weight: 700;}
em {font-weight: bold;}

100			see 300
200			see 300
300			If 300 unassigned, given next variant lighter then 400. If no lighter variant available, 300 assigned same variant as 400 (usually "Normal" or "Medium"). Method also used for 200 and 100
400	normal	font variants labeled "Normal", "Regular", "Roman", "Book"
500		font variants labled "Medium	If unassigned, given same font weight as 400
600			if unassigned, given next variant darker then 400. If no darker varieant is assigned, then given same variant as 500. Method also used for 700, 800, 900
700	bold		See 600
800			See 600
900			See 600
	bolder		selects lowest number that corresponds to font weight darker than what was inherited
	ligher		selects highest number that corresponds to font weight lighter than what was inherited

Style

normal
italic - separate font face, small changes made to structure of each letter to account for altered appearance.
oblique - simply slanted version of normal upright text
inherit

p {font-style: normal;}
em {font-style: oblique;}
i {font-style:italic;}

Variations

small-caps, normal, inherit

An example of smallcaps (NOT LARGE CAPS)

Font property

Can be used to group all other properties
h1 {font: normal bold italic 30px sans-serif;}
last 2 values must be font-size and font-family in that order

Line Height

Separate from font-size. Added to font-size value, with a forward slash
h2 {font: bold itaclic 200%/1.2 Verdana, Helvetica, Arial, sans-serif};

System Fonts

button {font: caption;}
button: caption; font-size: 2em;}

caption	font used for captioned controls, such as buttons
icon	font used to label icons
menu	font used in dropdown menu and menu lists
message-box	font used in dialog boxes
small-caption	font used for labeling small controls
status-bar	font use din window status bards

Indenting

p {text-indent: 3em;}
p {text-indent: -4em; padding-left: 4em;}

When in the course of human events, it becomes necessary to try to remember the Gettysburg address, sometimes one must go to the book, and look it up. Sometimes one has a good memory, but sometimes not.
A third line....

p {text-indent: 10%;} /* percentages calculate on parent element's width */

Horizontal Alignment

left, center, right, justify, inherit
p {text-align: right;}

Vertical Alignment

line-height includes content-area (which is usually font size) plus leading area (half on top and half on bottom

line-height value is inherited from parent

Figure 6-7 from Cascading Style Sheets - The Definitive Guide by Eric A. Meyer (2nd edition)

p.cl2 {font-size: 10 px; line-height: 14px;}; /* extra leading area - 2px above and 2px below */

Read Images, Tables, and Mysterious Gaps

Vertically Aligning text

vertical-align: baseline	forces baseline of elemnnt to align with baseline of parent.
vertical-align: sub	baseline lowered with respect to parent's baseline. Spec' doesn't define distance element is lowered. Doesn't change size of font.
vertical-align: super	baseline raised with respect to parent's baseline. Spec' doesn't define distance element is raised. Doesn't change size of font.
vertical-align: bottom	aligns bottom of element's inline box with bottom of the line box.
vertical-align: top	aligns tom of element's inline box with top of the line box
vertical-align: middle	aligns middle of inline element's box with a poing that is 0.5ex above baseline of parent element. Usually used with images.
vertical-align: percentage
vertical-align: Absolute Length

span.blah {vertical-align: 5px;} /* would move it 5 pixels upwards */ RaiseItUp {vertical-align: 100%;}

Here is a superscript with a <RaiseItUp> tag.

Word Spacing

Adds or subtracts to normal spacing between words.
p.extraspace {word-spacing: 0.5em;}

And away we go...Up into the sky....

Letter spacing

Adds or subtracts to normal spacing between letters.
span.emphasized {letter-spacing: .2em; font-weight: bold;}

This needs to be strongly emphasized text.

Text Transformation

uppercase, lowercase, capitalize, none, inherit
h1 {text-transform: capitalize;}

Text Decoration

none, underline, overline, line-through, blink, inherit
text-decoration is not inherited. State everything explicitly in child elements.
p.overlined {text-decoration: overline;}

underline overline line-through blink

Block Level Elements - margins et. al.

Everything is a rectangular box. The containing block is the "layout context".

Diagram taken from Cascading Style Sheets The Definitive Guide by Eric A. Meyer (2nd edition)

<p style="width: 200px; padding: 10px; margin: 20px; border: 1px solid grey; background-color: silver"> - visible element box is 220px (add padding left and right). Margins extend another 20px

Horizontal Properties

margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
only width, margin-left, and margin-right can be set to auto. Everything else has to be set or takes default value of zero. Auto means use length required to make element boxes width equal to parent element's width (even if a negative number results).

<p style="width: 200px; margin-left: auto; margin-right: auto; margin-top: 0; border: 1px solid grey; background-color: silver"> - right and left auto center's the element in it's parent. 'text-align' only applies to inline content of block-level element

text-align

This most excellent paragraph assumes the style text-align: left;

This most excellent paragraph assumes the style text-align: right;

This most excellent paragraph assumes the style text-align: center;

This most excellent paragraph assumes the style text-align: justify;

Negative Horizontal Margins

Sum of horizontal components of block-level element box in normal flow always equlas width of parent. Below:

margin-left(10px)+border-left(0)+padding-left(0)+width(440px)+padidng-right(0)+border-right(0)+margin-right(-50px)=400px

Push it left
<div style="width: 400px; border: 3px solid black;">
<p style="margin-left: -15px; width: auto; margin-right: 10px; border: 3px solid gray;">

Replaced elements

<img src="csswork/simplesmiley.png" style="display: block; width: 25px; margin: 0;">
<img src="csswork/simplesmiley.png" style="display: block; width: 50px; margin: 0;">
<img src="csswork/simplesmiley.png" style="display: block; width: 100px; margin: 0;">
Note: height scales to match unless specifically set

Vertical Formatting

margin-top
border-top
padding-top
height
padding-bottom
border-bottom
margin-bottom
only height, margin-top, and margin-bottom can be set to auto. Everything else has to be set or takes default value of zero. Auto means - use length required to make element boxes width equal to parent element's width (even if a negative number results).
If height is not tall enough for text, browser is supposed to provide means of viewing all content without increasing height of element box. Scrollbars are an option.

If height is not tall enough for text, browser is supposed to provide means of viewing all content without increasing height of element box. Scrollbars are an option.

By default; block-level auto-height, normal-flow element with block-level (only) children only goes to top or bottom border. If you put in padding or borders then this changes to outer margin edges.

<div style="height: auto; background: silver;">
<p style="margin-top: 2em; margin-bottom: 2em;"> A paragraph!</p>
</div>

A paragraph!

<div style="height: auto; border-top: 1px solid; border-bottom: 1px solid; background: silver;">
<p style="margin-top: 2em; margin-bottom: 2em;">Another paragraph!</p>
</div>

Another paragraph!

Collapsing vertical margins

If top and bottom margins are both present, the one with the max get's used and the other one does not.

margin-top: 14px; margin-bottom: 15px;

Item 1
Item 2
Item 3

margin-bottom: 29px;

Item 1
Item 2
Item 3

Negative Vertical Margins

<div style="width: 420 px; background-color: silver; padding: 10px; margin-top: 50px; border: 1px solid;">
<p style="margin-top: -50px; margin-right: 10px; margin-left: 10px; margin-bottom: 0; border: 3px solid gray;">
The paragraph
</p>
The Div
</div>

The paragraph

The Div

Additional Margin items

Margins can be listed shorthand margin: <top> <right> <bottom> <left>
Can be remembered T R B L or TROUBLE.

For example:

Might Look Like This

Also, if you leave out entries, the replicate like:

t->r
t->b
r->l

So -

margin: 5px 7px	would translate to	margin: 5px 7px 5px 7px.
margin: 12px	would translate to	margin: 12px 12px 12px 12px.
margin: 12px 11px 10px	would translate to	margin: 12px 11px 10px 11px.

Left and right margins work for non-replaced inline elements. Top and bottom margins don't.

Punching out

The initial div with a paragraph that just rambles on, but demonstrates a pretty cool look punching out of it's parents. Things just keep going and then hopefully soon, something punches out. Very soon that is. Do we have enough text yet?

When man looks for a quote, it should stand out. Remember that great things are said in a manner that catches the eye.

Ongoing original ideas are captured in the original paragraph. There is nothing that is punched out, it is merely rambling text with nothing much to say. It is true that often you want to say something, but you are really just setting up the next element

Look at me! I'm important in what I say! At least I think I am as I am presented this way. It's not too hard to comprehend why I'm like this.

List Items

Can be inline or outside of content depending on value of list-style-position

Inline Elements

Anonymous text - string of characters not contained within an inline element. For
<p>I'm <em>so</em> happy!</p>
"I'm" and " happy!" are anonymous text.

By default, things are generally vertical-aligned at the bottom of the inline-box.

Thus, demonstrating style="vertical-align: top"

When in the course of human events, it becomes necessary

vertical-align

vertical-align can take the following keywords:

top
bottom
text-top
text-bottom
middle
super - (distance not specified and may vary by user agent)
sub - (distance not specified and may vary by user agent)
<percentage>

line-height

Best way to keep line-height for different size fonts from overlapping is to set line-height; 1. This becomes a scaling factor.

This is a paragraph with a 14px font and a line-height of 1. Now we add a font that's 250% bigger, just to show how the line-height scales.

Hey look - it's a span with box properties - in particular a border...

This is a paragraph of font-size: 15px; line-height: 1em;. And now we have span with background: #999; padding-top: 3px; padding-bottom: 3px;" that overlaps things. Especially, if we have a paragraph that continues on.

Inline replaced elements

Like img's. They pretty much respond based on their bounding box as you would expect. Bottom of box is vertical-aligned to the baseline.

Altering Element Display

The display property can be:

none
inline
block
inline-block - formatted within a line as a replaced element. Bottom of inline-block element will rest on baseline of text line by default, and will not line-break itself.
list-item
run-in
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
inherit

block->inline

#rollcall li {display: inline; border-right: 1px solid; padding: 0 0.33em;}
#rollcall li:first-child {border-left: 1px solid;}

Joe Namath
Victor Hugo
Hubert Humphrey
Wolfgang Mozart
Peter Wolf

inline->block

div#navigation a {display: block;}
<div id="navigation">
<a href="first.html">first on the list</a>
<a href="second.html">second...</a>
<a href="third.html">and so on.</a>
</div>

inline-block

When in the course of human events, it becomes necessary for one people to sometimes think on their

own - well, that's the challenge of it all - thinking on your own.

When in the course of human events, it becomes necessary for one people to sometimes think on their

own - well, that's the challenge of it all - thinking on your own.

When in the course of human events, it becomes necessary for one people to sometimes think on their

inline-block paragraph doesn't seem to show up correctly in firefox or ie

<p style="border: 1px dotted; display: inline-block; width: 6em; text-align: center;">
own - well, that's the challenge of it all -

another test couple of words

thinking on your own.

Run-in Elements

And here we have the run-in element which makes block-level elements an inline part of the following element. Hopefully it works in the browser or UA you are using.

border-style

Also border-top-style, border-right-style, border-bottom-style, border-left-style.

none

hidden - same as none but used for tables and border-conflict resolution

dotted

dashed

solid

double

groove

ridge

<a style="border-style: outset; text-decoration: none;" href="http://www.w3c.org"> could yield a raised button
W3C

shorthand is T R B L again.

border-style: solid dashed dotted none - A very short paragraph with only a couple of lines, and not much else, just a couple of lines that run on and on. Now we're really done. Really.

border-width

Also border-top-width, border-right-width, border-bottom-width, border-left-width.

thin
medium
thick
<length>
inherit

ADD PADDING TO OTHER A LINKS BESIDES HOVER

border-color

Also border-top-color, border-right-color, border-bottom-color, border-left-color.

<color>
transparent
inherit

Transparent borders

Border with no style has no width. Invisible border can be created with color value transparent. This might not work correctly IE.


a:link.borderme, a:visited.borderme {border-style: outset; border-width: 5px; border-color: transparent;}

a:hover.borderme {border-style: outset; border-width: 5px; border-color: gray;}

1st-link 2nd-link 3rd-link

border-top, border-right, border-bottom, border-left let you shortcut color style and width. For example
h3 {border-bottom: thick solid gray; text-decoration:none;}
will get you -

This is an h3 with a border

border

Global border settings can be shorted handed. For example,
h3 {border: thick silver solid; text-decoration:none;}
will get you:

h3 style with a global border

Note you can override a global setting with a particular setting i.e. border-left after a border setting.

When you apply borders to inline elements line height doesn't change, so you may get overlapping. Left and right will displace text around them to make way however.

Padding

TRLFis shortcut order
Also padding-top, padding-right, padding-bottom, padding-left.

<length>
<percentage>

h2 {padding: 10px 0.25em 3ex 3cm; background: silver; border: 1px solid black;}
will get you

An h3 with irregular padding

When you apply padding to inline elements left and right sides push text aside, however it is not applied to the right and left side of each line. Line height isn't changed of course, but since padding does extend the background, and is You can visible, it ends up overlapping the lines that come before.

Padding (in this case - background: green; padding: 1em;) is supposed to work with replaced elements such as but sometimes has issues. More importantly form elements can be represented differently with padding.

Color notes

#navbar a {color: yellow;} - All links in the #navbar will be yellow

Replacing Attributes

You can replace

with

body {color: black;}
a:link {color: #808080;}
a:active {color: silver;}
a:visited {color: #333333;}

Coloring Form Elements

For example:

select {color: rgb(33%,33%,33%);}
input {color: silver;}
input [type="radio"] {color: red;} /* doesn't always work */
input [type="checkbox"] {color: red; font-weight: bold;} /* doesn't always work */

background-color

<color>
transparent
inherit

h3 {color: white; background-color: rgb(20%,20%,20%); font-family: Arial, sans-serif; padding: 10px;}

will get you

An h3 with white text on dark background

Background images

You can replace

with

body {background-image: url(csswork/soapbubbles.png);}

Take a look at an example

Or how about

p.bubbly {background-image: url(csswork/soapbubbles.png); color: white;} a.invertedbubbly {background-image: url(csswork/invertedsoapbubbles.png); color: red;}

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

How about

td.nav {background-image: url(csswork/invertedsoapbubbles.png); color: green;}

navbar

2nd entry

3rd entry

4th entry

Heading 3

The text next to here. And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

Note that background images are not inherited by default
It's a good idea to put in a background color in addition to the image, in case the image fails to load for some reason, or has some transparency built into it.

background-repeat

repeat
repeat-x
repeat-y
no-repeat
inherit

width: 200px; background-image: url(csswork/smiley-small.png); background-repeat: repeat-y; border: 1px solid gray;

The text next to here. And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-image: url(csswork/simplesmiley-cropped.PNG); background-repeat: no-repeat;

A H3 Heading

When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

background-position

[<percentage> | <length>] | left | center | right
[<percentage> | <length>] | top | center | bottom

background-position: left center;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

p {background-position: right top;}

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: 25% 0%;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: 0% 75%;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: 75% 75%;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

If you supply only one value it is assumed to be the horizontal value. Vertical is then assumed to be 50%

background-position: 20px 30px;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: -130px -130px; (with bigger image)

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: -20% -20%; (with bigger image)
Consider staying away from % values. They line up the percentage alignment point of the image with the percentage alignment point of the block. If things are different sizes, you will get different alignments.

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: center center; background-repeat: repeat-y;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: center center; background-repeat: repeat;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-position: left top; background-repeat: repeat;

And here's a paragraph of words that make up sentences. Funny how it works that way. Of course if it didn't work that way, we wouldn't be able to speak modern languages.

background-attachment

scroll - scrolls and is placed relative to content - this is the default value
fixed - scrolls and is placed relative to window - click here or here for examples. A great example is here. This effect could be used for watermarking, and should print correctly, as each printed page becomes a viewport.
inherit

background

Can take all more detailed background keywords in one thing (like font properties). For example:

body {background: white url(smiley-small.png) top left repeat-y fixed;}

Keywords can go in any order, accept that the 2 values for background-position (top left) have to be together (and sometimes in horizontal first, then vertical).

Floating

float

left
right
none
inherit

Mary, Mary, quite contrary, how does your garden grow. All, wild and free, it's plain to see, that I have no roses to sow.

You must always declare a width in a nonreplaced element, or it will tend to the minimum it can be (i.e. 1 character wide).
'A floated element's containing block is the nearest block-level ancestor element'. (quoted from Eric Meyer's CSS book).

<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: right;" alt="smiley face">

1When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have 2 smiley face

enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: right; border: 1px solid silver;" alt="smiley face">

Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

<img src="csswork/simplesmiley-cropped.PNG" style="width: 300px; height: 30%; float: left; border: 1px solid silver;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 300px; height: 30%; float: right; border: 1px solid silver;" alt="smiley face">

1When in the course of 2 smiley face

human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">
<img src="csswork/simplesmiley-cropped.PNG" style="width: 30%; float: left; border: 1px solid silver;" alt="smiley face">

When in the course of human events, it becomes necessary smiley face

to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background. When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

<img src="csswork/simplesmiley-cropped.PNG" style="width: 30px; height: 200px; float: left; border: 1px solid silver;" alt="smiley face">

When in the course of human events, it becomes necessary to keep typing something that might just mean smiley face something, well then things get messed up. AAA will sometimes call to the rescue, if you call them soon enough. Hopefully we have enough text to show the smiley in the background.

When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

<img src="csswork/simplesmiley-cropped.PNG" style="width: 30px; height: 200px; float: left; border: 1px solid green; padding: .5em;" alt="smiley face">

A Fractured Title

When in the course of human events, it becomes necessary to keep typing something that might just mean something, well then things get messed up.

A H3 heading.

This is an unfloated paragraph the contents of which should flow past the floated image which precedes it in the document.

In this case, the floated image has been set to float left, and it has it's topand left margins of -15px. This will cause it to actually float up and out of it's parent element, which is the DIV that enclosed the image and these paragraphs.

clear

Clear one of more sides of floated elements so that text doesn't flow past it.

left
right
both
none
inherit

This is an unfloated paragraph the ontens of which should flow past the floated image which precedes it in the document.

An h4 title

In this case, the h3 title has a clear: left; in it's stytle

Centering text block in a page
body {
  text-align: center;    (need this for IE)
  <strong>min-width: 760px;</strong>
}

#wrapper {
  width: 720px;
  margin: 0 auto;
  text-align: left;
}

---OR---

#wrapper {
  width: 720px;
  position: relative;
  left: 50%;
  <strong>margin-left: -360px;</strong>
}


<body>
  <div id="wrapper">
  </div>
</body>

---

2 column float
#content {
  width: 520px;
  float: right;
}
#mainNav {
  width: 180px;
  float: left;
}

#footer {
  clear: both;
}

#mainNav {
  padding-top: 20px;
  padding-bottom: 20px;
}
#mainNav li {
  padding-left: 20px;
  padding-right: 20px;
}

#content h1, h2, p {
  padding-right: 20px;
}


<div id="wrapper">
<div id="branding">
  ...
</div>
<div id="content">
  ...
</div>
<div id="mainNav">
  ...
</div>
<div id="footer">
  ...
</div>
</div>

---

Three column float

#mainContent {
  width: 320px;
  float: left;
}

#secondaryContent {
  width: 180px;
  float: right;
}

#secondaryContent h1, h2, p {
  padding-left: 20px;
  padding-right: 20px;
}

<div id="content">
<div id="mainContent">

</div>
<div id="secondaryContent">

</div>
</div>
</pre>

Positioning

Define where element boxes appear relative to where they would normally appear,, or relevent to parent element, another element, or browser window. Please note that the descriptions below are paraphrased pretty closely to what is in Eric Meyer's book.

static - generated as normal.
relative - element box offset some distance. Elements retains shape it would have if it were not positioned, and space that element would ordinarily ocuppy is preserved.
absolute - element's box is removed from flow of document and positioned with respect to containing block. Original space that would have been occupied in normal document flow is closed up. Most commonly used for DHTML.
fixed - like absolute, but containing block is browser viewport. It does not scroll at all with the window, but appears to overlay it. IE6 doesn't support this.

In order to force the container block local - make it position: relative (or maybe one of the other ones) which will make all the elements inside of it use it as the containing block.

For more info, take a look at http://www.wpdfd.com/issues/78/absolutely_relative/.

Containing Block

element	position value	containing block
root		body or html
non-root	relative or static	content edge of nearest block-level, table cell, or inline-block ancestor box
non-root	absolute	ancestor with position value other then static ancestor - block-level - containing block is element's padding edge ancestor - inline-level - containing block is cotent edge of ancestor. ancestor - none - containing block is initial containing block

top, right, bottom, left

<length>
<percentage>
auto - note that auto is different than 0. It puts the position where it should be if there was a normal flow. If there is a conflict with left, right, and width - right is ignored and put to auto. If top, bottom, and height conflict - bottom is ignored and put to auto.
inherit

no text positioning

height: 50%; width: 50%; position: static; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

height: 50%; width: 50%; position: relative; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

height: 35%; width: 35%; position: absolute; left: 65%; top: 65%; bottom: 0; right: 0; background: green;

See the squares on the page. There's a square way up at the top of this page.

Also take a look here for an example of positioning within the div box.

Fixed would create an overlay on the window which wouldn't move relative to the window.
Consider:

<div style="background: aqua; width: 50px; height: 80px; position: fixed; top: 0px; right: 0px;">
<a href="#block">block</a>
</div>

This would create a small overlay block in the upper right corner with a link to #block. Check out:

w/ 1 sentence positioning

height: 50%; width: 50%; position: static; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

See the squares on the page.

height: 50%; width: 50%; position: relative; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

See the squares on the page.

div - position: relative;
height: 50%; width: 50%; position: absolute; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

See the squares on the page. More stuff about absolutely nothing, in order to show that the text goes under the positioned square. Not like a float. A float would wrap around the box, while this does not. Some of this text should be covered.

Another nice example of absolute positioning.

w/ 1 sentence in each div positioning

height: 50%; width: 50%; position: static; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

See the squares on the page.

Not if I see you first. Hello.

height: 50%; width: 50%; position: relative; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

See the squares on the page.

Not if I see you first. Hello.

height: 25%; width: 25%; position: absolute; left: 75%; top: 75%; bottom: 0; right: 0; background: silver;

See the squares on the page. There's a square way up at the top of this page.

This is an absolute positioned div block (from far below here).

div - position: relative;
height: 50%; width: 50%; position: absolute; left: 50%; top: 50%; bottom: 0; right: 0; background: silver;

Not if I see you first. Hello.

Another nice example of absolute positioning.

min-width, min-height, max-width, max-height (for positioning)

Not supported in IE without javascript (see http://www.doxdesk.com/software/js/minmax.html).

<length>
<percentage>
inherit

top: 10%; bottom: auto; left: 50%; right: 10%; height: auto; min-width: 15em; background: silver;

Not if I see you first. Hello.

See the squares on the page.

overflow

defines treatment of text that is larger then fixed size element.

visible
hidden
scroll
auto
inherit

position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: visible; background: silver;

Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.

See the squares on the page.

position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: scroll; background: silver;

Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.

See the squares on the page.

position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: hidden; background: silver;

Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.

This setting cuts off the overflow.

clip

clips text in overflowed element box

rect(top, right, bottom, left)
auto
inherit

position: relative; top: 0; left: 0; width: 25%; height: 7am; overflow: hidden; background: silver;

Not if I see you first. Hello. Not if I see you first. Hello. Not if I see you first. Hello.

This setting cuts off the overflow, but doesn't seem to work as relative.

Click here to try it as absolute.

visibility

visible
hidden - still affects layout but not visible. Different from display: none which removes from the flow/layout.
collapse - same meaning as hidden, but for table elements
inherit

When in the course of human events, it becomes necessary to suffer the slings and arrows of outrageous misfortune, well, there's the rub...

Another nice example of absolute positioning (relative to containing blocks).

A 3rd example of absolute positioning establishing a containing block for descendant elements

Auto

auto-middle position may not work in IE6-.

z-index

Higher value is closer to the reader.

<div style="height: 25%; width: 25%; position: absolute; left: 25%; top: 25%; z-index: 3; background: #AAA;">
<div style="height: 25%; width: 25%; position: absolute; left: 35%; top: 35%; z-index: 2; background: #999;">
<div style="height: 25%; width: 25%; position: absolute; left: 45%; top: 45%; z-index: 1; background: #777;">

3rd dimension

z-index: #

<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<img src="img_tree.png">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>

object-fit -position

used with <img> | <video>

object-fit
- fill -resized to fill given dimension
- contain -keeps aspect ratio
- cover -keeps aspect ratio, clipping overflow
- scale-down -smallest version of none or contain
- none -not resized

object-position
- xy coords
  e.g. object-position: 5px 10%;

Tables

Table Display Values

table	block-level table - like HTML element table.
inline-table	rectangular block that generates an inline box. No real close HTML element
table-row	like HTML element tr
table-row-group	an element that groups one or more rows. HTML equivalent is tbody
table-header-group	like table-row-group but always displayed before all other rows and row groups, and after any top captions. Printed, header rows may be repeated at top of each page. HTML equivalent is thead
table-footer-group	like table-header-group but at bottom. HTML equivalent is tfoot
table-column	declares an element that describes a column of cells. Usually not rendered. HTML equivalent is col
table-colomn-group	groups one or more columns. Usually not rendered. HTML equivalent is colgroup
table-cell	represents a single cell in a table. HTML elements thtd are expamples of table-cell elements.
table-caption	defines table's caption.

Another way of looking at it...

table	{display: table;}
tr	{display: table-row}
thead	{display: table-header-group;}
tbody	{display: table-row-group;}
tfoot	{display: table-footer-group;}
col	{display: table-column;}
colgroup	{display: table-column-group;}
td, th	{display: table-cell;}
caption	{display: table-caption;

xml with table styles

<system style="display: table; border: 1px solid black;">
	<planet style="display: table-row-group;">
		<name style="display: table-cell;">
		Mercury
		</name>
		<moons style="display: table-cell;">
		0
		</moons>
	</planet>
	<planet style="display: table-row-group;">
		<name style="display: table-cell;">
		Earth
		</name>
		<moons style="display: table-cell;">
		1
		</moons>
	</planet>
</system>

Mercury 0 Earth 1

xml with embedded style sheet


<style type="text/css"><!--
scores {display: table; border: 1px solid black;}
headers {display: table-header-group;}
game {display: table-row-group;}
team {display: table-row;}
label, name, score {display: table-cell;}
--></style>

<scores>
	<headers>
		<label>Team</label>
		<label>Score</label>
	</headers>
	<game sport="MLB" league="NL">
		<team>
			<name>Red Sox</name>
			<score>8</score>
		</team>
		<team>
			<name>Cubs</name>
			<score>5</score>
		</team>
	</game>
</scores>

Team Score Red Sox 8 Cubs 5

Column properties

In CSS, columns and column groups can only accept 4 properties:

border - can be set only when prperty border-collapse has value of collapse
background - will be visible only in cells where both the cell and its row have transparent backgrounds
width - defines minimium width
visibility - collapse causes none of the cells in the column to be rendered. According to the Meyer book 'A declaration of any value for visibility other then hidden for a column or column group is ignored.

caption-side

elements with display value table-caption (i.e. <caption> elements) can indicate that they should be displayed on:

top
bottom

Table Layers

Tables are displayed in layers.

Table
Column Groups
Columns
Row groups
Rows
Cells

For Example...

<table style="background: #333333;">
<caption style="color: green; caption-side: bottom;">table of colors</caption>
<colgroup>
<col><col style="background: #555555;"><col style="background: #555555;">
<colgroup>
<tr><td colspan=3>1st row - table color</td></tr>
<tr>
	<td>table color</td>
	<td>column color</td>
	<td style="background: #AAAAAA;">cell color</td>
</tr>
<tr>
	<td>table color</td>
	<td>column color</td>
	<td>column color</td>
</tr>
<tr style="background: #888888;">
	<td>row color</td>
	<td>row color</td>
	<td style="background: #AAAAAA;">cell color</td>
</tr>
</table>

table of colors
1st row - table color
table color	column color	cell color
table color	column color	column color
row color	row color	cell color

Experimenting with columns and rows...

<table style="border-collapse: collapse; background: white; color: blue; border: 1px solid black;">
<colgroup style="border: 1px dotted blue;">
<col style="border: 1px solid grey;">
<col style="border: 1px solid grey; background: lightgreen;">
<col style="border: 1px solid grey;">
<col style="border: 1px solid grey;">
</colgroup>
<tbody style="border: 1px solid purple;">
<tr><td style="border: 2px dotted blue;">1-1</td><td>1-2</td><td style="border: 2px dotted blue;">1-3</td><td>1-4</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td></tr>
<tr style="border: 1px solid red; background: lightblue;"><td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td></tr>
</tbody>
</table>

1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

Table Cell Borders

There are two types of border models in CSS. For elements of display value table or table-inline - Attribute:

border-collapse

can have the values of:

collapse - collapsing the borders
separate - separating the borders
inherit

Separated Cell Borders

Separate things...

border-spacing

Replaces cellspacing element. For elements of display value table or table-inline and border-collapse value of separate. Values are:

horizontal-separation, vertical-separation
inherit

<table style="border-collapse: separate; padding: 10px; border: 2px solid black;">
<tr>
	<td style="border-spacing: 3px 5px; border: 1px solid gray;">cell one</td>
	<td style="border-spacing: 3px 5px; border: 1px solid gray; border-width: 5px;">cell two</td>
</tr>
<tr>
	<td style="border-spacing: 3px 5px; border: 1px solid gray;">cell three</td>
	<td style="border-spacing: 3px 5px; border: 5px solid gray;">cell four</td>
</tr>
</table>

cell one	cell two
cell three	cell four

Handling empty cells

empty-cells:

makes it so you don't have to put a   in a cell to show the borders. Not fully suportted in IE6.

show
hide
inherit

show

1	2	3
4		5

hide

1	2	3
4		5

Collapsing cell borders

Border Collapsing order

border-style: hidden
border-style: double, solid, dashed, dotted, ridge, outset, groove, inset
cell, row, row, row group, column, column group, table
border-style: none

Click here for an example of collapsing order.

Table Sizing

Width

table-layout

auto (default)
fixed
inherit

use width: <width> in a style statement.

note that this does not always work cleanly (i.e. IE6). Use DIVs inside TDs or THs and set width (remember to take into account border and padding).

Click here for an example of table-layout and width.

Height

height: <height>

Alignment

vertical-align

top
bottom
middle
baseline (aligned with baseline of row; in the case of row-spanning cells - aligned with baseline of first row it spans; quoting Cascading Style Sheets The Definitive Guide by Eric A. Meyer (2nd edition) - "A row's baseline is defined by 'the lowest initial cell baseline (that is, the baseline of the first line of text) out of all it's cells").

<td style="border: 1px solid; background: silver; padding: 0; vertical-align: top; height: 10em;">
<div style="border: 1px dashed gray; background: white;">
The contents of this cell are top-aligned.
</div>
</td>

<td style="border: 1px solid; background: silver; padding: 0; vertical-align: middle;">
<div style="border: 1px dashed gray; background: white;">
The contents of this cell are top-aligned.
</div>
</td>

<td style="border: 1px solid; background: silver; padding: 0; vertical-align: bottom;">
<div style="border: 1px dashed gray; background: white;">
The contents of this cell are top-aligned.
</div>
</td>

The contents of this cell are top-aligned.

CSS Popups

Got this from http://psacake.com/web/jl.asp

css popupa pure css popup

a.info{
    position:relative; /*this is the key*/
	z-index:24; background-color:#ccc;
	color:#000;
	text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
	display:block;
	position:absolute;
	top:2em; left:2em; width:15em;
	border:1px solid #0cf;
	background-color:#cff; color:#000;
	text-align: center}

Horizontal menu

Got this from http://www.devinrolsen.com/pure-css-horizontal-menu/
Doesn't work in IE6 - check out separate menu version

#navigation
    {width:100%; height:20px; background-color:#999;}
#navigation ul
    {margin:0px; padding:0px 0px 0px 2px;}
#navigation ul li
    {display:inline; height:20px; float:left;
     list-style:none; margin-left:5px; width: 85px; position: relative;}
#navigation ul li a
    {color:#fff; text-decoration:none;}
#navigation li a:hover
    {color:#fff; text-decoration: none;}

/* sub menu */
#navigation ul li ul
    {margin:0px; padding:0px; display:none; position: absolute; left: -2px;
     top: 20px; background-color: #999;}
#navigation ul li:hover ul
    {display:block; width: 90px;}
#navigation ul li ul li
    {list-style:none; display:list-item; height: 15px; margin: 0px 3px 8px 3px;}
#navigation ul li ul li a
    {color:#fff;; text-decoration: none;}
#navigation ul li ul li a:hover
    {color:#000;; text-decoration: none; background-color: #fff;}

Bar Charts

Got these from http://www.alistapart.com/articles/accessibledatavisualization.

Horizontal Chart

Basic

<ul class="chartlist">
<li>
	<a href="/fruits/apples/">Apples</a> 
	<span class="count">420</span>
</li>
<li>
	<a href="/fruits/bananas/">Bananas</a> 
	<span class="count">280</span>
</li>
<li>
	<a href="/fruits/cherries/">Cherries</a> 
	<span class="count">200</span>
</li>
<li>
	<a href="/fruits/dates/">Dates</a> 
	<span class="count">100</span>
</li>
</ul>

Apples 420
Bananas 280
Cherries 200
Dates 100

Horizontal Chart - first styling

.chartlist li { 
  position: relative;     (element box offset some position, retain original space)
  display: block;         (changing this also removes the bullets)
  border: 1px solid aqua; (border put in to outline element)
}
.chartlist .count { 
  display: block;         
  position: absolute;       (parent element li is relative.  it becomes containing block)
                            (remove from flow of doc, pos with respect to containing block)
                            (original flow closes up)
  top: 0; 
  right: 0; 
  margin: 0 0.3em; 
  text-align: right; 
  color: #999; 
  font-weight: bold; 
  font-size: 0.875em; 
  border: 1px solid orange; (border put in to outline element)
}
.chartlist li a { 
  display: block;                    (block takes up the entire line (within the li))
                                     (pushes the .index span down)
  position: relative;                (element box offset some pos, retain original space)
                                     (if this were absolute, space would close up,
                                      and .index span would be next to the a element)
  padding: 0.4em 4.5em 0.4em 0.5em;
  z-index: 2;                        (raise it so it will always be visible)
  border: 1px solid purple;          (border put in to outline element) 
}

<ul class="chartlist">
  <li>
    <a href="/fruits/apples/">Apples</a> 
    <span class="count">420</span>
    <span class="index" style="width: 42%;">(42%)</span> (width style doesn't do anything for 
                                                          spans (until we style it later))
  </li>
  <li>
    <a href="/fruits/bananas/"> »
    Bananas</a> 
    <span class="count">280</span>
    <span class="index" style="width: 28%;">(28%)</span>
  </li>
  <li>
    <a href="/fruits/cherries/"> »
    Cherries</a> 
    <span class="count">200</span>
    <span class="index" style="width: 20%;">(20%)</span>
  </li>
  <li>
    <a href="/fruits/dates/">Dates</a> 
    <span class="count">100</span>
    <span class="index" style="width: 10%;">(10%)</span>
  </li>
</ul>

Apples 420 (42%)
Bananas 280 (28%)
Cherries 200 (20%)
Dates 100 (10%)

Horizontal Chart - additional styling

.chartlist .index { 
  display: block;       (block normally takes up the entire line (within the li?)
                         we have set width so it does not)
  position: absolute;   (remove from flow of doc, pos with respect to containing block (li?))
                        (original flow closes up)
  top: 0;               (we're moving it up to the top of the containing block)
  left: 0; 
  height: 100%;         (set the width to 100% to fill the entire containing block (li?) with
                         the background color)
  background: #B8E4F5; 
  text-indent: -9999px; (hide the actual percentage value (e.g. (42%)),
                         value still in for graceful degradation
  overflow: hidden;     (cuts off overflow text outside of containing block (li?)
                         may not be needed?)
}

Apples 420 (42%)
Bananas 280 (28%)
Cherries 200 (20%)
Dates 100 (10%)

Horizontal Chart - final styling

.chartlist3 { 
  float: left;                       (have other elements flow around this if they exist)
  border-top: 1px solid #EEE;        (remove the other borders; style a dividing line)
  width: 15em;                       (set the width so it is smaller on the page)
}
.chartlist3 li { 
  position: relative;
  display: block;  
  border-bottom: 1px solid #EEE;     (remove the other borders; style a dividing line)
  _zoom: 1;                          (deal with the haslayout bug in IE)
}
.chartlist3 li a { 
  display: block; 
  padding: 0.4em 4.5em 0.4em 0.5em;
  position: relative; 
  z-index: 2; 
}
.chartlist3 .count {                 (the number to the right)
  display: block; 
  position: absolute; 
  top: 0; 
  right: 0; 
  margin: 0 0.3em; 
  text-align: right; 
  color: #999; 
  font-weight: bold; 
  font-size: 0.875em; 
  line-height: 2em; 
}
.chartlist3 .index3 {                (the span percentage width)
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 100%; 
  background: #B8E4F5; 
  text-indent: -9999px; 
  overflow: hidden; 
  line-height: 2em;
}
.chartlist3 li:hover {               (add the hover with a background; now the entire <a element
  background: #EFEFEF;                (which is css'ed to a block element) hover highlights)
}

Apples 420 (42%)
Bananas 280 (28%)
Cherries 200 (20%)
Dates 100 (10%)

Vertical Chart

Basic

<ul class="timeline">
  <li>
    <a href="/2007/dec/1/" title="December 1, 2007: 40">
      <span class="label">1</span>
      <span class="count">(40)</span>
    </a>
  </li>
  <li>
    <a href="/2007/dec/2/" title="December 2, 2007: 100">
      <span class="label">2</span>
      <span class="count">(100)</span>
    </a>
  </li>
    <li>
    <a href="/2007/dec/3/" title="December 3, 2007: 80">
      <span class="label">3</span>
      <span class="count">(80)</span>
    </a>
  </li>
  <li>
    <a href="/2007/dec/4/" title="December 4, 2007: 60">
      <span class="label">4</span>
      <span class="count">(60)</span>
    </a>
  </li>
</ul>

First Styling

.timeline {
  font-size: 0.75em; 
  height: 10em;
}
.timeline li {
  display: block;      (lose the bullet among other things) 
  height: 8em;         (the height of the bar)
  width: 1.5em;        (the width of the bar)
  position: relative;  (set up for sub-elements)
  float: left;         (float it left so the next bar can be directly to the right)
  margin: 0 0.1em;
  border: 1px solid black;  (just to outline the element)
}
.timeline li a { 
   display: block;     (change the <a to be a block element)
   height: 100%;       (have it fill the entire containing element (li?)
                        now the entire block will be clickable)
}

<ul class="timeline">
  <li>
    <a href="/2007/dec/1/" title="December 1, 2007: 40">
      <span class="label">1</span>
      <span class="count" style="height: 40%">(40)</span>
    </a>
  </li>
  <li>
    <a href="/2007/dec/2/" title="December 2, 2007: 100">
      <span class="label">2</span>
      <span class="count" style="height: 100%">(100)</span>
    </a>
  </li>
    <li>
    <a href="/2007/dec/3/" title="December 3, 2007: 80">
      <span class="label">3</span>
      <span class="count" style="height: 80%">(80)</span>
    </a>
  </li>
  <li>
    <a href="/2007/dec/4/" title="December 4, 2007: 60">
      <span class="label">4</span>
      <span class="count" style="height: 60%">(60)</span>
    </a>
  </li>
</ul>

Additional Styling

.timeline li .label { 
  display: block;            (change from inline to block)
  position: absolute;        (remove from flow of doc, pos with respect to containing block (li?))
                             (original flow closes up)
  bottom: -2em;              (move it 2em below the container (li?))
  line-height: 2em;
  left: 0;
  width: 100%;               (make sure the width fills the container)
  text-align: center;
  border: 1px solid orange;  (temporary border so we can see position)
}

3rd styling

.timeline li a .count { 
  display: block; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  text-indent: -9999px; 
  overflow: hidden;
  width: 100%; 
  height: 0;             (height styles are in each count span class)
  background: #AAA; 
}

Final styling

.timeline3 { 
  font-size: 0.75em; 
  height: 10em; 
  width: 53em;
}
.timeline3 li { 
  display: block;
  position: relative;
  float: left;
  width: 1.5em; 
  margin: 0 0.1em;
  height: 8em; 
}
.timeline3 li a { 
  display: block;
  height: 100%;  
}
.timeline3 li a {
  color: #2D7BB2; 
  text-decoration: none;  (this didn't work in .label below)
  font-weight: bold; 
}
.timeline3 li .label {  (span with the label/number)
  display: block; 
  position: absolute; 
  bottom: -2em; 
  left: 0; 
  background: #fff; 
  width: 100%; 
  height: 2em; 
  line-height: 2em; 
  text-align: center;
  text-decoration: none; 
  font-weight: bold; 
}
.timeline3 li a .count { 
  display: block; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  height: 0; 
  width: 100%; 
  background: #AAA; 
  text-indent: -9999px; 
  overflow: hidden; 
}
.timeline3 li:hover { 
  background: #EFEFEF; 
}
.timeline3 li a:hover .count { 
  background: #2D7BB2; 
}

flexbox

took these from https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container elements
- display: flex or inline-flex
- flex-direction: row | row-reverse | column | column-reverse
- flex-wrap: nowrap | wrap | wrap-reverse;
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
- align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
- align-items: stretch | flex-start | flex-end | center | baseline;
- gap | row-gap | column-gap : (controls space between flex items) ##px;
.item elements:
- order: 0..# /* default is 5
- flex-shrink | flex-grow | flex-basis: ##px;
- align-self: auto | flex-start | flex-end | center | baseline | stretch;

Grid

Taken from https://www.w3schools.com/css/css_grid_item.asp

.gridcontainer
- display: grid | inline-grid
- column-gap | row-gap | gap: ##px
- grid-template-columns | grid-template-rows: (##px | auto) (##px | auto) ... /* defines width of each column or row...*/
- justify-content: space-evenly | space-around | space-between | center | start | end
- align-content: center | space-evenly; | space-around | space-between | start | end |
- height: ##px ...
- width: ##px ...
- grid-template-areas: '<gridAreaName> <gridAreaName> ...'

.griditem
- grid-column-start | gridcolumn-end | grid-column | grid-row-start | grid-row-end | grid-row : (span) ## /* make item start/end before/after row/column */
- grid-area: <gridAreaName> | ((span) rowLineStart#) ((span) columnLineStart#) ((span) rowLineEnd#) ((span) columnLineEnd#)

naming example

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

row/column start/end example

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 2px;
  background-color: #2196F3;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 3px;
  font-size: 30px;
  border: 1px solid gray;
}

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

2d transform

transform:
- translate()
- rotate()
- scaleX()
- scaleY()
- scale()
- skewX()
- skewY()
- skew()
- matrix()
  matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

3d transforms

transform: rotateX(###deg) || rotateY(###deg) || rotateZ(###deg)
transform-origin (chg 3d position)
transform-style: (specifies how nested elements are rendered in 3d space)

flat - do not preserve child elements 3d position
preserve-3d - preserve child elements 3d positions
initial - sets property to default value

perspective (How 3D elements are viewed)
perspective-origin (bottom position of 3D elements)

transitions

transition
transition-delay: ## (seconds)
transition-duration: ##
transition-property: <propertyToBe transitioned>
transition-timing-function:
- ease (slow fast slow)
- linear (same speed start to end)
- ease-in (slow start)
- ease-out (slow end)
- ease-in-out (slow fast slow)
- cubic-bezier(n,n,n,n)

Animations

@keyframes: <name>
animation-name: <name> (has to match the name listed in @keyframes
animation-duration: ##s
animation-delay: ##s
animation-iteration-count: #
animation-direction: normal || reverse || alternate (fwd than bkwrd) || alternate-reverse (bkwrd than fwd)
animation-timing-function:
- ease (slow fast slow)
- linear (same speed start to end)
- ease-in (slow start)
- ease-out (slow end)
- ease-in-out (slow fast slow)
- cubic-bezier(n,n,n,n)
animation-fill-mode: none | forwards | backwards | both
animation: (shorthand for all animation properties above)

A bit of text...

div.boundingForAnimation1 {
	display: inline-flex; 
	border: 1px solid black; 
	width: 300px; 
	height: 300px;"
}

div.animation1 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: my 5s linear 2s infinite alternate;
}

@keyframes my {
  0%   {background-color:red; left:0px; top:0px; transform: skewX(0deg) skewY(0deg);}
  25%  {background-color:yellow; left:100px; top:100px; transform: skewX(0deg) skewY(0deg);}
  33%  {background-color:yellow; left:130px; top:130px; transform: skewX(45deg) skewY(0deg);}
  50%  {background-color:blue; left:200px; top:200px; transform: skewX(0deg) skewY(0deg);}
  66%  {background-color:blue; left:100px; top:200px; transform: skewX(0deg) skewY(0deg);}  
  75%  {background-color:green; left:0px; top:200px; transform: skewX(0deg) skewY(45deg);}
  88%  {background-color:green; left:0px; top:100px; transform: skewX(0deg) skewY(0deg);}
  100% {background-color:red; left:0px; top:0px; transform: skewX(0deg) skewY(0deg);}
}

math

calc(+-*/) (e.g. calc(100%-100px))
max(#, #, ...) e.g. max(100px, 10%, 5em)
min(#, #, ...) e.g. min(100px, 10%, 5em)

text effects

text-overflow: clip | ellipsis | string |initial | inherit
word-wrap: normal | break-word | initial |inherit;
word-break: keep-all | break-all;
writing-mode: horizontal-tb | vertical-rl
overflow: hidden | visible

reformatting for printing

@media print {
  * {
    background-color: transparent;
    color: #000 ;
    box-shadow: none;
    text-shadow: none;
  }

}

gradient text

h1{
  background-image: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
  background-clip: text;
  color: transparent;
}

hi there

}

3 continuous flow columns

p{
  column-count: 3;
  column-gap: 5rem;          
  column-rule: 1px solid salmon; /* border between columns */
}

When in the course of human events, it becomes necessary for one people under God do something absolutely fabulous. It becomes to do something absolutely special. Then it truly doesn't matter. a is the first letter in the alphabet B is the second season a third C is the third not season is the third but D is the fourth

Comma separated list

li.csv:not(:last-child):after{content: ','}
}

one
two
three
four

box-sizing

//The box-sizing property allows us to include the padding and border in an element's total width and height. //If you set box-sizing: border-box; on an element, padding and border are included in the width and height:

* {
  box-sizing: border-box;
}

Responsive Web Design

Media Queries

Got these from https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

600px width or smaller

If the browser window is 600px or smaller, the background color will be

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

img width and max-width

//responsive image...scales up and down
img {
  width: 100%;
  height: auto;
}

//img will scale down but will never scale larger than orig size...

img {
  max-width: 100%;
  height: auto;
}
	
example
rwd1.html
rwd2.html
rwd3.html

box-sizing

* {
  box-sizing: border-box;
}

Experiment

setup gridview

CSS notes

Test pages

Markups I haven't used as much

Comments I don't know where to put elsewhere right now

In the style sheet or section

in html style format

linked style sheet

Quick ref on selectors...

quick ref - types of selectors

Class Selector

ID Selectors

Attribute Selectors

pseudo-classes

Specificity

Specificity Sorting Rules

Color

Length Values

URLs

Keywords

Generic Font Families

Specific Font Families

Font Weights

Font Size

Percentages and Sizes

Length Units

Style

Variations

Font property

Line Height

System Fonts

Indenting

Horizontal Alignment

Vertical Alignment

Vertically Aligning text

Word Spacing

Letter spacing

Text Transformation

Text Decoration

Block Level Elements - margins et. al.

Horizontal Properties

text-align

Negative Horizontal Margins

Replaced elements

Vertical Formatting

Collapsing vertical margins

Negative Vertical Margins

Additional Margin items

Might Look Like This

Punching out

List Items

Inline Elements

vertical-align

line-height

Inline replaced elements

Altering Element Display

block->inline

inline->block

inline-block

Run-in Elements

border-style

border-width

border-color

Transparent borders

This is an h3 with a border

border

h3 style with a global border

Padding

An h3 with irregular padding

Color notes

Replacing Attributes

Coloring Form Elements

background-color

An h3 with white text on dark background

Background images

Heading 3

background-repeat

A H3 Heading

background-position

background-attachment

background