CSS - Links

Ethan D. - May 31, 2024

Link States

Unvisited Links

Unvisited links are the default state of a link that has not yet been clicked by the user. By default, browsers usually style unvisited links with an underline and a blue color. However, you can change these default styles using CSS.

To style unvisited links, you can use the a selector in your CSS code.

Example: Unvisited links with custom styles

a {
  color: #ff0000;
  text-decoration: none;
}

The unvisited links will have a red color (#ff0000) and the underline will be removed (text-decoration: none).

You can apply various styles to unvisited links, such as changing the font weight, font size, background color, or adding borders.

Example: Custom unvisited link styles

a {
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid #333;
  transition: border-bottom-color 0.3s;
}

This style will give the unvisited links a dark gray color, bold font weight, and solid border bottom that transitions on hover.

Visited Links

Visited links are those that have already been clicked on and visited by the user. Browsers usually style visited links with a purple color to differentiate them from unvisited ones.

To style visited links, you can use the :visited pseudo-class in your CSS code.

Example: Visited links with custom styles

a:visited {
  color: #800080;
}

Visited links will have a purple color (#800080).

Due to privacy reasons, styles for visited links are limited. You can only change their color properties like background-color or border-color.

Example: Custom visited link styling

a:visited {
  color: #999;
  border-bottom-color: #999;
}

This gives visited links a light gray color and matching border bottom.

Hover State

The hover state is triggered when users hover their mouse over a link. This allows you to create interactive effects and provide visual feedback.

To style hovered-over links use the :hover pseudo-class in your CSS code.

Example: Hovered-over links with color change

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

When users hover over any given hyperlink, its color changes to red (#FF0000) while underlining it.

You may also apply different styles onto hovering hyperlinks, such as changing backgrounds, borders, transforms, etc.

Example: Custom hover effects

a:hover {
  background-color: #f5f5f5;
  border-bottom-color: #FF0000;
  transform: translateY(-2px);
}

This would result in giving a light grayish background along with a red bordered bottom and a slight upward movement.

Active State

Active states get triggered whenever any hyperlink gets clicked, providing visual feedback indicating the current interaction status. To stylize active hyperlinks, utilize the :active pseudo-class within CSS code.

Example: Active hyperlinks with custom styles

a:active {
  color: black;
  background-color: #F5F5F5;
}

Upon clicking said hyperlink, its color turns black while the background shifts to a light grayish hue (#F5F5F5).

Various other stylizations could be applied to active hyperlinks including altering fonts, weights, borders, transforms, etc.

Example: Bold font and scaling on active link

a:active {
  font-weight: bold;
  transform: scale(95%);
}

Such styling makes fonts bolder besides shrinking slightly through scaling down to ninety-five percent during click events. Remember, active states remain temporary, lasting only till clicks persist, after which they revert back either to hovering or unvisiting statuses accordingly.

By combining styles for different link states (unvisited, visited, hovering, active), you create visually appealing interactive experiences improving overall usability across web pages.

Link Styling Properties

CSS provides properties to style links according to your design preferences. Here are some commonly used link styling properties:

Color

The color property sets the text color of the link. You can use color names, hexadecimal values, RGB, or HSL values to specify the desired color.

Color Example

a {
  color: #ff0000; /* Red color */
}

Text Decoration

The text-decoration property is used to add or remove underlines, overlines, or line-throughs from links. By default, links are underlined.

Text Decoration Example

a {
  text-decoration: none;
}

Background Color

The background-color property sets the background color of the link. This can be useful for creating button-like links or highlighting important links.

Background Color Example

a {
  background-color: #f5f5f5;
  padding: 5px 10px;
}

Border

The border property allows you to add borders around links. You can set the border width, style, and color using the border-width, border-style, and border-color properties.

Border Example

a {
  border: 2px solid #000;
  padding: 5px 10px;
}

Padding and Margin

The padding property adds space inside the link, while the margin property adds space outside the link. These properties control size and spacing of links.

Padding and Margin Example

a {
  padding: 10px;
  margin: 5px;
  display: inline-block;
}

Font Styles

You can modify fonts of links using properties like font-family, font-size, font-weight, and font-style.

Font Styles Example

a {
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  font-weight: bold; 
  font-style: italic;
}

Transitions and Animations

CSS transitions and animations create smooth effects when hovering or clicking on them.

Transitions and Animations Example

a {
  transition: color 0.3s ease;
}
a:hover {
  color: #ff0000;
}

Link Button Styles

You can style links to look like buttons using CSS. This is useful for call-to-action elements or important links that you want to draw attention to.

To create button-like links, you can use CSS properties such as background-color, border, padding, and border-radius to give the link a button-like appearance.

Basic link button styles

Example: Basic link button styles

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

The link with the class "button" will have a blue background color (#007bff), white text color (#fff), padding of 10 pixels on the top and bottom and 20 pixels on the left and right, no underline (text-decoration: none), and rounded corners with a border radius of 4 pixels.

You can further modify the button styles to fit your design. For example, you can add a border, change the background color on hover, or apply a box shadow.

Enhancing link button styles

Example: Enhancing link button styles

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #007bff;
  transition: background-color 0.3s ease;
}

a.button:hover {
  background-color: #0056b3;
}

In this improved version, the link button has a solid border with the same color as the background. The transition property is used to animate the background color change on hover. When you hover over it, it changes to a darker shade (#0056b3).

Link buttons are commonly used for important actions or prominent links within a webpage. They help guide users' attention and encourage them to click. Some examples include:

Primary action buttons are used for main actions like "Sign Up" or "Buy Now." They usually have prominent colors.
Secondary action buttons are used for less important actions.
Outline buttons have transparent backgrounds with colored borders.
Gradient buttons use gradual transitions between colors as backgrounds.

When styling link buttons, keep them consistent throughout your website by using colors, sizes, and styles that match your website's overall design and branding.

Link Icons and Graphics

You can improve the look and usability of links by adding icons or graphics using CSS. Icons or graphics can help show the purpose or destination of a link and make it more engaging for users.

To add icons or graphics to links, you can use the background-image property with other CSS properties like background-position, background-repeat, and background-size.

Adding icons using background images

a.icon-link {
  padding-left: 25px;
  background-image: url('path/to/icon.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
}

The link with the class "icon-link" will have an icon displayed to the left of the link text. The padding-left property creates space for the icon, and the background-image property specifies where to find the icon image file.

The background-repeat property is set to no-repeat to prevent repeating, and the background-position property places it at left center. The background-size property sets its size to 20 pixels by 20 pixels.

Using CSS sprites for link icons

If you have multiple icons or graphics for different links, you can use CSS sprites to combine them into one image file. This reduces HTTP requests and improves performance.

a.sprite-link {
  padding-left: 25px;
  background-image: url('path/to/sprite.png');
  background-repeat: no-repeat;
}

a.link-1 {
    background-position:0 -0px; 
}

a.link-2 {
    background-position:-0 -50px; 
}

A sprite image contains multiple icons positioned vertically. Each link has a specific class (link-1, link-2) that sets its position from within that sprite image.

Positioning and sizing link icons

You can control where an icon appears relative to your text using CSS properties like positioning (horizontal/vertical)

a.icon-link {
   padding-left: 25px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: 5px center;
}

Here we see how our Icon gets placed exactly five-pixel distance away horizontally while still being centered vertically within our hyperlink element itself!

To change how big/small these visual aids appear onscreen simply adjust their dimensions via “Background Size” attribute:

a.icon-link {
   padding-left: 35px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: left center;
   background-size: 30px 30px; 
}

Adding relevant consistent accessible alternative text via ARIA label attributes ensures everyone benefits equally regardless of any disabilities they may face when navigating through web pages containing such visually enhanced hyperlinks!