" Home "

Learn With Pictures, Not Words

In Pictures online tutorials are based on pictures, not words. They're the easiest way to learn computer subjects.

They're Free!

In Pictures online tutorials are free for anyone to use. There's nothing to buy or download.

What People Say:

"Was stumbling the web until I found a very magnificent web site: inpics.net. Free and very easy picture tutorials


" There's no complicated multimedia, just pictures that show exactly what to do. Learn more about our approach."

In Pictures tutorials began as part of a research study

The goal: to make it easier for people with

learning disabilities to learn computer subjects.

As part of the study, we created simple,

illustration-based tutorials. Everyone who tested them—

not just people with learning disabilities—

said the new tutorials enabled them to learn faster and easier than conventional text-heavy books.

Where's the Snazzy Stuff?

So where are the color screenshots? The cartoon characters? The video animations?

We don't use these things, because our research showed us that:

  • The simpler, the better.
    Tutorials should be as simple as possible. Multimedia animations may look nifty, but they can be hard to follow. That's why these tutorials use static screenshots.

  • Black-and-white is better than color.
    Color screenshots can create a "kaleidoscope" effect that makes it difficult to focus. Black-and-white doesn't. That's why these tutorials use black-and-white screenshots.

Other Properties







PropertyDescriptionPossible ValuesExamples
azimuthDeclares the angle that sound travels to the listener.Angle values in degrees (deg), or one of the following predefined values:

left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards

div { azimuth:90deg; }

div { azimuth:behind; }

cue-afterDeclares an audio cue to play after an element.URL values and the predefined valuenone.
div { cue-after:url(sound.wav); }

div { cue-after:none; }

cue-beforeDeclares an audio cue to play before an element.URL values and the predefined valuenone.
div { cue-before:url(sound.wav); }

div { cue-before:none; }

cueShorthand proerty to set both cue values at once.URL values and the predefined valuenone. Separate the values by a space in the following order:

cue-before
cue-after

If only one cue value is declared, it is used for both before and after.

div { cue:url(sound.wav) url(sound2.wav); }

div { cue:url(sound.wav); }

elevationDeclares the elevation of a sound.Angle values in degrees (deg), or one of the following predefined values:

below
level
above
higher
lower

div { elevation:30deg; }

div { elevation:higher; }

pause-afterDeclares the amount of time to pause after an element.Time in milliseconds (ms) or percentages.
div { pause-after:100ms; }

div { pause-after:20%; }

pause-beforeDeclares the amount of time to pause before an element.Time in milliseconds (ms) or percentages.
div { pause-before:100ms; }

div { pause-before:20%; }

pauseShorthand proerty to set both pause values at once.Separate the values by a space in the following order:

pause-before
pause-after

If only one pause value is declared, it is used for both before and after.

div { pause:200ms 100ms; }

div { pause:100ms; }

pitchDeclares the average speaking pitch of a voice.Frequencies in hertz (Hz) or the following predefined values:

x-low
low
medium
high
x-high

div { pitch:120Hz; }

div { pitch:high; }

pitch-rangeDeclares a change in the pitch range of a voice.Number values between 0 and 100 (lower values indicate a flat voice while higher values indicate an animated voice).
div { pitch-range:50; }

div { pitch-range:99; }

play-duringDeclares a background sound to be played while the current element is spoken.URL value, followed by one or more of the following keywords, separated by spaces:

mix
repeat

Alternatley, one of the following keywords:

auto
none

div { play-during:url(music.wav); }

div { play-during:url(music.wav) repeat; }

div { play-during:none; }

richnessDeclares the richness of the voice in spoken text.Numeric values between 0 and 100 (lower values have less richness and higher values have more richness).
div { richness:50; }

div { richness:0; }

speakDeclares if/how text is spoken.
normal
none
spell-out
div { speak:none; }

div { speak:spell-out; }

speak-headerDeclares how often table header cells are spoken.
once
always
th { speak-header:once; }

th { speak-header:always; }

speak-numeralDeclares how numerals are spoken.
digits
continuous
div { speak-numeral:digits; }

div { speak-numeral:continuous; }

speak-punctuationDeclares how punctuation is spoken.
code
none
div { speak-punctuation:code; }

div { speak-punctuation:none; }

speech-rateDeclares the speech rate of spoken text.A number indicating the number of words per minute, or one of the following predefined values:

x-slow
slow
medium
fast
x-fast
faster
slower

div { speech-rate:50; }

div { speech-rate:medium; }

stressDeclares the stress of the voice on spoken text.Numeric values between 0 and 100 (lower values have less stress and higher values have more stress).
div { stress:50; }

div { stress:0; }

voice-familyDeclares the voice family of spoken text.Generic or specific voice family names.More Information
volumeDeclares the median volume.Numbers between 0 and 100, percentages, or one of the following predefined values:

silent
x-soft
soft
medium
loud
x-loud

div { volume:50; }

div { volume:silent; }



Back to Learn More About CSS

Text Properties






PropertyDescriptionPossible ValuesExamples
colorDeclares the color of the text.Valid color names, RGB values, hexidecimal notation.

The predefined color names are:

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

div { color:green; }

div {color:rgb(0,255,0);}

div { color:#00FF00; }

directionDeclares the reading direction of the text.
ltr
rtl

ltr = left-to-right
rtl = right-to-left

div { direction:ltr; }

div { direction:rtl; }

line-heightDeclares the distance between lines.Numbers, percentages, lengths, and the predefined value of normal.
div { line-height:normal; }

div { line-height:2em; }

div { line-height:125%; }

letter-spacingDeclares the amount of space between text characters.A length (in addition to the default space) or the predefined value of normal.
div { letter-spacing:normal; }

div { letter-spacing:5px; }

div { letter-spacing:-1px; }

text-alignDeclares the horizontal alignment of inline content.
left
right
center
justify

If used on a set of table cells, this property can be given a string value to which the text of each row of the column will be aligned.

div { text-align:center; }

div { text-align:right; }

td { text-align:"."; }

text-decorationDeclares the text decoration.
none
underline
overline
line-through
blink
div { text-decoration:none; }

div { text-decoration:underline; }

text-indentDeclares the indentation of the first line of text.Lengths and percentages.
div { text-indent:12px; }

div { text-indent:2%; }

text-shadowDeclares shadow effects on the text.A list containg a color followed by numeric values (separated by spaces) that specify:
  1. The color for the shadow effect
  2. Horizontal distance to the right of the text
  3. Vertical distance below the text
  4. Blur radius
div { text-shadow:green 2px 2px 7px; }

div { text-shadow:olive -3px -4px 5px; }

text-transformDeclares the capitalization effects on the letters in the text.
none
capitalize
uppercase
lowercase
div { text-transform:uppercase; }

div { text-transform:lowercase; }

unicode-bidiDeclares values relating to bidirectional text. May be used in conjunction with the thedirection property.
normal
embed
bidi-override
div { unicode-bidi:embed; }

div { unicode-bidi:bidi-override; }

white-spaceDeclares how white space is handled in an element.
normal
pre
nowrap
div { white-space:pre; }

div { white-space:nowrap; }

word-spacingDeclares the space between words in the text.A length (in addition to the default space) or the predefined value of normal.
div { word-spacing:normal; }

div { word-spacing:1.5em; }



Back to Learn More About CSS

Page Properties & Table Properties

Page Properties

PropertyDescriptionPossible ValuesExamples
marksDeclares the type of marks to display outside the page box.
crop
cross
@page { marks:crop; }
orphansDeclares the minimum number of lines of a paragraph that must be left at the bottom of a page.Integers
@page { orphans:2; }
pageDeclares the type of page where an element should be displayed.IndentifiersMore Information
page-break-afterDeclares a page break.
auto
always
avoid
left
right
More Information
page-break-beforeDeclares a page break.
auto
always
avoid
left
right
More Information
page-break-insideDeclares a page break.
auto
avoid
More Information
sizeDeclares the size and orientation of a page box.Lengths, and the following predefined values:

auto
landscape
potrait

More Information
widowsDeclares the minimum number of lines of a paragraph that must be left at the top of a page.Integers
@page { widows:2; }

Table Properties

PropertyDescriptionPossible ValuesExamples
border-collapseDeclares the way borders are displayed.
collapse
separate
table { border-collapse:collapse; }

table { border-collapse:separate; }

border-spacingDeclares the distance separating borders (if border-collapse isseparate).Lengths for the horizontal and vertical spacing, separated by a space.

If one length is value is declared, that length is used for both the horizontal and vertical spacing. If two lengths are declared, the first one is used for horizontal spacing and the second one is used for vertical spacing.

table { border-spacing:5px; }

table { border-spacing:5px 10px; }

caption-sideDeclares where the table caption is displayed in relation to the table.
top
bottom
left
right
caption { caption-side:top; }

caption { caption-side:right; }

empty-cellsDeclares the way empty cells are displayed (if border-collapse isseparate).
show
hide
table { empty-cells:show; }

table { empty-cells:hide; }

table-layoutDeclares the type of table layout.
auto
fixed
table { table-layout:auto; }

table { table-layout:fixed; }



Back to Learn More About CSS

Padding Properties






PropertyDescriptionPossible ValuesExamples
padding-topDeclares the top padding for the element.Lengths, percentages, and the predefined value auto.
div { padding-top:5px; }

div { padding-top:15%; }

padding-rightDeclares the right padding for the element.Lengths, percentages, and the predefined value auto.
div { padding-right:5px; }

div { padding-right:15%; }

padding-bottomDeclares the bottom padding for the element.Lengths, percentages, and the predefined value auto.
div { padding-bottom:5px; }

div { padding-bottom:15%; }

padding-leftDeclares the left padding for the element.Lengths, percentages, and the predefined value auto.
div { padding-left:5px; }

div { padding-left:15%; }

paddingShorthand property used to declare all the margin properties at once.Separate values by a space in the following order (those that are not defined will use inherited or default initial values):

padding-top
padding-right
padding-bottom
padding-left

Undeclared values work as further shorthand notation. If only one length value is declared, all four sides will use that length. If two lengths are declared, the top and bottom sides will use the first length while the right and left sides will use the second length. If three lengths are declared, the top side will use the first length, the right and left sides will use the second length, and the bottom side will use the third length.

div { padding:5px 12px 4px 7px; }

div { padding:5px; }

div { padding:5px 10px; }

div { padding:5px 7px 4px; }



Back to Learn More About CSS
Subscribe to: Posts (Atom)