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 explanatory notes or prevent the browser from interpreting parts of the style sheet. CSS comments are useful for including helpful notes and hints that let us know what's going on in our code.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Just like in HTML, we can write
comments in CSS to add explanatory
0:00
notes or prevent the browser from
interpreting parts of the stylesheet.
0:06
CSS comments are useful for
including helpful notes and
0:12
hints that let us know
what's going on in our code.
0:17
Comments in CSS begin
with a forward slash and
0:21
asterisk and end with an
asterisk and forward slash.
0:26
Everything that's in
between those opening and
0:32
closing characters is
ignored by the browser.
0:34
For instance above our
type selectors, we can
0:39
include a comment that reminds
us these are type selectors.
0:42
And we can do the same for
our ID selectors.
0:49
And our class selectors.
0:56
When using CSS comments, we
need to be careful where we
1:05
start and end the comment.
1:09
For example, if we accidentally
leave out the closing asterisk,
1:11
or closing slash, or put them
in the wrong order,
1:18
it also comments out the
CSS rules below.
1:25
Another way we can use comments
is to write ourselves notes in our CSS.
1:33
These are really helpful when
learning new things about CSS.
1:39
We can use comments to indicate
what certain things do.
1:44
For example, we used a pseudo-
class called :focus to make it
1:48
obvious when the user tabs to one
of our links using the keyboard.
1:54
But, what if we have trouble
remembering what that does later?
1:58
The browser will ignore
this comment.
2:14
We can also comment
out parts of our code,
2:17
mostly for testing
purposes and debugging.
2:21
In our last video, we used a
pseudo-class called :first-child
2:26
to make the first item in our
ordered lists bold. If we wanted
2:31
to temporarily disable that CSS rule,
we could do so with a comment.
2:35
When we see the block of code turn
gray, that means it's commented out.
2:46
And the first item in our ordered
list should no longer be bold.
2:50
Most text editors have a shortcut for
creating or removing comments.
3:00
In workspaces and in most editors,
3:06
the shortcut is command + / on a
Mac or Ctrl + / on windows.
3:10
For example if we select the rule
targeting the :first-child
3:16
pseudo-class for our list items
within the ordered lists,
3:22
then hit command + /, the
comment characters are removed.
3:27
Press the key command again and
the comment is restored.
3:32
Let's quickly review some of what
we've learned so far about CSS selectors.
3:41
A type selector is what we use to
select the type of element on the page.
3:46
We use the name of an HTML
element as the selector.
3:52
ID selectors target HTML elements
that have a particular ID applied to them.
3:56
IDs in our HTML are not reusable.
4:04
An element can have
only one ID and
4:08
a page can have only one
element with the same ID name.
4:11
Class selectors can be reused
anywhere in the HTML and
4:16
an element can have more
than one class.
4:21
It's good practice to
give classes and
4:24
IDs meaningful names that
explain their purpose.
4:27
We can also create descendant
selectors to target elements
4:31
that are descendants
of other elements.
4:36
And we can use pseudo-classes
to style elements based on
4:39
user interaction, like targeting
:hover or :focus states.
4:43
So far in the course, we've used
CSS properties and values to
4:48
style the elements we selected
without really examining what
4:54
they do. We'll learn more about
those properties and values next.
4:57
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up