Example:
/*
This is a
comment in CSS
*/
body {
font-family: system-ui;
font-size: 62.5% /* 1em = 10px */
line-height: 1.4;
}The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. In this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow for using ems to set font size later in the CSS in a more intuitive base 10 way.
Some CSS preprocessor syntax allow for JavaScript-style single-line comments, like this:
body {
font-family: system-ui;
// font-size: 62.5%
line-height: 1.4;
}And actually, it’s a bit weird, but vanilla CSS also kind of supports that, it’s just a trick and you have to be careful.
Elaborating..
/*
* === MAJOR SECTION HEADING ===
*/
/*
* — Minor Section Heading —
*/
I prefer comment to appear this way, but everyone is different how they comment. One this thing is for sure. You can never comment too much! (as they stripped anyhow in css compression).
I use the same method where ever comments are necessary.
This is my css comment
I have two little (newbie) questions:
1. Are comments still the same in CSS3?
2. What about comments in html5?
Yes, of course. CSS3 is CSS.
You have to include them between <!– and –>. Just like plain old HTML or XML.
In SCSS, you can use:
or:
@MaxArt
I assume it’s just a typo and you mean:
<!–-and-–>(not<!-and->)Ys, comments are same in css3 & html5 follow the html comments for html code, js comment for js code.
Yes. Commenting is as explained above in CSS3.
As for HTML5, you open with
It has worked for me both for single line commenting as well as multiple line commenting.
How is this Comment Preview possible below this? Is this a plugin in WordPress? So cool.
here comments has two types :
1) single line comments
2) Double line comments
single line comments : method
it starts with double slash … //
while
double line comments :
start with /* ………………………*/
thanks
I don’t like the fact that you need 4 characters to comment a single instructions on a line! It would have been better to use something simpler in addition to the /* */. For example, SQL uses two consecutive dashes like — which is very easy to use, another one is a single quote at the beginning of the line like VB. Anyway, this is still better than the most silly comment syntax for HTML.
I have a followup question to determine if this is style or need.
I see basic comments in css as described /* comment */.
Then I see multi line comments having a * before each new line.
Finally I will see what implies hierarchy as in this example from the normalize.css on github. Link
Is this simply style and hierarchy or is there necessary syntax for multi line comments:
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct
blockdisplay not defined in IE 8/9.*/
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
display: block;}
Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.
/////////
RESET /
//////
css
///////////////////
TYPOGRAPHY /
////////////////
css
/**
TYPO animation /
css
/***
TYPO animation tooltip */
css { / each to their own */; }
Everything enclosed between /* and */ is treated as a comment regardless of how many lines they span, so any other apparent “syntax” you may see between those markers is really just a matter of arbitrary style/convention to improve legibility, especially useful when viewing non-highlighted code.
Many coders prefer the // comment // style, However there’s one major advantage to using opening and closing sequences for comments: Since another opening sequence within a comment gets ignored, we have a quick line-based disable for experimental code during development:
I hope you never delete this page, I come back here every time I start a new project!
/*! */ the exclamation mark is sometimes to keep an important comment from being deleted when compressing, i.e. licence information.
According to http://cssguidelin.es/#commenting
What kind of comment is this and is it safe to delete it??
/*
@tab Page
@section Heading 1
@tip Set the styling for all first-level headings. These should be the largest of your headings.
@style heading 1
*/
what is Different Between This Media Query
/* Smartphones (portrait and landscape) ———- /
@media screen and (min-width: 320px) and (max-width: 480px){
/ styles */
}
Or
/* Smartphones (portrait) ———- /
@media screen and (max-width: 320px){
/ styles /
}
/ Smartphones (landscape) ———- /
@media screen and (min-width: 321px){
/ styles */
}
It’s late but maybe will help someone else:
The first media only works when the width is 320px or more, and 480px of width or less.
The second works from 0px to a max width of 320px.
And the last one works with a width of 321px or more.
can anyone give me an example of a multi-line style rule
The real problems with CSS (and HTML) commenting is not style it is the fact that unlike commenting in Javascript we cannot nest comments losing any important details we may need to document in our code
Hello,
Does including a lot of comments in your css increases your css file, therefor slowing your site down? I need to know this so I choose my commenting strategy.
Hello Muhammad,
For your production site (design & coding is done) always use a minified css version of your file. That removes every space and comments from it. This helps alot to speed up the loading time!
I used this website because w3schools.com has only HTML comments, not CSS comments. I found some new selectors that I didn’t know since I started CSS. Let’s use the h1 for example.
taiger, your system of major and minor section headings is really smart and I’m totally stealing it.
I use
and
for end styles block
Guys a quick one! How do you select an HTML comment tag
<!-- Comment -->using CSS.Say I have:
And I want to select the container class immediately after the comment. How do I do that?
Hey Philips! I’m afraid that CSS is unable to use HTML comments as selectors. Anything you want to select will need to be applied to the element itself, whether it’s a class, ID, attribute, pseudo-element or the element itself.
In this case, you could consider using
nth-childto select one the sections in your group.Please excuse the noob question. I have heard that you can “comment out” in the html code to resolve some formatting issues.
for example:
How are these different? why would I do this?
HomeMenu (with comment between links)
Home Menu (without comment between links)
Hey Aidan, great question!
Comments in HTML look something like this:
<!-- This is a comment and the browser will skip right over it. -->You can write whatever you’d like in a comment. That includes code.
<!-- <li>Some List Item</li> -->So, when you “comment out” HTML code, that means wrapping the code up in a comment:
<ul><li>Item 1</li>
<!-- <li>Item 1</li> This item is commented out -->
<li>Item 1</li>
</ul>
That second item will not be skipped by the browser and will not display on the page.
Sometimes that is a good way to take something off of your page without actually deleting the code. It’s usually a temporary thing. If you really didn’t want something on the page, then you would likely delete it rather than comment it out.
// won’t work for me is marked as invalid property value in the inspector, with /* */ it’s work it is shown as strikethrough
Yeah, that’s correct.
//is compatible with Sass/Less/etc. as well as other programming languages (e.g. JS/PHP) but vanilla CSS uses a/* */syntax.why the css dev don’t make it simple by adding a single line comment
comment
// comment
If you want to create a single-line comment (a line which contains only a comment), AND you hate the “/* */” syntax, you can try this:
{this is a single line comment which CSS ignores}
It’s an EMPTY selector, folks. For some reason, I tolerate the braces “{ }” easier than the C-style syntax.
CSS comments are written inside /* */ and won’t be interpreted by browsers. Preprocessors like Sass allow single-line comments (//). Vanilla CSS supports it by using hacks, but it’s unreliable. Comments improve readability and help explain code logic.