As I delve into the world of CSS, I've encountered a puzzling issue that has me scratching my head. My objective is to change the background color of the viewport to red.
When I tried using the following code in an external .css file and linked it to my HTML file in the 'head' section, the background color remained obstinately white, completely ignoring my instructions:
==== my-external-css-file.css ===
root
{
display: block;
background-color:RGB(255,0,0);
}
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<link rel="stylesheet" href="my-external-css-file.css"
</head>
The book I'm using as a learning resource advocates for the external CSS file method, but clearly, it's not working for me. So, I decided to bypass this approach and instead include the style directly within the "head" section of my index.html file. Lo and behold, when I placed the desired color change right inside the index.html file itself, the entire viewport background turned a vibrant shade of red:
==== my index.html file ====
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>theRed</title>
<meta name="viewport" content="user-scalable=no, width=device-width"/>
<style type="text/css">
:root
{
background-color:RGB(255,0,0);
}
</style>
</head>
Given that both methods entail setting the root's "background-color" property to red within the appropriate "head" section of the html file, what could be causing the failure of the external .css file? Could there be some intricate detail that eludes my understanding as a CSS novice? I use Netbeans as my development IDE, and interestingly, whenever I create a new .CSS file, Netbeans automatically inserts the "display: block" statement. While I have retained this without modification, it appears my efforts are not bearing fruit.