Advanced Styles Property Definitions

  • Display: The display property specifies the type of box an element should generate.
  • Position: The position property is used to position an element.
  • Top: For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its containing element. For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position. Note: If "position:static", the top property has no effect.
  • Right: For absolutely positioned elements, the right property sets the right edge of an element to a unit to the left/right of the right edge of its containing element. For relatively positioned elements, the right property sets the right edge of an element to a unit to the left/right to its normal position. Note: If "position:static", the right property has no effect.
  • Bottom: For absolutely positioned elements, the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its containing element. For relatively positioned elements, the bottom property sets the bottom edge of an element to a unit above/below its normal position. Note: If "position:static", the bottom property has no effect.
  • Left: For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its containing element. For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position. Note: If "position:static", the left property has no effect.
  • Float: With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts.
  • Clear: The clear property specifies which sides of an element where other floating elements are not allowed.
  • Z-index: The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
  • Direction: The direction property specifies the text direction/writing direction.
  • Overflow: The overflow property specifies what happens if content overflows an element's box.
  • Clip: What happens if an image is larger than its containing element? - The clip property lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed. Note: The clip property does not work if "overflow:visible".
  • Visibility: The visibility property specifies whether or not an element is visible. Tip: Even invisible elements takes up space on the page. Use the "display" property to create invisible elements that do not take up space!
  • Width: The width property sets the width of an element. Note: The width property does not include padding, borders, or margins!
  • Min-width: The min-width property sets the minimum width of an element. Note: The min-width property does not include padding, borders, or margins!
  • Max-width: The max-width property sets the maximum width of an element. Note: The max-width property does not include padding, borders, or margins!
  • Height: The height property sets the height of an element. Note: The height property does not include padding, borders, or margins!
  • Min-Height: The min-height property sets the minimum height of an element. Note: The min-height property does not include padding, borders, or margins!
  • Max-height: The max-height property sets the maximum height of an element. Note: The max-height property does not include padding, borders, or margins!
  • Vertical-align: The vertical-align property sets the vertical alignment of an element.
  • Color: CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.
  • Background color: The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin).
  • Background-attachment: The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
  • Background-repeat: The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally.
  • Background-image: The background-image property sets the background image for an element. The background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
  • Background-position: The background-position property sets the starting position of a background image. Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed".
  • Text-indent: The text-indent property specifies the indentation of the first line in a text-block. Note: Negative values are allowed. The first line will be indented to the left if the value is negative.
  • Text-align: The text-align property specifies the horizontal alignment of text in an element.
  • Text-decoration: The text-decoration property specifies the decoration added to text. Note: The color of the decoration should be set by the "color" property.
  • Letter-spacing: The letter-spacing property increases or decreases the space between characters in a text.
  • Word-spacing: The word-spacing property increases or decreases the white space between words. Note: Negative values are allowed.
  • Text-transform: The text-transform property controls the capitalization of text.
  • White-space: The white-space property specifies how white-space inside an element is handled.
  • Line-height: The line-height property specifies the line height. Note: Negative values are not allowed.
  • Font-family: The font-family property specifies the font for an element. The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
  • There are two types of font family names:
    • family-name - The name of a font-family, like "times", "courier", "arial", etc.
    • generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
  • Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: Separate each value with a comma. Note: If a font name contains white-space, it must be quoted. Single quotes must be used when using the "style" attribute in HTML.
  • Font-style: The font-style property specifies the font style for a text.
  • Font-variant: In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text. The font-variant property specifies whether or not a text should be displayed in a small-caps font.
  • Font-weight: The font-weight property sets how thick or thin characters in text should be displayed.
  • Font-size: The font-size property sets the size of a font.
  • Margin: The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once
  • Margin-top: The margin-top property sets the top margin of an element. Note: Negative values are allowed.
  • Margin-right: The margin-right property sets the right margin of an element. Note: Negative values are allowed.
  • Margin-bottom: The margin-bottom property sets the bottom margin of an element. Note: Negative values are allowed.
  • Margin-left: The margin-left property sets the left margin of an element. Note: Negative values are allowed.
  • Padding: The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.
  • Padding-top: The padding-top property sets the top padding (space) of an element. Note: Negative values are not allowed.
  • Padding-right: The padding-right property sets the right padding (space) of an element. Note: Negative values are not allowed.
  • Padding-bottom: The padding-bottom property sets the bottom padding (space) of an element. Note: Negative values are not allowed.
  • Padding-left: The padding-left property sets the left padding (space) of an element. Note: Negative values are not allowed.
  • Border-top: The border-top shorthand property sets all the top border properties in one declaration. The properties that can be set, are (in order): border-top-width, border-top-style, and border-top-color. If one of the values above are missing, e.g. border-top:solid #ff0000, the default value for the missing property will be inserted, if any.
  • Border-right: The border-right shorthand property sets all the right border properties in one declaration. The properties that can be set, are (in order): border-right-width, border-right-style, and border-right-color. It does not matter if one of the values above are missing, e.g. border-right:solid #ff0000; is allowed.
  • Border-bottom: The border-bottom shorthand property sets all the bottom border properties in one declaration. The properties that can be set, are (in order): border-bottom-width, border-bottom-style, and border-bottom-color. It does not
  • Border-left: The border-left shorthand property sets all the left border properties in one declaration. The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color. It does not matter if one of the values above are missing, e.g. border-left:solid #ff0000; is allowed.
  • Border-color: The border-color property sets the color of an element's four borders. This property can have from one to four values.
  • Examples:
    • border-color:red green blue pink;
      • top border is red
      • right border is green
      • bottom border is blue
      • left border is pink
    • border-color:red green blue;
      • top border is red
      • right and left borders are green
      • bottom border is blue
    • border-color:dotted red green;
      • top and bottom borders are red
      • right and left borders are green
    • border-color:red;
      • all four borders are red
  • Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.
  • Border-top-color: The border-top-color property sets the color of an element's top border. Note: Always declare the border-style property before the border-top-color property. An element must have borders before you can change the color.
  • Border-right-color: The border-right-color property sets the color of an element's right border. Note: Always declare the border-style property before the border-right-color property. An element must have borders before you can change the color.
  • Border-bottom-color: The border-bottom-color property sets the color of an element's bottom border. Note: Always declare the border-style property before the border-bottom-color property. An element must have borders before you can change the color.
  • Border-left-color: The border-left-color property sets the color of an element's left border. Note: Always declare the border-style property before the border-left-color property. An element must have borders before you can change the color.
  • Border-style: The border-style property sets the style of an element's four borders. This property can have from one to four values.
  • Examples:
    • border-style:dotted solid double dashed;
      • top border is dotted
      • right border is solid
      • bottom border is double
      • left border is dashed
    • border-style:dotted solid double;
      • top border is dotted
      • right and left borders are solid
      • bottom border is double
    • border-style:dotted solid;
      • top and bottom borders are dotted
      • right and left borders are solid
    • border-style:dotted;
      • all four borders are dotted
  • Border-top-style: The border-top-style property sets the style of an element's top border.
  • Border-right-style: The border-right-style property sets the style of an element's right border.
  • Border-bottom-style: The border-bottom-style property sets the style of an element's bottom border.
  • Border-left-style: The border-left-style property sets the style of an element's left border.
  • Border-width: The border-width property sets the width of an element's four borders. This property can have from one to four values.
  • Examples:
    • border-width:thin medium thick 10px;
      • top border is thin
      • right border is medium
      • bottom border is thick
      • left border is 10px
    • border-width:thin medium thick;
      • top border is thin
      • right and left borders are medium
      • bottom border is thick
    • border-width:thin medium;
      • top and bottom borders are thin
      • right and left borders are medium
    • border-width:thin;
      • all four borders are thin
  • Note: Always declare the border-style property before the border-width property. An element must have borders before you can change the color.
  • Border-top-width: The border-top-width property sets the width of an element's top border. Note: Always declare the border-style property before the border-top-width property. An element must have borders before you can change the width.
  • Border-right-width: The border-right-width property sets the width of an element's right border. Note: Always declare the border-style property before the border-right-width property. An element must have borders before you can change the width.
  • Border-bottom-width: The border-bottom-width property sets the width of an element's bottom border. Note: Always declare the border-style property before the border-bottom-width property. An element must have borders before you can change the width.
  • Border-left-width: The border-left-width property sets the width of an element's left border. Note: Always declare the border-style property before the border-left-width property. An element must have borders before you can change the width.
  • Caption-side: The caption-side property specifies the placement of a table caption.
  • Table-layout: The table-layout property sets the table layout algorithm to be used for a table.
  • Border-collaspe: The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML.
  • Border-spacing: The border-spacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).
  • Empty-cells: The empty-cells property sets whether or not to display borders and background on empty cells in a table (only for the "separated borders" model).
  • Cursor: The cursor property specifies the type of cursor to be displayed when pointing on an element.
  • Outline: An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". The outline shorthand property sets all the outline properties in one declaration. The properties that can be set, are (in order): outline-color, outline-style, outline-width. If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.
  • Outline-width: An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". The outline-width specifies the width of an outline. Note: Always declare the outline-style property before the outline-width property. An element must have an outline before you change the width of it.
  • Outline-style: An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". The outline-style property specifies the style of an outline.
  • Outline-color: An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". The outline-color property specifies the color of an outline. Note: Always declare the outline-style property before the outline-color property. An element must have an outline before you change the color of it.