| Attribute |
Description |
Values |
| background |
Allows you to Define all the background
properties that are listed below this one, all together in one rule. Or
you can choose to use the background specific properties below instead
and get the same results.
And here is how we apply values all together in an attribute:
background: url(myBG.jpg) top center fixed
repeat-x;
That can be done in most styling attributes or properties.
|
fixed
scroll
color value
percentage
url
repeat
repeat-x
repeat-y
no-repeat
|
| background-attachment |
Used for instructing your background image to scroll
or be fixed in place when a user scrolls your page.
background-attachment: scroll; |
fixed
scroll
|
| background-color |
Define the color of the background.
background-color: #999999; |
color value
|
| background-image |
Define an image to Define as a background on your web
page.
background-image: url(myBG.jpg); |
URL of Image
|
| background-position |
Define the position of your background when using an
image.
background-position: top center; |
bottom
center
left
right
top
|
| background-repeat |
Define whether or not your background will render
repeat image tiling or not, and in what direction.
background-repeat: no-repeat; |
repeat
repeat-x
repeat-y
no-repeat
|
| border |
Define a border and style.
border: #060 2px solid; |
thin
thick
solid
double
groove
dotted
dashed
inDefine
outDefine
thin
ridge
hidden
four-sides
|
| border-bottom |
Define what the bottom border of the HTML element
will look like. Each edge of the border can look different if you like.
border-bottom:#090 1px solid; |
number
color value
|
| border-bottom-color |
Define what the bottom border color will be for the
element.
border-bottom-color:#F00;
|
color value
|
| border-bottom-style |
Define what the bottom border style will be for the
element.
border-bottom-style:dashed; |
solid
double
groove
dotted
dashed
inDefine
outDefine
ridge
hidden
|
| border-bottom-width |
Define the width of the bottom border.
border-bottom-width:2px; |
number
|
| border-color |
Define the color of a border.
border-color: #F00; |
color value
|
| border-left |
Define the left border of the element. Each edge of
the border can look different if you like.
border-left: #06C thin groove; |
number
color value
|
| border-left-color |
Define the left border color.
border-left-color: #06C; |
color value
|
| border-left-style |
Define the left border style.
border-left-style: double; |
solid
double
groove
dotted
dashed
inDefine
outDefine
ridge
hidden
|
| border-left-width |
Define the left border's width.
border-left-width: thick; |
number
|
| border-right |
Define the right border of the element. Each edge of
the border can look different if you like.
border-right: #F90 thick outset; |
number
color value
|
| border-right-color |
Define a color for the right border.
border-right-color: #06C; |
color value
|
| border-right-style |
Define the right border style.
border-right-style: double; |
solid
double
groove
dotted
dashed
inDefine
outDefine
ridge
hidden
|
| border-right-width |
Define the width of the right border.
border-right-width: thick; |
number
|
| border-style |
Define a border style.
border-style: ridge; |
solid
double
groove
dotted
dashed
inDefine
outDefine
ridge
hidden
four-sides
|
| border-top |
Define a top border.
border-top: #960 medium dotted; |
number
color value
|
| border-top-color |
Define a color for the top border.
border-top-color: #06C; |
color value |
| border-top-style |
Define a style for the border top.
border-top-style: double; |
solid
double
groove
dotted
dashed
inDefine
outDefine
ridge
hidden
|
| border-top-width |
Define the width for the top border.
border-top-width: thin; |
number
|
| border-width |
Define the width for the entire border.
border-width: thick; |
number
|
| clear |
Clear space on the side of an element. Causes any
floating elements in that space to display the next line down.
clear: left;
|
left
right
both
none
|
| color |
Define the color of text.
color: #06C; |
color value
|
| display |
Some HTML elements will take up a block(full display
line) by default. But they can be set to inline where needed. And tags
that do not block by default can render as a block if you define it for
the element's display attribute. The <IMG> and <SPAN> tags
are inline by default, while <DIV> and <P> elements display
as blocks by default. Try putting two raw <P> tags on the same
display line. Not possible unless you set the display value correctly.
<p style="display:
inline;">Hello</p>
<p style="display: inline;"> World</p>
Try the example above, then remove the styling and view it. Or
change "inline" to "block" and view. |
block
inline
|
| float |
Float an element to the left or right. Other content
will wrap around a floated element.
float:right; |
left
right
|
| font-family |
Define the font family you want to use in an element.
<div style="font-family:Arial, Helvetica, sans-serif;">Hello</div> |
font-name
|
| font-size |
Define font size in an element.
font-size:16px; |
percentage
number
|
| font-style |
Render font italicized on fonts that support it.
font-style: italic; |
italic
oblique
normal
|
| font-variant |
Render small capitals on fonts that support it.
font-variant:small-caps;
|
small-caps
|
| font-weight |
Define the thickness of text using values from 100 to
900. 100 is thinnest, and 900 is thickest.
font-weight:900;
|
weight-value
|
| height |
Define the height of an HTML element.
height:340px;
|
number
auto
|
| letter-spacing |
Define the value of the space between your letters.
letter-spacing:18px;
or
letter-spacing:2.5em; |
number
|
| line-height |
Defines the vertical space between lines of text in an
HTML element.
line-height:1.8em;
or
line-height:24px;
or
line-height:20%;
|
percentage
number
|
| list-style |
Define all of the characteristics of HTML list elements
in one decleration.
list-style:upper-roman inside;
|
circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
inside
outside
url
none
|
| list-style-image |
Define an image file in place of the normal list styled
bullets. Small images work best.
list-style-image:url(myBullet.gif);
|
url
|
| list-style-position |
Define the placement of your bullets points or numbers
within your list items.
<ul>
<li style="list-style-position:inside;">Hello</li>
<li style="list-style-position:outside;">World</li>
</ul>
|
inside
outside
|
| list-style-type |
Define the style for your list items.
<ul>
<li style="list-style-type:
upper-roman;">Hello</li>
<li style="list-style-type:
upper-roman;">World</li>
</ul>
|
circle
square
disc
upper-alpha
lower-alpha
upper-roman
lower-roman
decimal
|
| margin |
Define the margin space around the outside of an HTML
element. This will set all margins uniformaly to a value if used. Use
the attributes below for fine tuning your margins and setting different
values for each side.
margin:30%; |
percentage
number
auto
|
| margin-bottom |
Define the bottom margin of an HTML element. Margins
add space directly around the outside of an HTML element.
margin-bottom:40%;
|
number
percentage
auto
|
| margin-left |
Define the left margin of an HTML element. Margins add
space directly outside of an HTML element.
margin-left:10px;
|
number
percentage
auto
|
| margin-right |
Define the right margin of an HTML element. Margins add
space directly outside of an HTML element.
margin-right:50%;
|
number
percentage
auto |
| margin-top |
Define the top margin of an HTML element. Margins add
space directly outside of an HTML element.
margin-top:30px;
|
number
percentage
auto |
| padding |
Define the padding all around the content inside of an
HTML element.
padding:8px;
|
number
percentage
four-sides
|
| padding-bottom |
Define the bottom padding of an HTML element.
padding-bottom:8px;
|
number
percentage
|
| padding-left |
Define the left padding of an HTML element.
padding-left:12px;
|
number
percentage
|
| padding-right |
Define the right padding of an HTML element.
padding-right:12px;
|
number
percentage
|
| padding-top |
Define the top padding of an HTML element.
padding-top:8px;
|
number
percentage
|
| position |
Define the position type of an element and how it
relates to other elements around it. Use the Top, Right, Bottom, and
Left attributes to define where the object will be placed exactly.
position:fixed;
|
absolute
relative
percentage
number
|
| text-align |
Define the alignment of text.
text-align:center;
|
right
center
left
justify
|
| text-decoration |
Define the text's decoration. Usually used in styling
links on a web page.
text-decoration:underline;
|
line-through
overline
underline
none
|
| text-indent |
Define Indention for the first line of an element.
text-indent:80px;
|
number
percentage
|
| text-transform |
Change text from uppercase to lowercase, and
capitalize.
text-transform:uppercase;
|
capitalize
lowercase
uppercase
|
| vertical-align |
Defines the vertical alignment of your element.
vertical-align:top;
|
vertical-values
|
| white-space |
Prevent your text from wrapping with nowrap. Normally
text will automatically break line to the next line down if the words
reach a barrirer inside an element. Use this to prevent the auto-wrap.
Usually results in a horizontal slider appearing unless you set the
overflow attribute to the "hidden" value.
white-space:nowrap;
|
nowrap
|
| width |
Define the width of an element.
width:100%;
or
width:800px;
|
number
percentage
auto
|
| word-spacing |
Define the value of the space between words in your
text. You can define a negative value in this attribute. It may not
render visually in your HTML editor, but the browser software will
render it, not to worry.
word-spacing:48px;
|
number
|
| z-index |
Define the z-index of an HTML element. Used in layering
elements, or stacking elements. The element with the lowest z-index
would be on the bottom of the stack(layers).
z-index:5;
|
whole-number |
