CSS Links

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Links

• Styling Links: You can style links using the a property.

a{
   color: red;  
}

• Text Decoration: The text-decoration CSS property sets the appearance of decorative lines on text. This property can take the following values:

selector{text-decoration: dashed | dotted | double | line-through | overline | underline | wavy | solid | none;}

a{
   text-decoration: line-through;  
}

• Background Color: To set the background color of the links, just define the background color value for the tags.

a{
   background-color: green; 
}

• Link Buttons: To create a link button, just make a series of changes to the tag and use it as a button.

a {
    display: block;
    background-color: #eaf1dd;
    color: #060;
    text-decoration: none;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 1.5em;
    padding: 6px 4px;
    margin: 4px;
    border-right: 2px solid #999999;
    border-bottom: 2px solid #999999;
    border-top-width: 0px;
    border-left-width: 0px;
}

a:hover
{
    color: #030;
    border: 1px solid #9999ff;
}

a:active
{
    color: #aca;
    border-left: 2px solid #030;
    border-top: 2px solid #030;
    border-right-width: 0px;
    border-bottom-width: 0px;
}