sudheesh001/Working method.md

## index.html
<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
  </body>
</html>

## style1.css
a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}

## Working method.md

      
    Raw
  

              Working method.md
            
          
    Explanation to the working.

a.homepage:link, a.homepage:visited {
   ...
   }
This is basically setting the CSS rule for an anchor (link) in the class homepage in two stages,

When the link is present as an unvisited link
When the link has been visited.

a.homepage:hover, a.homepage:focus, a.homepage:active{
  ...
}
This sets the CSS rule when hovering or focusing or when the link is active
The CSS rule i.e.
  padding: 1px 10px 1px 10px; 
  //The CSS padding properties define the space between the element border and the element content.
  color: #fff;
  // Sets the color to the HEX value of #fff
  background: #555;
  // Background color #555
  border-radius: 3px;
  // Self explanatory.
  border: 1px outset rgba(50,50,50,.5);
  // the border of thickness 1px is of color given by RGBA which stands for Red, Green, Blue, Alpha
  font-family: georgia, serif;
  // The font that is used.
  font-size: 14px;
  // Size of the font.
  font-style: italic;
  // Style of the font.
  text-decoration: none;
  // Self explanatory.
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Sample document</title>
	<link rel="stylesheet" href="style1.css">
	</head>
	<body>
	<p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
	</body>
	</html>
	a.homepage:link, a.homepage:visited {
	padding: 1px 10px 1px 10px;
	color: #fff;
	background: #555;
	border-radius: 3px;
	border: 1px outset rgba(50,50,50,.5);
	font-family: georgia, serif;
	font-size: 14px;
	font-style: italic;
	text-decoration: none;
	}

	a.homepage:hover, a.homepage:focus, a.homepage:active {
	background-color: #666;
	}