This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Just like in HTML, we can write comments in CSS to add helpful notes and hints that let us know what's going on in our code.
Quick Reference
Using CSS comments
Comments in CSS begin with a forward-slash and asterisk /* and end with an asterisk and forward slash */. Everything we write between the opening and closing characters is ignored by the browser.
/* Class Selectors */
.main-header {
background: orange; /* Makes the header bg orange */
}
Just like in HTML, we can write comments
in CSS to add explanatory notes or
0:00
prevent the browser from interpreting
parts of the style sheet.
0:06
Comments in CSS begin with a forward slash
and
0:10
an asterisk, and end with an asterisk and
a forward slash.
0:14
And everything that's in-between those
opening and
0:19
closing characters is ignored by the
browser.
0:22
CSS comments are useful for
0:26
including helpful notes and hints that let
us know what's going on in our code.
0:28
So, for instance, above our type
selectors,
0:33
we can add a comment for type selectors.
0:37
And we can do the same for id selectors,
class selectors and pseudo classes.
0:42
So I'm just going to go ahead and copy the
comment we just wrote and
0:46
right above the main-footer id, I'm going
to add a comment that says id selectors,
0:50
and I will do the same above our
main-header rule here.
0:57
And this time the comment will say, class
selectors and so forth.
1:01
Now when using CSS comments, we need to be
careful where we start and
1:06
end the comment.
1:12
So, for instance, if we accidentally leave
out the closing asterisk or
1:13
slash, it also comments out the CSS rules
below.
1:19
Or if we forget any of the opening
character,
1:25
it also effects the CSS rules that follow.
1:27
Now another way we can use comments is to
write actual comments or notes in our CSS.
1:31
And these are really helpful when learning
new things about CSS.
1:37
We can use comments to indicate what
certain things do.
1:41
So for example in this main header class
rule,
1:44
we can add a comment after the background
property that says,
1:48
this makes our header background orange.
1:55
And the browser will ignore this comment.
2:02
It's just there for us, or other
developers.
2:05
Now we can also use comments to comment
out parts of our code,
2:08
mostly for testing purposes and debugging.
2:13
So for instance, if we want to temporarily
disable the 90
2:17
pixel font size in our H1, well we can
wrap it in a comment.
2:21
And when we see it turn grey, that means
that it is commented out.
2:28
So if we save our style sheet and take a
look at it again in the browser.
2:33
As we can see, the H1 text size goes back
to the browser's default text size for H1.
2:37
Most text editors have a shortcut for
creating or removing comments.
2:46
In workspaces, and in most editors, the
shortcut is
2:51
Command forward slash on a Mac, or Control
forward slash on a Windows.
2:55
So, for example if we select the font size
declaration,
3:00
then hit command forward slash, we can see
how the comment characters are removed.
3:04
Now if we select it again, and
3:11
hit hit command forward slash, then once
again it comments it out.
3:13
I am going to go ahead and remove the
comments and move them forward.
3:16
Now, if we need to select and
3:20
comment out large chunks of CSS, we can do
that as well, the same way as before.
3:22
So, I'm gonna select these three rules,
then hit Command forward slash and
3:27
now they're commented out.
3:32
Then, once again, I'll hit Command forward
slash to uncomment them.
3:33
Finally, we can also write multi-line
comments that span multiple lines.
3:38
Again, as long as it's between the opening
and
3:44
closing characters, it can span however
many lines we need it to be.
3:47
So, I'm going to hit Command forward slash
to create the comment.
3:52
Then inside I could start writing comments
on multiple lines.
3:58
So let's quickly review some of what we've
learned so far about CSS selectors.
4:13
A type, or element selector is what we use
to select the type of element on the page,
4:18
like the body or a heading.
4:24
So we use the HTML element tag as the
selector.
4:26
Class Selectors can be reused anywhere in
the HTML and
4:30
an element can have more than one than
class.
4:33
And it's also good practice to give
classes meaningful names that can
4:36
explain their purpose.
4:40
When using IDs, keep in mind that they're
not reusable.
4:42
An element can only have one ID, and
4:46
a page can only have one element with the
same ID name.
4:48
But they can also be used as fragment
identifiers for creating landmarks or
4:52
anchors and pages.
4:56
We can also create descendant selectors to
target elements that are descendants of
4:58
other elements.
5:03
And we can use pseudo-classes to style
elements based on user interaction,
5:04
like on the hover or active states.
5:08
So far in this course we've used certain
CSS properties and
5:11
values to style the elements we've
selected.
5:15
We'll learn more about those coming up
next.
5:18
You need to sign up for Treehouse in order to download course files.
Sign up