Comments in CSS

(Lots of grammatical errors found by google docs)

Hello friends.

 You are welcome to our series CSS.

 In the last segment, we learned 3 things on how to add CSS.

 I hope that all those 3 ways of ours, internal, inline and external.

 You must have practiced all 3 ways in practice and if after practicing they are running successfully, it is really well and good.

And if you are facing any issue and difficulties in performing the practical, you can immediately tell us about it on forum.Learnvern.com.

 We will try to solve your issues at the earliest and revert to you.

 So our last topic was about how to add CSS.

 Our today’s session is on CSS comments.

 How can we add comments in CSS?

 The 1^st thing is why do we feel the need to add comments?

 And the reason is

 Like we saw in HTML, in that even we used to add comments.

While writing the code.

 Its use is that, when a programmer makes a program then the code that you have made, for other programmers to understand that these comments would be useful.

The particular piece of code that you have written, what is the reason to write that code.

 In the web page, what does that piece of code indicate?

 Is it for any table, for any list, any form?

All these when we show up for the comments, so that is helpful for the other programmers.

 They can understand it quickly.

 Along with that, it is also helpful for who has programmed it.

With it, it is quickly identified that this particular portion represents this particular output.

 So, in this way the comments are useful.

 So, like it is written in the slide.

 CSS comments are generally written to explain your code.

 It means that to explain our codes we write comments in CSS and it is very helpful for the users who read your codes.

 So that they can easily understand the code.

Hence apart from you the users who are using it, it is useful for them.

At the end it is mentioned that comments are ignored by the browsers.

So, of course whatever we write in comments, when our web page is executed, at that time it doesn’t load.

 The comments are not executed.

 It means that the browser ignores the portion written under comment.

So, whatever we have written under comments does not get executed.

 So, we will start today’s segment and add the comment.

 So, 1^st of all we will open Sublime Text.

 Here I will write HTML.

Example comments.

 We will save this program.

 Comments dot html.

Okay.

 Now we will go to the slide. In the slide it is mentioned that comments are single or multiple lines statement and written within/* then our comment section*/.

It means that whatever comments we have to add.

We will add those in between these signs.

Comments can be single as well as in multiple lines.

So, how is it added?

 Let’s see with our example.

In this I write some html codes. Let’s say, I write h1, “this is an example of comments”. And we will save it.

When we will run this program.

pause

Comments, open with Google Chrome. So, this is a program which is running.

This is an example of comments.

Now there is no CSS in it.

So, let’s say that here I add internal CSS.

So, style, here since we have added h1 tag, I write here h1 and I write here padding 10px, color- white, background color- red and font-size- 30 pixels.

I have in total added 4 properties for this element, for h1.

After adding all 4 properties, I save it and when I run the program, reload it.

So, here I am getting some CSS in which the background turns red and the font is white.

If the font size increases, it gets padding.

Now, let’s say that I write this same portion once again.

 And this time I make the padding here 20 pixels, I will make the color black and I will make the background color as light green. (5.00)

Now, I have given the same elements, 2 CSS properties but at one time I want only one property to be applicable.

So, what I will do, I will comment on the 1^st one.

So, like we saw in the slide, for commenting we can us /* and */.

So, I am adding here /* and where it is ending */.

So, my other h1 portion gets active.

The one I have commented on is appearing in grey color.

We will save and run it.

So, here with more padding we are getting color in black and with green, we are getting this result.

What did we do? We commented on one portion and kept the other portion active.

So, we are getting another result here. So, let’s say I again want the 1^st portion.

So, I will make it uncomment.

So, I will remove this portion.

 And I will add /* and */. I will load it. I will get the earlier result.

So, here we learnt 2 things: How we can comment and uncomment.

So, this is our multiline comment because here between /* and */ We have made almost 6 lines of comments.

if we want a single line comment, I will add a notice here “Below section explains about H1 style.” Here we can see in pink color because these are our key words.

 If I want to comment it, in front of it also I will add /* and */.

So, this will be my one-line comment. With the help of these 2 if we are writing it in multi-line.

We have to add it like this, if we are writing it in one line, we have to write in one line.

So, let’s say, if we are using Sublime Text, we even have a shortcut key for the comment.

Our shortcut key is Control plus question mark.

The portion that I have to comment on, I will select that portion.

So, currently I have selected my line, so I will press Ctrl and question mark together.

So, this portion gets commented on.

If I press Ctrl and question mark again, together, so my portion gets uncommented but make sure that portion is selected. Okay.

So, I will comment on this also. Save and reload.

Whatever I have written here in comment, that is not showing up in the browser.

 So, this is our advantage, whatever comments we have added.

It doesn’t show the run time in the browser.

And along with that, like I have written here in the code. “Below section explains about H1 Styles' '.

Here we are getting to know about the h1 style.

So, this is information for the user.

We are informing the user.

Whatever section is written below that is used to style h1 tag.

So, here we learned how we can add, single line and multi-line comments.

 So, this was today's segment where we have learned how to add comments.

So, I hope that you have understood today’s segment and you will try to add comments on your own.

If you are finding any difficulty in adding the comment or if you haven't understood anything in today’s section.

You can tell us about it on forums.learnvern.com.

 We will try to revert to your questions as soon as possible. Our next CSS segment will be on the CSS selector.

Thank you.