To style links in CSS, you can use the following properties:
- color: Determines the color of the link text. Example:
1 2 3 |
a { color: blue; } |
- text-decoration: Controls the decoration of the link, such as underlining. Example:
1 2 3 |
a { text-decoration: none; } |
- font-weight: Sets the weight, or thickness, of the link text. Example:
1 2 3 |
a { font-weight: bold; } |
4.:hover: This pseudo-class applies styles when the link is being hovered over by the user. Example:
1 2 3 4 |
a:hover { color: red; text-decoration: underline; } |
- :visited: This pseudo-class applies styles to links that have been visited. Example:
1 2 3 |
a:visited { color: purple; } |
You can combine these properties and use additional CSS properties to further customize the styling of links according to your specific needs.
Best HTML & CSS Books to Read in 2024
What is the default color of links in CSS?
The default color of links in CSS is typically blue. After a link has been visited, the default color changes to purple by default, and when a user hovers over a link, the default color changes to red by default. However, these default colors can be modified in CSS using the appropriate properties.
How to change link color on hover in CSS?
To change the link color on hover in CSS, you can use the :hover pseudo-class selector. Here is an example:
1 2 3 |
a:hover { color: red; } |
In the code above, a is the selector for all the anchor <a> tags. The :hover selector specifies the style for the link when it is being hovered over. In this case, the color property is set to red, but you can replace it with any valid CSS color value.
You can apply this CSS code to your HTML by either:
- Adding it within a block inside the section of your HTML document.
- Linking an external CSS file using the tag and placing the CSS code within that file.
Note: If there are other CSS rules affecting the link color, make sure the above code comes after those rules to override them.
What is the pseudo-element for link underlines in CSS?
The pseudo-element for link underlines in CSS is ::after.
What is the default cursor for links in CSS?
The default cursor for links in CSS is usually the "pointer" cursor.
How to add padding around links in CSS?
To add padding around links in CSS, you can use the padding property. Here's an example:
1 2 3 |
a { padding: 10px; /* adds 10 pixels of padding on all sides */ } |
You can also specify different values for each side using the shorthand notation:
1 2 3 |
a { padding: 10px 20px; /* adds 10 pixels of padding vertically and 20 pixels horizontally */ } |
Alternatively, you can use individual padding properties for each side:
1 2 3 4 5 6 |
a { padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } |
Feel free to adjust the pixel values according to your desired amount of padding.
