CSS ATTRIBUTES (PART3)

This chapter teaches you how to set backgrounds of various HTML elements. You can set the following background properties of an element −

• The background-color property is used to set the background color of an element.
• The background-image property is used to set the background image of an element.
• The background-repeat property is used to control the repetition of an image in the background.
• The background-position property is used to control the position of an image in the background.
• The background-attachment property is used to control the scrolling of an image in the background.
• The background property is used as a shorthand to specify a number of other background properties.
  
  
  
  • The font-family property is used to change the face of a font.
  • The font-style property is used to make a font italic or oblique.
  • The font-variant property is used to create a small-caps effect.
  • The font-weight property is used to increase or decrease how bold or light a font appears.
  • The font-size property is used to increase or decrease the size of a font.
  • The font property is used as shorthand to specify a number of other font properti
    
    
    • The direction property is used to set the text direction.
    • The letter-spacing property is used to add or subtract space between the letters that make up a word.
    • The word-spacing property is used to add or subtract space between the words of a sentence.
    • The text-indent property is used to indent the text of a paragraph.
    • The text-align property is used to align the text of a document.
    • The text-decoration property is used to underline, overline, and strikethrough text.
    • The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
    • The white-space property is used to control the flow and formatting of text.
    • The text-shadow property is used to set the text shadow around a text.
      
      
      
      • The border property is used to set the width of an image border.
      • The height property is used to set the height of an image.
      • The width property is used to set the width of an image.
      • The -moz-opacity property is used to set the opacity of an image.
        
        
        • The :link signifies unvisited hyperlinks.
        • The :visited signifies visited hyperlinks.
        • The :hover signifies an element that currently has the user's mouse pointer hovering over it.
        • The :active signifies an element on which the user is currently clicking.
          
          
          
          • The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
          • The border-spacing specifies the width that should appear between table cells.
          • The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.
          • The empty-cells specifies whether the border should be shown if a cell is empty.
          • The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
          
          
        There are three properties of a border you can change −
        • The border-color specifies the color of a border.
        • The border-style specifies whether a border should be solid, dashed line, double line, or one of the other possible values.
        • The border-width specifies the width of a border.
        Now, we will see how to use these properties with examples.
        

        The border-color Property

        The border-color property allows you to change the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties −
        
      • border-bottom-color changes the color of bottom border.
      • border-top-color changes the color of top border.
      • border-left-color changes the color of left border.
      • border-right-color changes the color of right border.
        
        The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.
        The values of the margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.
        We have the following properties to set an element margin.
        
      • The margin specifies a shorthand property for setting the margin properties in one declaration.
      • The margin-bottom specifies the bottom margin of an element.
      • The margin-top specifies the top margin of an element.
      • The margin-left specifies the left margin of an element.
      • The margin-right specifies the right margin of an element.
        
        Lists are very helpful in conveying a set of either numbered or bullet points. This chapter teaches you how to control list type, position, style, etc., using CSS.
        We have the following five CSS properties, which can be used to control lists −
        
      • The list-style-type allows you to control the shape or appearance of the marker.
      • The list-style-position specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker.
      • The list-style-image specifies an image for the marker rather than a bullet point or number.
      • The list-style serves as shorthand for the preceding properties.
      • The marker-offset specifies the distance between a marker and the text in the list.
       
       
      The padding property allows you to specify how much space should appear between the content of an element and its border −
      The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.
      The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −
      
    • The padding-bottom specifies the bottom padding of an element.
    • The padding-top specifies the top padding of an element.
    • The padding-left specifies the left padding of an element.
    • The padding-right specifies the right padding of an element.
    • The padding serves as shorthand for the preceding properties\
      
      
      The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.
      One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from a pointer to a hand. However, it does not change form for a submit button on a form. Therefore, whenever someone hovers over an image that is a submit button, it provides a visual clue that the image is clickable.
      
      Outlines are very similar to borders, but there are few major differences as well −
      
    • An outline does not take up space.
    • Outlines do not have to be rectangular.
    • Outline is always the same on all sides; you cannot specify different values for different sides of an element.
    NOTE − The outline properties are not supported by IE 6 or Netscape 7.
    You can set the following outline properties using CSS.
    
  • The outline-width property is used to set the width of the outline.
  • The outline-style property is used to set the line style for the outline.
  • The outline-color property is used to set the color of the outline.
  • The outline property is used to set all the above three properties in a single statemet
    There may be a case when an element's content might be larger than the amount of space allocated to it. For example, given width and height properties do not allow enough room to accommodate the content of the element.
    CSS provides a property called overflow which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values −
    

    Sr.No.	Value & Description
    1	visible Allows the content to overflow the borders of its containing element.
    2	hidden The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.
    3	scroll The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.
    4	auto The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.

    
    
    
    
    

background background properties of an element − The background-color property is used to set the background color of an element. The background-image property is used to set the background image of an element. The background-repeat property is used to control the repetition of an image in the background. The background-position property is used to control the position of an image in the background. The background-attachment property is used to control the scrolling of an image in the background. The background property is used as a shorthand to specify a number of other background properties. properties of an element − The background-color property is used to set the background color of an element. The background-image property is used to set the background image of an element. The background-repeat property is used to control the repetition of an image in the background. The background-position property is used to control the position of an image in the background. The background-attachment property is used to control the scrolling of an image in the background. The background property is used as a shorthand to specify a number of other background properties.