CSS Properties List

Including CSS In Your Pages

There are three ways to use CSS in your web pages. They are:

  • Inline Style Properties

    Description:
    Declaring CSS styles directly within an html element with the html style attribute.
    Usage:
    <div style="color:#fff;background:#000;"></div>

  • Internal Style Declaration

    Description:
    Declaring CSS styles in the head element of a html file with the style tag.
    Usage:

    Contained in head section of web page

    CSS Code:

    					
<style type="text/css">
  div {
    color : #fff;
    background : #000;
  }

  p {
	font-family : verdana;
  }

</style>
    Notes:
    The style tags must be used in the head section of a web page, and use the type attribute with the value of "text/css".

  • External Style Sheets

    Description:
    Declaring CSS styles in a separate file and linking to it from a html file by using the "link" element in the head tag. The external file should include only CSS.
    Usage:

    Link used to include a CSS file named styles.css that is in a folder named "css":

    					
<link href="css/styles.css" type="text/css" rel="stylesheet" />

    Example of content within the styles.css file being linked to:

    CSS Code:

    					
div {
  color : #f00;
  font-weight : bold;
}

li {
  display : inline;
}
    Notes:
    The link tag must be used in the head section of a web page. The external CSS file should only contain CSS properties, don't include any html elements. The src, type and rel attributes are required like in the example.

CSS Selectors

With internal and external CSS there are a few different ways to select which html elements to apply styles to:

  • Tags

    You can apply styles to elements by using that element as the selector. You simply name the tag followed by the style properties between a pair of curly braces.

    CSS:

    				
body {
  background-color: #090;
  text-align : center;
}

p {
  font-size : 1.2em;
  font-variant: small-caps
}

  • Classes

    You can declare styles to use on different classes. Any html element that you declared with the defined class will have the styles applied to it. To declare a style for a specific class, precede the class name with a period and declare the styles within curly braces.

    CSS Code:

    				
.green_text {
	color : #090;
	font-style : italic;
}

.clear {
	clear : both;
}

  • Identifiers

    You can apply styles to a specific "id". The element with that identifier will have those styles applied to it. To apply styles to an id you precede the id name with a hash, or pound sign (#).

    CSS:

    				
#intro {
	float : right;
}

#content-display {
	text-transform : capitalize;
}

  • Combinations

    You can combine these methods of applying styles to elements. If for example you want an element within a specific class or identifier to have a special style, you name the class/identifier then add the element afterwards.

    CSS:

    			
#intro h1 {
color : #ff0000;
}

.content p {
text-align : right;
}

CSS Dimension Properties

Used to control the dimensions of an html element

  • width

    Description:
    Sets the width of an html element
    Values:
    pixels(px), percentage(%), Em's(em), auto

  • height

    Description:
    Sets the height of an html element
    Values:
    pixels(px), percentage(%), Em's(em), auto

  • max-width

    Description:
    Sets the maximum width of an html element
    Values:
    pixels(px), percentage(%), Em's(em), auto

  • max-height

    Description:
    Sets the maximum height of an html element
    Usage:
    Values:
    pixels(px), percentage(%), Em's(em), auto

  • min-width

    Description:
    Sets the minimum width of an html element
    Usage:
    Values:
    pixels(px), percentage(%), Em's(em), auto

  • min-height

    Description:
    Sets the minimum height of an html element
    Usage:
    Values:
    pixels(px), percentage(%), Em's(em), auto

  • line-height

    Description:
    Sets the height of the lines text is contained in
    Usage:
    Values:
    pixels(px), percentage(%), Em's(em), Points(pt), auto

CSS Text and Font Properties

Used to control display of text

  • color

    Description:
    Sets the color of text within an html element
    Values:

  • font

    Description:
    Use to set all font properties in one declaration
    Usage:
    Values:
    font-style, font-variant, font-weight, font-size/line-height, font-family

  • font-family

    Description:
    Sets a list of font family names for an element
    Values:
    Font family or generic name, ei. Arial, Verdana, Impact

  • font-size

    Description:
    Sets the size of the font within an html element
    Values:
    Em's(em), Pixels(px), Points(pt)

  • font-style

    Description:
    Sets the style of the font of an html element
    Values:
    normal, italic, oblique

  • font-variant

    Description:
    Make the font display in small caps or normal
    Values:
    normal, small-caps

  • text-align

    Description:
    Sets the justification on text within a html element
    Values:
    left, right, center, justify

  • text-transform

    Description:
    Allows you to control the capitalization of the letters of text within an element
    Values:
    none, lowercase, uppercase, capitalize

  • text-decoration

    Description:
    Sets the decoration of text within an element
    Values:
    none, underline, overline, line-through, blink

  • text-indent

    Description:
    Sets the indentation of text within an element
    Values:
    Em's(em), Pixels(px), Points(pt)

  • white-space

    Description:
    Sets how white space will be handled
    Values:
    normal, pre, nowrap

  • word-spacing

    Description:
    Sets the spacing between words in an html element
    Values:

  • letter-spacing

    Description:
    Sets the width of an html element
    Usage:
    Values:
    normal, em, px, pt

CSS Background Properties

Used to control background display of elements

  • background

    Description:
    Used to set all background properties in one declaration.
    Values:
    background-image, background-color, background-repeat, background-attachment, background-position

  • background-color

    Description:
    Sets the background color of an html element
    Values:
    Hexadecimal, RGB, color name, transparent

  • background-image

    Description:
    Sets an image as the background of an html element
    Values:
    url, none

  • background-position

    Description:
    Determines the starting point of an image within the background of an html element
    Values:
    top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x&y pos, x&y %

  • background-attachment

    Description:
    Determines whether the background image should scroll with the page or be fixed in place
    Values:
    fixed, scroll

  • background-repeat

    Description:
    Determines how a background image will be repeated
    Values:
    repeat, no-repeat, repeat-x, repeat-y

CSS Margin Properties

Used to control margins of elements

  • margin

    Description:
    Used to set the margin for all four sides of an element at once. Margins are the space between the outer edge of the element and any content around it. If you specify one value all four sides will be set to it. Specify 2 values and the first applies to the top/bottom and second to left/right. Set 4 values and the values are applied in this order; top, right, bottom, left
    Values:
    pixels(px)

  • margin-top

    Description:
    Sets the top margin of an html element
    Values:
    Pixels(px)

  • margin-right

    Description:
    Sets the right margin of an html element
    Values:
    Pixels(px)

  • margin-bottom

    Description:
    Sets the bottom margin of an html element
    Values:
    Pixels(px)

  • margin-left

    Description:
    Sets the left margin of an html element
    Values:
    Pixels(px)

CSS Padding Properties

Used to control padding of elements

  • padding

    Description:
    Used to set the padding for all four sides of an element at once. Padding ads space between the elements inner edge and the content it contains. If you specify one value all four sides will be set to it. Specify 2 values and the first applies to the top/bottom and second to left/right. Set 4 values and the values are applied in this order; top, right, bottom, left
    Values:
    pixels(px)

  • padding-top

    Description:
    Sets the top padding of an html element
    Values:
    length

  • padding-right

    Description:
    Sets the right padding of an html element
    Values:
    length

  • padding-bottom

    Description:
    Sets the bottom padding of an html element
    Values:
    length

  • padding-left

    Description:
    Sets the left padding of an html element
    Values:
    length

CSS Border Properties

Used to control borders of elements

  • border

    Description:
    Allows you to set border style, width and color to all 4 borders of an element at once.
    Usage:
    border: 1px solid #f00;
    Values:
    border-width, border-style, border-color

  • border-color

    Description:
    Sets the border color of an html element
    Usage:
    Values:

  • border-style

    Description:
    Sets the border style of an html element
    Values:
    solid, dotted, dashed, ridge, groove, inset, outset

  • border-width

    Description:
    Sets the border width of an html element
    Values:
    Pixels

  • border-top

    Description:
    Sets the border style, width and color of the top of an html element
    Values:
    border-width, border-style, border-color

  • border-top-color

    Description:
    Sets the top border color of an html element
    Values:
    color

  • border-top-style

    Description:
    Sets the top border style of an html element
    Values:
    solid, dotted, dashed, ridge, groove, inset, outset

  • border-top-width

    Description:
    Sets the top border width of an html element
    Values:

  • border-right

    Description:
    Sets the right border width, style and color of an html element
    Values:
    border-width, border-style, border-color

  • border-right-color

    Description:
    Sets the right border color of an html element
    Values:
    color

  • border-right-style

    Description:
    Sets the right border style of an html element
    Values:
    solid, dotted, dashed, ridge, groove, inset, outset

  • border-right-width

    Description:
    Sets the right border width of an html element
    Values:
    Pixels(px)

  • border-bottom

    Description:
    Sets the bottom border width, style and color of an html element
    Values:

  • border-bottom-color

    Description:
    Sets the bottom border color of an html element
    Values:
    color

  • border-bottom-style

    Description:
    Sets the bottom border style of an html element
    Values:
    solid, dotted, dashed, ridge, groove, inset, outset

  • border-bottom-width

    Description:
    Sets the bottom border width of an html element
    Values:
    Pixels(px)

  • border-left

    Description:
    Sets the left border width, style and color of an html element
    Values:
    border-width, border-style, border-color

  • border-left-color

    Description:
    Sets the left border color of an html element
    Values:
    color

  • border-left-style

    Description:
    Sets the left border style of an html element
    Values:
    solid, dotted, dashed, ridge, groove, inset, outset

  • border-left-width

    Description:
    Sets the left border width of an html element
    Values:
    Pixels(px)

CSS Layout/Display Properties

Used to control how elements are positioned and displayed.

  • float

    Description:
    Aligns an element to one side of its parent and allows text to flow around the other side.
    Values:
    none, left, right

  • clear

    Description:
    Keeps floating elements from appearing on specified side.
    Values:
    none, left, right, both

  • display

    Description:
    Use to set how an element will be displayed.
    Values:
    none, block, inline, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption

  • position

    Description:
    Sets the layout of an element
    Values:
    static, relative, absolute, fixed

  • top

    Description:
    Sets the distance between the top edge of an element and the top edge of its parent element
    Values:
    auto, length, %

  • left

    Description:
    Sets the distance between the left edge of an element and the left edge of its parent element
    Values:
    auto, length, %

  • bottom

    Description:
    Sets the distance between the bottom edge of an element and the bottom edge of its parent element
    Values:
    auto, length, %

  • right

    Description:
    Sets the distance between the rigth edge of an element and the right edge of its parent element
    Values:
    auto, length, %

  • overflow

    Description:
    Sets how to display content that takes up more room than its element allows
    Values:
    auto, visible, hidden, scroll

  • visibility

    Description:
    Sets whether or not to show an element
    Values:
    visible, hidden

  • vertical-align

    Description:
    Sets the vertical alignment of an element
    Values:
    baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, %

  • z-index

    Description:
    Sets the stacking order of an element
    Values:
    auto, number

  • cursor

    Description:
    Sets the mouse cursor to be displayed
    Values:
    url, auto, crosshair, default, pointer, move, text, wait, e-resize, ne-resize, mw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, help

  • clip

    Description:
    Sets the shape of an html element
    Values:
    auto, shape

CSS List Properties

Used to control display of list items

  • list-style

    Description:
    Sets all the list style properties in one declaration
    Values:
    list-style-type, list-style-image, list-style-position

  • list-style-type

    Description:
    Sets the list marker or bullet of an html list item
    Values:
    none, disc, circle, square, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, Armenian, georgian

  • list-style-image

    Description:
    Sets an image to use as a list marker or bullet
    Values:
    url, none

  • list-style-position

    Description:
    Sets where the list item marker will be displayed
    Values:
    inside, outside

CSS Table Properties

Used to control display of tables

  • border-collapse

    Description:
    Sets the border model of a table
    Values:
    collapse, seperate

  • border-spacing

    Description:
    Sets the distance between borders of adjacent table cells
    Values:
    length

  • table-layout

    Description:
    Sets the layout of a table
    Values:
    auto, fixed
    Notes:
    Speeds up rendering for fixed width tables if set to fixed

  • caption-side

    Description:
    Sets the width of an html element
    Usage:
    Values:

  • empty-cells

    Description:
    Sets whether cells with no content should have visible borders.
    Values:
    show, hide

Continue to the CSS Turoials

Learn how to apply these properties with our CSS Tutorials

CSS Tutorials