New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

CSS: Visual Optimization
Illustration by

What is a comment?


From:

CSS: Visual Optimization

with Justin Seeley

Video: What is a comment?

One of the easiest ways to let people know exactly what's going on inside of your CSS documents is to use something called a Comment. And you might not know exactly what a Comment is or how to write one, and so that's what we're going to talk about in this movie. What exactly is a Comment? So, I'm going to start off with a black CSS document, so let's go to File, New CSS, and you can create a new CSS document in whatever code editing application you happen to be using, it doesn't have to be this exact one. And so I'm just going to start off by typing out the body tag here and then on the second line I'm just going to define something like the font-size and then after that we're going to do something like 62.5%.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS: Visual Optimization
1h 11m Beginner Feb 12, 2013

Viewers: in countries Watching now:

Take a tour of a workflow that optimizes CSS code for easier navigation, organization, and readability. In this course, author Justin Seeley covers best practices for writing CSS in an easy-to-read format, commenting code, developing a table of contents, and adopting other methods that help produce "cleaner" code. The course also contains tips for speeding up development with some online tools and simplification techniques.

Topics include:
  • Exploring good versus bad style sheets
  • Creating section headings
  • Indenting code for enhanced readability
  • Creating single- and multi-line comments
  • Avoiding unnecessary tags and classes
  • Creating master color and typography guides
  • Simplifying comments
Subjects:
Web Web Graphics Web Development
Software:
CSS
Author:
Justin Seeley

What is a comment?

One of the easiest ways to let people know exactly what's going on inside of your CSS documents is to use something called a Comment. And you might not know exactly what a Comment is or how to write one, and so that's what we're going to talk about in this movie. What exactly is a Comment? So, I'm going to start off with a black CSS document, so let's go to File, New CSS, and you can create a new CSS document in whatever code editing application you happen to be using, it doesn't have to be this exact one. And so I'm just going to start off by typing out the body tag here and then on the second line I'm just going to define something like the font-size and then after that we're going to do something like 62.5%.

And so, after I type out 62.5%, some people might not understand exactly what that means. 62.5% of what exactly are we defining here? And so I need to put something in here that explains to the layperson exactly what this means. And so in order to that I need to insert something called a Comment, this is code that is not going to be interpreted by the browser, it's actually ignored by the browser, and it's only visible to people who view the CSS document itself. And so, in this case, to start a comment you just do a slash, and you do a little asterisk like this, and you would do something like 1em is equal to 10px and then we'll close that with an asterisk and a slash like this.

And so basically, in this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow free using ems to set the font size later in the CSS in a more intuitive base 10 type of way. And so, hopefully somebody will understand that and will read into that from that comment that I produced right there. You can also do this for something like colors as well, so if you wanted to define a color for this text like #333, and if somebody doesn't understand what color that is that's okay, you can just do a slash, and you could do something like dark grey just to let them know what the color is and so if they chose to change it, they would know, oh okay, I'm changing the color from dark grey to something else.

So these little comments are actually very useful for determining things like this. And so, in essence, when you work on comments, this is a great way to sort of road map where you're going and also a great way to add in little bits of information regarding the code that you've inserted into your CSS documents and let people understand exactly what you were going for in this markup.

There are currently no FAQs about CSS: Visual Optimization.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Visual Optimization.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.