CSS Attributes and Values Reference List With Examples

Attribute background

Description 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.

Values fixed scroll color value percentage url repeat repeat-x repeat-y no-repeat

backgroundattachment

Used for instructing your background image to scroll or be fixed in place when a user scrolls your page. background-attachment: scroll;

fixed scroll

backgroundcolor backgroundimage

Define the color of the background. background-color: #999999; Define an image to Define as a background on your web page. background-image: url(myBG.jpg);

color value

URL of Image

backgroundposition

Define the position of your background when using an image. background-position: top center;

bottom center left right top

backgroundrepeat

Define whether or not your background will render repeat repeat image tiling or not, and in what direction. repeat-x repeat-y background-repeat: no-repeat; no-repeat Define a border and style. border: #060 2px solid; thin thick solid double groove dotted dashed inDefine

border

outDefine thin ridge hidden four-sides borderbottom Define what the bottom border of the HTML element will number look like. Each edge of the border can look different if color value you like. border-bottom:#090 1px solid; borderbottom-color Define what the bottom border color will be for the element. border-bottom-color:#F00; borderbottom-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 number color value

borderbottom-width border-color

Define the width of the bottom border. border-bottom-width:2px; 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-leftcolor border-leftstyle

Define the left border color. border-left-color: #06C; Define the left border style. border-left-style: double;

color value

solid double groove dotted dashed inDefine

outDefine ridge hidden border-leftwidth border-right Define the left border's width. border-left-width: thick; Define the right border of the element. Each edge of the border can look different if you like. border-right: #F90 thick outset; border-rightcolor border-rightstyle Define a color for the right border. border-right-color: #06C; Define the right border style. border-right-style: double; solid double groove dotted dashed inDefine outDefine ridge hidden number color value number color value number

border-rightwidth border-style

Define the width of the right border. border-right-width: thick; Define a border style. border-style: ridge;

solid double groove dotted dashed inDefine outDefine ridge hidden four-sides number color value color value

border-top

Define a top border. border-top: #960 medium dotted;

border-topcolor

Define a color for the top border. border-top-color: #06C;

border-topstyle

Define a style for the border top. border-top-style: double;

solid double groove dotted dashed inDefine outDefine ridge hidden number

border-topwidth border-width

Define the width for the top border. border-top-width: thin; 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 value

color

Define the color of text. color: #06C;

display

Some HTML elements will take up a block(full display block line) by default. But they can be set to inline where inline 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.

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.

font-name

<div style="font-family:Arial, Helvetica, sansserif;">Hello</div> font-size Define font size in an element. font-size:16px; font-style Render font italicized on fonts that support it. font-style: italic; font-variant Render small capitals on fonts that support it. font-variant:small-caps; font-weight Define the thickness of text using values from 100 to 900. weight100 is thinnest, and 900 is thickest. value font-weight:900; height Define the height of an HTML element. height:340px; letter-spacing Define the value of the space between your letters. letter-spacing:18px; or letter-spacing:2.5em; 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%; 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 upperroman lowerroman decimal percentage number number number auto italic oblique normal small-caps percentage number

inside outside url none list-styleimage Define an image file in place of the normal list styled bullets. Small images work best. list-style-image:url(myBullet.gif); list-styleposition 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> 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 upperroman lowerroman decimal percentage number auto inside outside url

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%;

marginbottom

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 number space directly outside of an HTML element. percentage auto margin-left:10px; Define the right margin of an HTML element. Margins add space directly outside of an HTML element. number percentage auto

margin-right

margin-right:50%; margin-top Define the top margin of an HTML element. Margins add number space directly outside of an HTML element. percentage auto margin-top:30px; Define the padding all around the content inside of an HTML element. padding:8px; paddingbottom padding-left Define the bottom padding of an HTML element. padding-bottom:8px; Define the left padding of an HTML element. padding-left:12px; padding-right Define the right padding of an HTML element. padding-right:12px; padding-top Define the top padding of an HTML element. padding-top:8px; 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; text-align Define the alignment of text. text-align:center; textdecoration Define the text's decoration. Usually used in styling links on a web page. text-decoration:underline; text-indent Define Indention for the first line of an element. text-indent:80px; right center left justify linethrough overline underline none number percentage absolute relative percentage number number percentage number percentage number percentage number percentage number percentage four-sides

padding

texttransform vertical-align

Change text from uppercase to lowercase, and capitalize. text-transform:uppercase; Defines the vertical alignment of your element. vertical-align:top;

capitalize lowercase uppercase verticalvalues nowrap

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;

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;

wholenumber