Error: colon expected css(css-colonexpected) - html

Question

I'm trying to create a. Simple angular project.
In the css file /src/styles.css ,while writing the code, I'm facing being shown syntax errors.
body {
margin: 0;
background: #F2F2F2;
font-family: 'Montserrat', sans-serif;
height: 100vh;
}
#container { display: grid;
grid-template-columns: 70px auto;
height: 100%;
#content {
padding: 30px 50px;
ul {//error highlight saying: colon expected css(css-colonexpected)
list-style-type: none;
margin:0;padding:0;
li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color:#00A8FF;
}
ul {
margin-top: 20px;
li {
padding:0;
a {
font-size: 1em;
font-weight: 300;
}//Error highlight saying: at-rule or selector expected css(css-ruleselectorexpected)
}
}
}
}
}
}
Error msg shown as comments
Syntax errors being shown are:
-colon expected css(css-colonexpected)
-at-rule or selector expected css(css-ruleselectorexpected)

Answer 1

You are using a valid SASS or SCSS with nested classes in a .css file and hence the error is shown. The equivalent css would be:
body {
margin: 0;
background: #F2F2F2;
font-family: "Montserrat", sans-serif;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: 70px auto;
height: 100%;
}
#container #content {
padding: 30px 50px;
}
#container #content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#container #content ul li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
}
#container #content ul li a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: #00A8FF;
}
#container #content ul li ul {
margin-top: 20px;
}
#container #content ul li ul li {
padding: 0;
}
#container #content ul li ul li a {
font-size: 1em;
font-weight: 300;
}

Answer 2

You are using sass in CSS file.. So this error is being shown. Its file extension should be .sass or stylesheet should be coded according to CSS syntax.
In CSS, it would be like:
body {
margin: 0;
background: #F2F2F2;
font-family: "Montserrat", sans-serif;
height: 100vh;
}
#container {
display: grid;
grid-template-columns: 70px auto;
height: 100%;
}
#container #content {
padding: 30px 50px;
}
#container #content ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#container #content ul li {
background: #fff;
border-radius: 8px;
padding: 20px;
margin-bottom: 8px;
}
#container #content ul li a {
font-size: 1.5em;
text-decoration: none;
font-weight: bold;
color: #00A8FF;
}
#container #content ul li ul {
margin-top: 20px;
}
#container #content ul li ul li {
padding: 0;
}
#container #content ul li ul li a {
font-size: 1em;
font-weight: 300;
}