HTML Tags
Basic CSS2 Reference
see W3schools for a complete list
| Property | Description | Values | Example |
| font-family | A prioritized list of font family names and/or generic family names for an element | family-name generic-family |
font-family:Trebuchet MS, Verdana, Arial, Helvetica, sans-serif |
| font-size | Sets the size of a font | xx-small |
font-size:xx-small font-size:x-small font-size:small font-size:medium font-size:large font-size:x-large font-size:xx-large font-size:smaller font-size:larger font-size:12px; font-size:120% 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses |
| font-weight | The font-weight property sets how thick or thin characters in text should be displayed. | normal wider narrower condensed expanded |
font-weight:normal |
| font-style | Sets the style of the font | normal italic oblique |
font-style:normal |
| text-align | Aligns the text in an element | left right center justify |
text-align:left text-align:right text-align:center text-align:justify |
| text-decoration | Adds decoration to text | none underline overline line-through blink |
text-decoration:none text-decoration:underline text-decoration:overline text-decoration:line-through text-decoration:blink |
| line-height | Sets the distance between lines. The numbered values sets a number that will be multiplied with the current font-size to set the distance between the lines. The length values sets a fixed distance between the lines. The percentage values sets a distance between the lines in % of the current font size | normal number length % |
line-height:normal line-height:1.5 line-height:14pt line-height:140% |
| overflow | Sets what happens if the content of an element overflow its area. The auto value displays a scroll-bar for areas where the text is longer than the space allows. | auto | overflow:auto |
| margin-bottom | Sets the bottom margin of an element | auto length |
|
| margin-left | Sets the left margin of an element | auto length |
|
| margin-right | Sets the right margin of an element | auto length |
|
| margin-top | Sets the top margin of an element | auto length |
|
| margin | Shorthand for setting all of the margin properties in one declaration | top right bottom left | h1 {margin: 10px} h1 {margin: 10px 5px} h1 {margin: 10px 5px -10px} h1 {margin: 10px 2% -10px auto} |
| padding-bottom | Sets the bottom padding of an element. | length |
padding-bottom:10px; |
| padding-left | Sets the left padding of an element | length |
padding-left:10px; |
| padding-right | Sets the right padding of an element | length |
padding-right:10px; |
| padding-top | Sets the top padding of an element | length |
padding-top:10px; |
| padding | Shorthand for setting all of the padding properties in one declaration | top right bottom left | padding: 10px the padding will be 10px on all four sides padding: 10px 5px the top and bottom padding will be 10px and the left and right padding will be 5px. padding: 10px 5px 15px the top padding will be 10px, left and right pading will be 5px, bottom padding will be 15px padding: 10px 5px 15px 20px the top padding will be 10px, right padding will be 5px, bottom padding will be 15px, left padding will be 20px |
| background | A shorthand property for setting all background properties in one declaration | color image repeat attachment position |
background-color:#EAEAEA background-image:url('eagle.jpg') background-repeat:repeat-y background-attachment:fixed background-position:top center |
| background-repeat | The background-repeat property sets if/how a background image will be repeated. Vertically, horizontally, both or only once. | repeat repeat-x repeat-y no-repeat |
background-repeat:repeat background-repeat:repeat-x background-repeat:repeat-y background-repeat:no-repeat |
| background-position | Sets the starting position of a background image. | top left top center top right center left center center center right bottom left bottom center bottom right |
background-position: top left |
| The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. | x% y% | background-position: 0% 100% | |
| The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions. | xpos ypos | background-position: 20px 50px | |
| border | A shorthand property for setting all of the properties for the four borders in one declaration | width style color |
border-width:thin dotted #0 |
border-top |
Sets the color of the border positioned at either the top, right, bottom or left side. | border-color | :#FF0000 :red :rgb(255,0,0) |
| border-style |
Sets the style of the border in all directions or positioned at either the top, right, bottom or left side. | :none :hidden :dotted :dashed :solid :double :groove :ridge :inset :outset |
border-style:none border-right-style:hidden border-bottom-style:dotted border-style:dashed border-right-style:solid border-right-style:double border-right-style:groove border-right-style:ridge border-right-style:inset border-right-style:outset |
| border-width |
Sets the width of the border in all directions or positioned at either the top, right, bottom or left side. | border-width | :thin :medium :thick :0.5px |
| clear | Sets the sides of an element where other floating elements are not allowed | left right both none |
:left :right :both :none |
| display | Sets how/if an element is displayed element not displayed displayed as a block-level element displayed as an inline element with no line breaks before or after displayed as a list |
none block inline list-item |
:none :block :inline :list-item |
| width | sets the width of an element. The auto value is default and the browser calculates the actual width. The length value can be set in standar measurements of pixels and ems. | auto % length |
width:auto |
| height | sets the height of an element. The auto value is default and the browser calculates the actual height. The length value can be set in standar measurements of pixels and ems. | auto % length |
height:auto height: 100% height: 300px |
