Once you understand the different ways you can use CSS with your HTML code, we can begin building our first CSS style sheet. For this example, let's start by building an external style sheet. As mentioned before, you can start your style sheet by saving an average text (.txt) file as a CSS (.css) file. Once you have done this, we are ready to begin.

If you are coming to CSS for the first time, it may come as a shock (and a relief!) that CSS pages have no definitive beginning or endings. By this, I mean there are no beginning or ending marks or tags. CSS pages can be nothing but CSS rules from top to bottom. However, it can sometimes be helpful to add some notes to the top of your CSS page to describe what that page is used for. It can also be helpful to write notes explaining what certain CSS properties and rules do.

To add a comment in CSS, we use the "/*" and the "*/" symbols.

NOTE: CSS notes can also be written into an inline style, but this can make your HTML code appear extremely confusing and therefore is not recommended.

Here is an example of a CSS comment:

/* This is my first style sheet! */

These comments do not have to be on their own line. For example:

p{
color: red; /*this style changes all text within a p tag to red */
}

When debugging CSS, it is sometimes helpful to comment out the CSS styles you are not using at the moment, but may want to use in the future. For example:

Body{
Font-size: 20px;
/* font-weight: bold; */
}

Finally, when adding comments that are longer than one line, you simply add the starting and ending comment marks at the beginning and end of the comments, respectively. For example:

/*Styles are fun!
There are many different styles we can learn.
You will probably never know every style in CSS */
Previous Next

Startup Discount
Small Business?
Contact us for an Enormous Discount!