css attributes and values reference list with examples

7/27/2019 CSS Attributes and Values Reference List With Examples

1/8

CSS Attributes and Values Reference List With Examples

Attribute Description Values

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

fixedscroll

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


2/8

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


3/8

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


4/8

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 and tags are inline by

default, while and

elements display as blocks

by default. Try putting two raw

tags on the same

display line. Not possible unless you set the display value

correctly.

Hello

World

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. font-name


5/8

Hello

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


6/8

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.

Hello

World

inside

outside

list-style-type Define the style for your list items.

Hello

World

circle

square

disc

upper-alpha

lower-alpha

upper-

roman

lower-

romandecimal

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

margin-bottom:40%;

number

percentageauto

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.

number

percentageauto


7/8

margin-right:50%;

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;

numberpercentage

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


8/8

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

css attributes and values reference list with examples

Documents