CSS Styles Quick Reference Guide

Size: px

Start display at page:

Download "CSS Styles Quick Reference Guide"

Barbara Park
6 years ago
Views:

1 Table 1: CSS Font and Text Properties Font & Text Properties Example(s) font-family Font or typeface font-family: Tahoma font-size Size of the font font-size: 12pt font-weight Normal or bold font-weight: bold font-style Normal, italic, or oblique font-style: italic text-align Left, center, right, or justify text-align: right text-indent Indent first line text-indent: 10pt Table 2: Allowable Values for Use with the CSS font-style Property. font-style Property Values normal italic oblique The text is not italicized. Applies to both serif and sans-serif fonts. This value italicizes fonts in the serif family*. This value italicizes fonts in the sansserif family.* Examples font-style: normal font-style: italic font-style: oblique *Despite the fact that the official specifications associate italic with serif fonts and oblique with sans serif fonts, both Netscape and Internet Explorer use the terms interchangeably. Table 3: CSS Length and Height Units Length Definition Code Examples Unit pt Points. A point is 1/72 of an inch. font-size: 12pt pc Picas. A pica is equal to 12 points. font-size: 2pc px Pixels. A pixel is an individual picture element. border-width: 40px em One em is equal to the current font size. font-size: 2em; ex One ex is the heght of the letter x in the current font. font-size: 3ex; % Percentage value compared to normal or default size. font-size: 200% in Size in inches or fractions of an inch font-size: 0.75in mm Size in millimeters or fractions of a millimeter font-size: 30mm cm Size in centimeters or fractions of a centimeter font-size: 14cm 1

2 Table 4: CSS font-size Keywords Absolute keywords xx-small x-small larger small medium large x-large xx-large Relative Keywords smaller larger Absolute values scale font sizes up or down by a factor of 1.5. Thus, if font-size: medium is equivalent to 10 points in a given browser, then font-size: large would be 15 points (10 x 1.5). Relative values increase or decrease the size to the next one in the absolute keyword list. For instance, if the previous setting was font-size small, then font-size: larger would nudge the value up to font-size medium. Table 5: CSS font-weight Properties font-weight Keyword or Value ` Example Normal Normal font weight (same as 400) font-weight: normal Nine-value range of boldness font-weight: 700 bold Bold font weight (same as 700) font-weight: bold bolder lighter Increment to the next higher font weight value in the range Decrement to the next lower font weight value in the range font-weight: bolder font-weight: lighter 2

3 Table 6:CSS Generic Font Names Generic Font Names (Families) serif sans-serif cursive fantasy monospace Example Times New Roman Arial Script MT Bold Earwig Factory Courier New Table 7:CSS text-align Properties text-align Property left center right justify The default value. Produces a left justified alignment. (A flush left and a ragged right margin.) centers text in the middle of the current text column Produces a right justified alignment. (A flush right and a ragged left margin.) Balances text within the current column so that left and right margin edges appear square for all but the last line of a paragraph (Also know as "perfect margins") Table 8: CSS Color and Background Properties Color & Background Properties Example(s) color Color of text, borders, etc... color: blue background-color Background color tag background-color: black background-image background-repeat Image to place in background page How a background image is displayed background-image: url(water.gif) background-repeat: repeat-y 3

4 Table 9: The Allowable CSS background-repeat Values background-repeat values repeat repeat-x repeat-y no-repeat The background image is repeated both vertically and horizontally The image is repeated along the horizontal X axis, but only a single line The image is repeated along the vertical Y axis, but in a single line The image is not repeated at all, but is displayed once Table 10: The CSS Margin Properties Margin properties Example margin-left Controls the left margin of an element margin-left: 120px margin-right Controls the right margin of an element margin-right: 24pt margin-top Controls the top margin of an element margin-top: 2.5cm margin-bottom Controls the bottom margin of an element margin-bottom: lpc margin Controls all four margins with one command Margin 1 in Table 11: Sample Color Names with Hexadecimal and RGB Values Color Name Hexadecimal Value RGB Value antiquewhite #FAEBD7 250, 235, 215 cornflowerblue #6495ED 100, 149, 237 gainsboro #DCDCDC 220, 220, 220 lemonchiffon #FFFACD 255, 250, 205 linen #FAF0E6 250, 240, 230 moccasin #FFE4B5 255, 222, 173 peru #CD853F 205, 133,63 wheat #F5DEB3 238, 222, 179 4

5 Table 12: CSS Border Properties Border Properties Example border-style Style of the border border-style: solid border-width Width of the border border-width: 3pt border-color Color of the border border-color: red Table 13: CSS Border Styles Border Styles solid dotted dashed double groove ridge inset outset none hidden Produces a solid border line. Produces a dotted border line. Creates a dashed border. Shows a double line. Though there are two lines, they and the white space between them equal the same width as a solid line. Renders a 3D groove using the current value of the border-color Draws a 3D ridge using the current value of the border-color property. Produces a 3D inset using the border-color property value. Renders a 3D outset using the current value of the border-color property value. This is the default value. It turns the border off. The same as "none", except that the hidden style prevents any other border from displaying around that element when using collapsing borders. Table 14: The CSS Pseudo-classes pseudo-class Example :hover A dynamic pseudo-class that changes when a mouse pointer hovers over the element. a:hover { color: red; text-decoration: underline } :active :focus A dynamic pseudo-class that changes when activated by the click of a mouse button. A dynamic pseudo-class that changes when the element has focus; that is, when it is ready to accept keyboard focus. a:active {color: blue} a:focus { background-color: ivory } 5

6 pseudo-class Example ink :visited A link-related pseudo-class that controls the appearance of a link. A link-related pseudo-class that controls the appearance of a visited link. a:link { text-decoration: none } a:visited {color: black} :first-child A pseudo-class identifies an element that is the first-child of another element. div > p: first-child { margin-left: 35px } :lang A pseudo-class that identifies the language of an HTML document. html: lang(de) {quotes: \2039 \203A } Table 15: CSS Selectors Selector Example Type (tag) selector Matches tag name p {font-size) 12pt} Class selector matches class name p.small {font-size: 9pt} ID selector matches a tag ID #ez2 {color: blue} Pseudo-class (dynamic) matches a user action a:hoover {color: red) Universal selector matches any tag *{font-size: 11pt} 1 The information in this HTML and XHTML Quick Reference Guide was excerpted from HTML 4.0 Advanced Version 1.0 published by Quessing Courseware Corp. 6

Appendix D CSS Properties and Values

HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by