This is a very brief reference sheet than an exhaustive
list of CSS terms: it is intended to provide you with a way to
look up the information you’re most likely to need right away.
For detailed information about CSS syntax, selectors, and
properties, visit the W3C’s CSS
tutorial pages at http://www.w3schools.com/css/.
CSS Rulesets
A CSS stylesheet is essentially a group of rulesets. Rulesets are made up of three
things:
- selectors
- These are how you select which elements or groups of elements in your
document will be affected by the style information.
- properties
- These identify the style properties (such as size or color) that are
being controlled.
- values
- Each property has a specific value indicating the size, color, margin, or other style information that is being applied.
See next page for more detailed discussion of each
Selectors
A selector is the way you identify the elements or groups of elements that will be affected
by your style information. A selector may be simply the name of an element, or they may
take into account the nesting of the element, or a specific attribute value.
Here’s a list of the most common selectors and their syntax.
- element:
- h1{font-size: 125%;}
- element descendant-element:
- p strong{font-style: italic;}
- element.class:
- span.speakerName{font-weight: bold;}
- element #id:
- div#menu{background-color: grey;}
Properties and values
Here’s a list of common properties and their most common
kinds of values. Note that some properties (especially those
that govern size) can be measured in several different ways.
Some of the measurements are in absolute units such as pixels;
others are relative to the font size (for instance, ems), and
others are relative to the surrounding text (for instance,
percentages or larger or smaller).
- display: none | block | inline
- margin-left, margin-right, margin-top, margin-bottom: 1em | 2ex
- padding-left, padding-right, padding-top, padding-bottom: 1em | 2ex
- border: thin solid blue;
- text-align: left | right | center | justify
- line-height: %
- text-indent: 1em | 48px
- text-decoration: underline | overline
- font-size: xx-small | x-small | small | medium | large | x-large | xx-large
- font-size: % | smaller | larger
- font-style: normal | italic
- font-weight: normal | bold
- font-family: serif | sans-serif | cursive | fantasy | monospace
- color: red | #99AABB
- background-color: red | #99AABB
- background-image: url("./image.png")
- background-repeat: repeat | repeat-x | repeat-y | no-repeat
- background-attachment: scroll | fixed
- background-position: ( top | center | bottom ) ( left | center | right )
- background-position: 20% 70%
For more detailed information on CSS colors, see
http://www.w3schools.com/css/css_colornames.asp