Comments in CSS make it wrong

Question

Situation

I recently decided to put comments in my CSS files. And once I did so, one of them stopped working.

Both ways of making comments make my entire CSS file not to work. I know this is lacking informations, I just don't know where it could even possibly come from.

In case it does matter, this is how I write my CSS:

// Background
body            { background-color: #666666; }
#content            { background-color: #cccccc; }
#menu           { background-color: #cccccc; }
#menu-footer        { background-color: #33cccc; }
#menu-items a.active    { background-color: #33cccc; }
#menu-items a:hover     { background-color: #99cccc; }

// The white spaces are actually tabs (Alt+i on Emacs)

Update 1

I am looking for ways to debug this situation. I see my CSS files in the developer tool from Google Chrome, but properties are not applied.

foobar {
    // color: cyan;
}

Does this simply make the CSS wrong but only on the one line ? So the rest of the file keep getting parsed ?

Update 2

I always used // to comment my CSS but with the later notation I used in this post. Now that I changed my mind and am using inline CSS, // being an invalid token make the whole file not readable.

Same story. Formally learning js html and css and starting out with // in css with some interesting results that could not be explained :} — Gary Thomann
– Gary Thomann, Commented Jan 11, 2024 at 21:34

0__0 · Accepted Answer · 2013-07-19 22:50:30Z

4

css does not recognize the double slash as a comment. You have to use the /* */ one.

I might be wrong, but since the double slash is not a valid css token the behaviour might be browser dependent. I would expect browsers to simply ignore the property or the statement that follows the //, but I never checked/tested.

There are rules on what browsers should do in various situations, however I did not see any for unknown token (maybe a I didn't look well enough).

edited Jul 19, 2013 at 22:50

answered Jul 19, 2013 at 21:43

0__0

8347 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Ezra · Accepted Answer · 2013-07-19 22:17:51Z

2

Use */ Text */ , instead of // (// is comment in javascript)

/* Comment */

For Example

/**** Background ****/
    body            { background-color: #666666; }
    #content            { background-color: #cccccc; }
    #menu           { background-color: #cccccc; }
    #menu-footer        { background-color: #33cccc; }
    #menu-items a.active    { background-color: #33cccc; }
    #menu-items a:hover     { background-color: #99cccc; }

/* The white spaces are actually tabs (Alt+i on Emacs) */

answered Jul 19, 2013 at 22:17

Daniel Ezra

1,4443 gold badges15 silver badges21 bronze badges

Comments

Meisam Mulla · Accepted Answer · 2013-07-19 21:40:00Z

1

Try the comments this way

/* Background */
body            { background-color: #666666; }
#content            { background-color: #cccccc; }
#menu           { background-color: #cccccc; }
#menu-footer        { background-color: #33cccc; }
#menu-items a.active    { background-color: #33cccc; }
#menu-items a:hover     { background-color: #99cccc; }

/* The white spaces are actually tabs (Alt+i on Emacs) */

answered Jul 19, 2013 at 21:40

Meisam Mulla

1,8713 gold badges23 silver badges37 bronze badges

Comments

Kevin Lynch · Accepted Answer · 2013-07-19 21:43:20Z

1

The only way to comment in CSS is by /* this is a comnent */

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

answered Jul 19, 2013 at 21:43

Kevin Lynch

24.7k3 gold badges38 silver badges39 bronze badges

Collectives™ on Stack Overflow

Comments in CSS make it wrong

Situation

Update 1

Update 2

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Situation

Update 1

Update 2

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related