0
Ok linking the external style sheet below to the html, it only had an effect in Firefox but not in other browsers.So,any help?😗
p{ color:turquoise; font-size:2em; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"> <title>Anonymous😗</title> <link href="Index.css" rel="stylesheet" type="text/css"> </head> <body> <p> This text doesn't style in any other browser but Firefox😕. </p> </body> </html>
1 ответ
+ 2
Everything works consistently for me. This includes emoticons, the font size, and light blue/green text colour.
To be perfectly clear, I copy/pasted this to a file called Index.css:
p{
color:turquoise;
font-size:2em;
}
I tested in:
- Microsoft Edge Version 84.0.522.40 (Official build) (64-bit)
- Google Chrome Version 83.0.4103.116 (Official Build) (64-bit)
- Firefox 75.0 (64-bit)
Even though my tests showed everything work exactly as you shared, there could still be a problem with the code. There was an HTML5 validation error found by https://validator.w3.org charset="UTF-8" should be removed and I resolved a warning by adding lang="en" like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anonymous😗</title>
<link href="Index.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
This text doesn't style in any other browser but Firefox😕.
</p>
</body>
</html>
Maybe what you shared should work in the non-Firefox browsers you have and your experience was due to a stale browser cache of the CSS content. In Windows, I often have to repeatedly hit CTRL+SHIFT+R to get everything refreshed. Navigate to Index.css in your browser and check the content has all your recent changes in each browser you test on.