CSS Properties
CSS properties are used to design the previous selectors just explained in the Creating a Basic Stylesheet Tutorial. If you haven't gone over that tutorial then please do so to gain a greater understanding of setting up a proper CSS stylesheet.
Property codes are added within the brackets ({ }) after the selectors name. For each property add a ; after the property before adding another one. Below is a list of basic CSS properties:
font-family: Arial,Helvetica,serif; |
Specifies fonts. Fonts with more than one word go in parenthesis. Example: "Times New Roman". |
font-style: italic; |
Makes font italic. |
font-style: normal; |
Font appear normal. |
font-weight: bold; |
Makes font bold. |
font-weight: normal; |
Font appears normal. |
font-size: 1em; |
Specifies font size. Can be change to a different number. |
color: #000000; |
Specifies font color. Can be changed to a different color code. |
background: #FFFFFF; |
Specifies background color of the element it is applied to. |
background-image: url(IMAGEURL); |
Adds an image background to the element it's applied to. |
background-repeat: no-repeat; |
Makes an image display only once. Equivalent to the <img src=""> HTML tag. |
background-repeat: repeat-x; |
Makes the background repeat horizontally only. |
background-repeat: repeat-y; |
Makes the background repeat vertically only. |
text-decoration: underline; |
Adds an underline to text or links. Equivalent to the <ins> HTML tag. |
text-decoration: none; |
Removes underline or line-through from text and/or links. |
text-decoration: line-through; |
Strikes text or links. Equivalent to the <del> HTML tag. |
line-height: 30px; |
Sets the line height. |
height: 100px; |
Sets the height of the element it is applied to in pixels. |
height: 100%; |
Sets the height of the element it is applied to in percentage. |
height: 100em; |
Sets the height of the element it is applied to in em. |
width: 100px; |
Sets the width of the element it is applied to in pixels. |
width: 100&; |
Sets the width of the element it is applied to in percentage. |
width: 100em; |
Sets the width of the element it is applied to in em. |
text-align: right; |
Aligns text to the right within the element it is applied to. |
text-align: left; |
Aligns text to the left within the element it is applied to. |
text-align: center; |
Aligns text to the middle of the element it is applied to. |
padding: 5px; |
Gives a padding (space-width) within the entire element. |
padding-top: 5px; |
Gives a padding (space-width) only within the top of the element only. |
padding-left: 5px; |
Gives a padding (space-width) within the left of the element only. |
padding-right: 5px; |
Gives a padding (space-width) within the right of the element only. |
padding-bottom: 5px; |
Gives a padding (space-width) within the bottom of the element only. |
display: inline; |
Displays as a inline element with no line breaks before or after the element. |
display: block; |
Displays as a block element with line breaks before and after the element. |
border: 1px solid #000000; |
Adds a solid border to the entire element. 1 can be changed to another number, solid can be changed to dotted or dashed. |
margin: 10px; |
Adds a margin around the element. Change 10 to another number. |
margin-right: 10px; |
Adds a margin to the right of the element only. |
margin-left: 10px; |
Adds a margin to the left of the element only. |
margin-top: 10px; |
Adds a margin to the top of the element only. |
margin-bottom: 10px; |
Adds a margin to the bottom of the element only. |
When applying properties to selectors it should be done in a neat, readable manner so you won't get confused. Below is an example of some CSS properties applied to a few selector's:
body {
font-family: Arial, Helvetica, serif;
font-size: 1em;
background: #FFFFFF;
}
p {
font-size: 1em;
line-height: 30px;
}
/*----Main Content----*/
.box {
display: block;
border: 2px solid #FF0000;
}
#content {
width: 100%;
background: #CCCCCC;
}
/*----Footer Content----*/
#footer {
font-size: .8em;
}
You will learn new CSS properties in later tutorials for advanced usage. Please practice the ones above to get used to using the properties just learned.