CSS - Properties

Styling Hyperlinks:

1. The CSS link states must be in this order.
   a:link {color:#FF0000;}      /* unvisited link */
   a:visited {color:#00FF00;}  /* visited link */
   a:hover {color:#FF00FF;}  /* mouse over link */
   a:active {color:#0000FF;}  /* selected link */
2. The a:hover state must always come after a:link and a:visited.

1. More link css attributes:
   1. text-decoration
      1. This changes the way the underline is displayed with a link
      2. a:link {color:#FF0000; text-decoration:none;} This removes the underline from the hyperlink
      3. a:hover {color:#FF0000; text-decoration:underline;} This adds the underline when the link hover is activated.

---

Background:

• Shorthand Version:
  • background: color position size repeat origin clip attachment image;
    • background: #00ff00 url('smiley.gif') no-repeat fixed center;
• Long Hand Version:
  • background-color: color;
    • background-color:yellow;
    • background-color:#00ff00;
    • background-color:rgb(255,0,255);
  • background-image: image URL;
    • background-image:url('paper.gif');
  • background-repeat:
    • Values:
      no-repeat – This value displays the image once
      repeat-x –This value repeats the background image horizontally
      repeat-y –This value repeats the background image vertically
      repeat –This value repeats the background image both vertically and horizontally
      
  • background-position:xPosition yPostion;
    • background-position:center;
  • background-position:left top;
  • background-position:50px 50px;
  • background-position:25% 75%;

---

Margin : This property adds space around an element(s) (outside the border).

• Shorthand version: margin: top right bottom left;
  • margin:25px 50px 75px 100px;
• margin-top : 25px;
• margin-right : 50px;
• margin-bottom : 75px;
• margin-left : 100px;

---

Padding : This property creates the extra space insite the element block

• Shorthand version: padding: top right bottom left;
  • padding:25px 50px 75px 100px;
• padding-top:25px;
  padding-bottom:25px;
  padding-right:50px;
  padding-left:50px;

Border: This property allows you to configure the style of the border, or boundary, of an element.

• By default, the border width is 0, which does not display.
• border-width
• border-color
• border-style
  • values:
    dotted
    solid
    double
    dashed
    groove
    ridge
    inset
• border-top
• border-right
• border-bottom
• border-left
• Shorthand version: border
  • border: top right bottom left