 |
News |  |
Tutorials | |
Projects | |
Reviews | |
Authors | |
Contact | |
Search | |
Links |  |
|
Admin | |
CSS Introduction : CSS Properties
The following are common/useful properties I use when making my CSS files.
Common values
Allowed color types:
- Full HEX code: #RRGGBB,
- Websafe HEX: #RGB (#638 is equivalent of #663388)
- Named color: red, green, blue, black, white.. etc.
Lengths
- Pixel size: 10 px;
- Point size: 12 pt;
- EM size: 1 em;
- Percentage: 90 %;
Fonts
font-family: {font name}, {font name}, sans-serif;
font-size: {size pt, px};
font-style: {inherit, normal, italic, oblique};
fon-weight: {inherit, normal, bold};
Text
text-align: {inherit, left, right, center, justify};
text-decoration: {inherit, none, underline, overline, line-through};
text-transform: {inherit, none, capitalize, uppercase, lowercase};
word-wrap: {normal, break-word};
Colors and Background
color: {color}
background-color: {inherit, transparent, color}
background-image: {none, inherit, url("../localfolder/image.png")};
Borders
The border around an element. Increasing the border width expands outwards.
border: {width} {style} {color};
border-width: {length}
border-style: {inherit, solid, dotted, dashed, groove, inset, outset, double}
border-color: {inherit, color}
Margins
The area around the bounding box of an element.
margin: {margin-top} {margin-right} {margin-bottom} {margin-left};
margin-top: {inherit, auto, length, percentage};
margin-right: {inherit, auto, length, percentage};
margin-bottom: {inherit, auto, length, percentage};
margin-left: {inherit, auto, length, percentage};
Padding
The spacing inside the bounding box of an element.
padding: {padding-top} {padding-right} {padding-bottom} {padding-left};
padding-top: {inherit, auto, length, percentage};
padding-right: {inherit, auto, length, percentage};
padding-bottom: {inherit, auto, length, percentage};
padding-left: {inherit, auto, length, percentage};
Positioning
The positioning properties apply in reference to the 'position'.For example a relative top: 10 px; will move the element 10 pixels down from its parent's bounding box, where as an absolute top: 10 px; will place the element 10 pixels from the top of the page.
position: {inherit, static, relative, asbolute (page), fixed (screen)};
top: {inherit, auto, length, percentage};
left: {inherit, auto, length, percentage};
bottom: {inherit, auto, length, percentage};
right: {inherit, auto, length, percentage};
vertical-align: {inherit, middle, text-top|text-bottom, length, percentage }
Other
cursor: {inherit, default, auto, pointer, help, hand..}For a full list of properties, acceptable values, browser compatability, and a load more useful stuff on CSS, please visit Blooberry's Index DOT Css.
Thanks for reading this article.
- Markavian
Author: Markavian
Last edited on: 5th Dec, 6:53 pm
Please
rate this article.
tutorial Pages
