The href attributes in <a> tags are not displaying the desired styling. Can you identify the issue in this HTML code?

The styles for the links in the <ul> are specified in the <style>, but they are not being applied and the links are appearing in their default format.

header {
  text-align: center;
  border: 5px solid yellow;
  background-color: pink;
  font-family: cursive;
  margin: 5px;
}

a:link a:visited {
  text-decoration: none;
  font-size: 40px;
  background-color: turquoise;
  color: red;
  border: 2px solid tomato;
  margin: 5px;
  font-weight: bold;
  font-style: italic;
  font-family: cursive;
}

a:hover {
  background-color: orange;
  color: green;
  border: 3px solid tomato;
}

a:active {
  background-color: green;
  border: 10px solid tomato;
  color: blue;
}
<header>HTML OMG</header>
<ul>
  <li><a href="www.google.co.in" title="Link to Google" target="_blank">Google</a></li>
  <li><a href="www.facebook.com" title="Link to Facebook" target="_blank">Facebook</a></li>
  <li><a href="www.instagram.com" title="Link to Instagram" target="_blank">Instagram</a></li>
  <li><a href="www.youtube.com" title="Link to Youtube" target="_blank">Youtube</a></li>
  <li><a href="www.twitter.com" title="Link to Twitter" target="_blank">Twitter</a></li>
</ul>

I have confirmed that the CSS is correct, but the result looks like this - https://i.sstatic.net/B5MkY.png. As I am new to HTML and CSS, this is causing me some confusion.

htmlcss

Answer №1

The style rule you've specified, a:link a:visited, is designed to target an <a> element nested within another <a> element (specifically, a visited link inside another link). To ensure that the rule applies to both a:link and a:visited, you should use a comma to separate them - like this: a:link, a:visited. This will allow the rule content to be applied to both selectors accordingly.

Answer №2

Your issue may be solved by including a comma in your code.

 a, a:visited {......

Answer №3

For optimal styling, use a:link, a:visited instead of a:link a:visited. The latter specifies a link inside of a visited link.

On the other hand, the former specifies both a link and a visited link separately.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hover transitions in CSS are not functional on the active links

My issue involves using CSS transitions when hovering over links. When the links are live (meaning a href="#" is changed to a href="yahoo.com," for example), the transitions stop working and instead of opening the link, it appends the link destination to t ...

csswordpresshovertransition

Can you guide me on how to duplicate a file when a button is clicked?

I am working on creating a one-page utility/prototype that has an admin user interface. The goal is to have a drop-down box for the admin user to select an option and then copy a file from one directory to another upon clicking a submit button. Although I ...

phpjqueryhtml

Using Google Maps API v3 to Convert User-Input Coordinates into LatLng Points

I'm a beginner when it comes to using Google Maps and I'm having trouble with turning coordinates input by a user into moving a marker on my map. The goal is for the marker to pan to the specific coordinates entered by the user. Unfortunately, my ...

javascripthtmlgoogle-mapsgoogle-maps-api-3maps

Streamline Access to Zimbra Server Automatically

Currently, I am creating a webpage with a login feature at www.newpage.com. Here is the code snippet for reference: <form name="login"> Username<input type="text" name="userid"/> Password<input type="password" name="pswrd"/> <input ty ...

javascripthtmlauthenticationautomationzimbra

Ways to clear away adhesive header and maintain its fixed position

I've been tinkering with my website, which you can find at this link: . I used the html5 up template for it, and the template came with a sticky header. However, when the site is viewed on a smaller screen, there's an ugly gap that forms between ...

javascriptcsshtmlscrollsticky

Access the Android mobile application by using a JavaScript click event

I have been attempting to launch an installed android mobile application from an html page in the Chrome browser using a javascript or jQuery click function. While an anchor tag tap works perfectly and opens the installed app, I have encountered issues wh ...

javascriptandroidhtmldommobile-application

wordpress mobile navigation bar styling

I`m currently utilizing a bootstrap theme for my wordpress website. Below is the navigation bar code extracted from header.php. <?php // Collapsed navbar menu toggle global $xsbf_theme_options; $navbar = '<div clas ...

csswordpress

Present data outside of a traditional table format

Looking to improve the layout of my page with a title, header, and 3 links. Is there a way to have them displayed next to each other with some space in between? I've tried using tables but it didn't work as they ended up too close together. Open ...

htmlcss

Looking for assistance in streamlining the code

On my Drupal page, I have multiple divs and a JavaScript function that checks for content inside each one: if ($('.accred').length) { $('#accred').show(); } else{ $('#accred').hide(); } // More code follows... T ...

javascriptjqueryshow-hidehtml

Creating a list of HTML text entries using data.frame columns in R without the need for loops

Picture having this dataframe df<-data.frame("A"=c("I","You","She"),"B"=c("kicked","like","saw"),"C"=c("can","dogs","birds")) along ...

htmlrtextr-glue

Divs sliding out of alignment

I am experiencing an issue with the scrolling behavior of a wrapper div that contains two nested divs. Specifically, when I scroll the wrapper horizontally on Android devices, the header section and content section seem to be out of sync and there is a not ...

javascriptandroidcssscroll

Chrome Table not behaving as expected when expanding div

I'm encountering an issue on my website where everything works perfectly in Firefox, IE, and Safari, but there is a glitch in Chrome. You can see the problem here: http://tinyurl.com/chxg2tb In Chrome, the table at the bottom extends beyond the cont ...

htmlcssgoogle-chromecss-tables

Adjust the color based on the value using JavaScript

I have a React component where I need to change the text color based on the value passed as props. Here is my code: const ProductCard = (props) => { const classes = useStyles(); useEffect(() => { const category = document.getElemen ...

javascriptcssreactjs

Struggling to transfer data into MySQL database with AJAX and PHP

I am attempting to store user-input text from an input field into a MySQL database using Ajax and PHP. The concept is to input the text, click 'display', and then retrieve it from the database to display on the page. Here's a snippet of the ...

javascriptphphtmlajax

Guide to dynamically updating the href of an SVG Image in Angular HTML

I am currently iterating through a list of employee objects, each containing an image URL that I need to incorporate into an SVG - Image element. <div *ngFor ="emp of employees"> <defs> <pattern id = "attachedImage" height ...

javascriptcssangularsvgcss-animations

Understanding the Relationship Between CSS Width and Overlapping Elements

Is there a way to make my suggestion div inherit the width of the input field while overlapping the other elements? My current CSS code achieves the overlap effect, but fails to inherit the width of the input field accurately. I have attempted setting the ...

htmlcsswidthoverlapinput-field

Remove redundant <h1> headers from a webpage that is optimized for both desktop and mobile devices

I'm facing a challenge with my web page that is accessible on both mobile and desktop devices. I have two separate CSS classes for each type of device as shown below: <div class="phone-visible"> <h1> .....</h1> </div> and ...

javascriptjqueryhtmlcssseo

Issue with the display of images

Is there a way to make a pop up image visible when hovering or clicking on an image on the webpage? Currently, the new pop up image is hidden behind the right div. Thank you in advance for any help. Paul ...

csshtml

Leverage arrays as data points within Highcharts.js

I have integrated the highcharts.js library into my website to create a profit & loss chart. The values for this chart are obtained from an array that is populated through an ajax response from my server. Below is the code snippet: <script type="text/ ...

javascriptjqueryhtmlajaxhighcharts

Removing a specific MySQL row using HTML in collaboration with Node.js

I've been working on a feature to allow users to delete specific rows from a table. Each row has a "Delete" link at the end, but when I click it, nothing happens. There are no errors displayed, and the console shows that 0 row(s) have been updated, ye ...

javascripthtmlmysqlsqlnode.js