Computer Technology 8/9 Cascading Style Sheet Quick Reference Properties Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are not widely supported or if they are only supported by Internet Explorer. background: #ffffff transparent url(images/pattern.gif) fixed /* background doesn't move when page scrolls */ repeat repeat-x /* tile an image horizontal only */ repeat-y /* tile an image vertical only */ no-repeat top center bottom 2px 1px /* exact positioning, from top */ Example: #footer { background:transparent url(images/footer.gif) repeat-x bottom; } This example tiles a transparent GIF only in a horizontal direction, at the bottom of an element (perhaps a DIV) that contains id="footer". background-attachment: fixed background-color: #ffcc00 transparent background-image: url(images/something.gif) background-position: top center bottom 2px 1px background-repeat: repeat repeat-x
border: repeat-y no-repeat 1px solid dashed dotted double /* needs at least 3px to see effect */ ridge /* regular 3d border needs at least 4px to see effect */ groove /* kind of strange, needs at least 4px to see effect */ inset /* like a recessed bevel */ outset /* like a button bevel */ #000000 Example: div { border:2px solid #ffffff; } Browser Differences: borders are drawn INSIDE the container in IE, Opera 7. borders are drawn OUTSIDE the container in Firefox, Netscape 7, Safari. (part of the annoying "box model" conflict) border-collapse: border-top: collapse border-: border-bottom: border-: bottom: clear: 4px /* positions an object 4px up from the bottom of its container */ both clip: color: Clears a "floated" element. See also: float: rect(top bottom ) #000000 /* #RRGGBB, each digit is 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f */
cursor: display: float: rgb(0,0,0) /* (R,G,B), each digit is 0 to 255, does NOT work everywhere */ aqua /* #00ffff */ black /* #000000 */ blue /* #0000ff */ fuchsia /* #ff00ff */ gray /* #808080 */ green /* #008000 */ lime /* #00ff00 */ maroon /* #800000 */ navy /* #000080 */ olive /* #808000 */ purple /* #800080 */ red /* #ff0000 */ silver /* #c0c0c0 */ orange /* #ffa500 */ teal /* #008080 */ white /* #ffffff */ yellow /* #ffff00 */ auto crosshair default pointer /* The cursor that indicates a link on rollover */ move N-resize /* N can be replaced with S, E, W, NE, NW, SE, SW */ text /* Usually rendered as an I-bar */ wait /* Usually rendered as a watch or hourglass */ help /* Makes the element disappear */ block inline Floats something like an image so text flows around it. font-family: verdana,helvetica,sans-serif /* easiest to read at small sizes */ arial,helvetica,sans-serif times,times new roman,serif courier new,courier,monospace cursive /* unpredictable */ fantasy /* unpredictable */ Rules: A font only works for people who have that font installed on their computer. Take into consideration both Windows and Macintosh users. Always include a generic font at the end of the font list.
font-size: 10px /* very small */ 11px /* small to depending on font */ 12px /* */ 16px /* titles */ 40px /* really big */ 0.5em /* relative to parent element */ larger /* relative to parent element */ smaller /* relative to parent element */ font-style: font-variant: font-weight: height: : xx-small /* like HTML H6 */ x-small small /* like HTML H5 */ medium /* like HTML H4 */ large /* like HTML H3 */ x-large /* like HTML H2 */ xx-large /* like HTML H1 */ italic oblique /* same as italic */ small-caps bold 200px 90% 4px letter-spacing: 5px Called "kerning" in Typography. line-height: 130% /* percentage of the font-size, 130 gives a nice look */ 10px /* scrunch 11px font lines together */ Called "Ledding" in Typography. list-style: disc circle square
decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-alpha lower-latin upper-alpha upper-latin url(images/bullet.gif) margin: Note: If you want a custom bullet image, it works better this way: ul {margin:0; padding:0; list-style:;} li { margin:0 0 6px 0; padding:0 0 0 16px; /* padding for bullet image */ background:transparent url(images/bullet.gif) no-repeat; } 0 /* to turn all margins off, no unit is necessary */ 4px /* use a single value for the same margin on all sides */ 2px 0 2px 0 /* specify separate top,, bottom, margins (clockwise from top) */ auto /* if AND are auto, element will be centered */ Margins add transparent space OUTSIDE the background and border. margin-top: Examples: img {margin:2px 0 2px 0;} div (margin: 4px auto 10px auto;} /* div will be horizontally centered */ margin-: margin-bottom: margin-: min-height: Not supported in IE so its fairly useless min-width: Not supported in IE so its fairly useless overflow: padding: visible hidden scroll auto
0 /* to turn all padding off, no unit is necessary */ 4px /* use a single unit for even padding on all sides */ 2px 0 2px 0 /* specify separate top,, bottom, padding (clockwise from top) */ Padding adds space INSIDE the background and border. padding-top: padding-: padding-bottom: padding-: position: : static /* where it would "ly" be in the html flow */ absolute /* position inside the parent element */ relative /* position relative to where it would "ly" be */ fixed /* do not scroll the element as the page scrolls */ 4px Positions an element from the -hand edge of its container. text-align: center justify /* makes even and margins, like a newspaper column */ text-decoration: underline overline line-through blink /* does not work in IE, only works in Firefox, Opera 7 */ text-transform: top: capitalize lowercase uppercase 4px vertical-align: baseline middle sub /* do not use, messes up line spacing, see below */ super /* do not use, messes up line spacing, see below */ text-top text-bottom
Making superscripts and subscripts without messing up the line spacing: CSS.sups {position:relative; top:-4px;}.subs {position:relative; top:4px;} visibility: HTML Here's a superscript<span class="sups">1</span>. hidden /* the element will still influence other elements on the page */ visible white-space: width: z-index: To remove the element completely, use display:; instead. nowrap /* do not wrap a line until a line break, somewhat buggy in some browsers */ pre /* like using <pre> in HTML, requires "strict" mode for IE 6 */ 200px 90% 5 /* a DIV with a z-index of 5 will be "above" those with 4 or lower */ Z-index only applies to other objects in the same container.