I’m pretty new to CSS and have found a nuance that I don’t understand.
I’m trying to set the viewport background color, and using the color red in this example.
If I use the following code in an external .css file then add it to my html file in the ‘head’ section, the viewport color is NOT changing at all — it is the standard white background:
==== 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>
I am learning CSS using a book and the book uses the external .CSS file approach that does not work. So I took upon myself to abandon the external CSS file and put the root’s color change directly in the “head” section of my index.html file — if I instead put the root color I want directly inside index.html, the entire viewport background is red as expected:
==== 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>
Since both times I’m setting the root’s “background-color” to red, and in both cases I’m doing so in the correct part of the html file, in the “head” section — why is the external .css file’s attempt to set the background color NOT working?
I’m new to CSS so I’m thinking there is some nuance here I’m not aware of? I’m using Netbeans for my development IDE and when I create a new .CSS file, Netbeans is automatically putting the “display: block” statement in the new .css file so I assumed it was needed and left that alone.
The
rootnode of HTML is the<html>element, so the selector should behtmlnotroot.In your external CSS, you have forgotten the
:for the:rootpseudo-selector. In HTML it will always behtmlso there is no reason to use:rootAFAIK.