CODEWITHSUNDEEP
htmlcssimagetagscss-selectors
user2072017
user2072017

Reputation: 91

Styling image in CSS doesn't work

Can someone please tell me what i'm doing wrong here, the css works when i replace the .1{} with img{}. Shouldn't I also be able to use img.1{} or .1 img{}

Here's the UPDATED HTML

<!DOCTYPE html>
<html>
<head>
<title>Test Webpage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clouds">
<img id="cheese" src="cloud.png">
</div>
</body>
</html>

And the UPDATED CSS

  body{
    margin:0;
    padding:0;
    background:#0088ff;
    font-family:helvetica;
}
#clouds{
    overflow:hidden;
    width:100vw;
    height:100vh;
}
#cheese img{
    display:none;
}

Upvotes: 0

Views: 9001

Answers (3)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

Numbers at the beginning of a class name are not illegal in the CSS grammar.

"The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit."

You are just specifying the name the wrong way.

See http://www.w3.org/TR/CSS21/grammar.html

Try to this way according to updated your question 

img#cheese {
    display:none;
}

or 

#clouds>img{
    display:none;
}

Upvotes: 1

Matt Komarnicki
Matt Komarnicki

Reputation: 5422

Change the class name from 1 to something that starts with a letter and try again.

After all read this.

EDIT:

I see you have some problems with basic things.

If your image has an ID like <img id="foo" src="" /> then you reference in CSS using img#foo { } (tag + hash + identifier) or just using id without providing type of the tag: #foo { }.

Upvotes: 6

Manindra Singh
Manindra Singh

Reputation: 769

if you have multiple images then you can use like this:you can use like this:

<style>
#clouds{
overflow:hidden;
width:100vw;
height:100vh;
}
.1{
display:none;
}
.2{
display:block;
}
</style>

<div id="clouds">
<img class="1" src="cloud.png">
<img class="2" src="cloud.png">
</div>

Upvotes: 0

Related Questions