Comments in CSS can be used to help organize the code. In this video, look at the syntax and usage and update your projects.
- Comments in CSS start with a slash and asterisk and must close in the opposite order. The browser doesn't read comments, so we can use it help us read our code better. Let's talk about a few ways we can use comments. You can use it to leave notes for yourself or for others. You can also use comments to organize your code blocks into related groups. Or, just comment out a line, or a whole block of CSS to hide it from the browser temporarily. Sometimes we're not ready to use a certain block of CSS but we also don't want to delete it either, so commenting out the code helps us hide it from the browser without actually deleting it.
You'll probably notice that everybody has a personal preference for how they write their comments. You can include any characters you like as long as they are contained between the asterisks. Let's go back to our project's CSS file and add some comments to organize it before it gets long and unruly. CSS files should start with the general styles at the top, such as the ones using type selectors, and then more specific selectors can be added after. I'm going to add a comment block at the top of my page for all of the global styles.
You can use whatever characters you'd like for your comments, I prefer to add dashes underneath the text to visually block out these sections. Next I'll use the same comment style to organize other groupings of related styles for specific portions of the web page. Let's add blend for the header and footer styles, then I'll also add one for the work experience and education section, then when I have styles to add to each of these related sections, I can just add them under these comment blocks to keep things organize and group together and easy to find.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property