The Ultimate HTML & CSS Cheatsheet

Today is the last big lesson in Skillcrush 101 and CSS. If you take Skillcrush 101, lessons 15 and 16 are both listed for Friday’s lessons in week two. I decided to split up these two lessons for this series.

Floating and layouts can be tricky in code and need a separate post. Lesson 16 is mostly a review of the best practices for CSS. This lesson goes over similar tips I mentioned when I talked about the best practices for HTML.

Instead of just reviewing the best practices, I decided that today’s post would be a final wrap-up of HTML and CSS. This post will go over some tips for working with CSS. I will also introduce you to the span tag and show you how to use it in your code.

CSS best practices.

Time is very valuable regardless of what you do. To make the most of your time, everyone tries to do a task as quickly and correctly as possible so they don't have to redo every task. This is very important for developers regardless if they are newbies or senior developers at Google.

Developers want to make use of their time as efficiently and effectively as possible since many things need to be done to make a website ready for the web. Lesson 16 focuses on some best practices or actions Skillcrush students can take with their CSS to manage their time effectively so they can avoid problems in the future. These are things developers can do, avoid, and never do.

I recommend looking over these lists as you double-check your code so you can fix some of these mistakes as you go. Let's get started by looking at the things you should do.

1. The code needs to be nice, neat, and tidy.

You learned about this during HTML, but it still applies to CSS. Organization is a must for easy-to-read code and is nicer to look at. It might sound hard to accomplish, but it is easier than you think. The ways you can organize your code are:

• Indent CSS properties
• Create space between each code block
• Utilize uniform, descriptive naming conventions
• Alphabetizing your CSS properties in each code block

2. Make sure your code is short and easy to understand.

People love anything short and easy to read. It is only natural for developers to love short and easy-to-read code. There are plenty of reasons why, but this is mostly due to processing time and how long it takes a website to load content.

Lots of code means it will take lots of time to translate everything to the browser which won't make your users happy. Skillcrush has a few tips to help you shorten your code in a way you as well as other developers can understand what you are trying to do.

• Use classes for styles that repeat
• Pick short names for classes and IDs
• Combine code blocks and declarations if able to.
• Shorten declarations

If you are just starting your coding journey, shortening your code might seem overwhelming for you. That is ok. Skillcrush suggests skipping this for now and focusing on understanding your code.

Ultimately that is the main goal for any developer. As you get more comfortable with coding, you can start focusing on shortening your code concisely.

3. Organize your CSS just like your HTML.

Computers are just like you and have a specific way they read information. When they see HTML, they will read the code from top to bottom. This is the same approach used to read CSS.

Therefore, you should write your code in the same manner. Skillcrush suggests starting with your global styles on a style sheet. These are styles applied everywhere on a website.

Next, you put the styles for how they appear on the page. After global styles, I would have an area for all style changes for the header and then the body. Inside the body styles, I might be a little bit more organized and style-specific sections before I end with the footer styles.

4. Start using comments to keep your code organized.

Be prepared to start using comments in your code. They are helpful for anyone reading your code since it lets them understand important ideas or sections. Comments don't appear in the browser so they won't affect any styles you have on your elements.

There are a couple of ways to comment on your code. A one-line comment would be like this example here.

/* This is a one-line comment. */

If you need to comment on lots of items, it would look like this one.

/* Hello world!
This is a comment with multiple lines.
See the difference? */

Comments are versatile and can be used everywhere in lots of ways. You might see developers use comments to call out specific code for header, footer, and other important areas on your site. The goal is to make your code easy to read so you can find things easily.

CSS best practices don't just apply to things you should do.

Now that we looked at the best CSS practices, it is time to look at some of the best practices developers never do. Skillcrush has a small list of things you should never do.

1. Use an image of what you can do in CSS.

Throughout the past few weeks, you've learned lots of ways to use CSS to style elements from how to use color to change the dimensions. As you style your website, you want to use all the CSS properties, tips, and tricks to help you instead of using images. For example, I should just set a section with a background color with CSS instead of using a background image of a color I want.

2. Reuse class names.

Using the same class names over and over again in code is a quick way to cause problems in your code. The computer will have no idea how to tell the class names apart so you'll be getting an error message very quickly. Skillcrush suggests using different class names for these situations, but they also recognize you can still reuse class names as long as you attach them to an HTML selector. This might look in your code like this.

p.blog-post {
  font-family: Roboto;
  font-size: 17px;
}

article.blog-post {
  width: 600px;
  float: left;
}

I still am using the blog-post class name for these elements, but I added the HTML selector before the class name to let the computer know which class names I'm referring to. This might seem tougher for newbies just starting to learn how to code, so I recommend sticking to naming your classes differently. It will be much easier and will be less of a headache for you later.

3. Overwrite your code.

Remember how computers read CSS? We discussed this earlier in how you organized your code and how you should write your code the same way computers will read it. When you overwrite your code, any changes you make at the end of a document will override or change the code you made at the top of your code.

This sounds silly since it is writing the same code multiple times. It can also be a pain for developers when your code has thousands of lines of code. As you overwrite your code, that means you will have to sort through every line to make changes. If you must change styles, it is best to change the style at the source and find the original in your code.

What should you avoid?

Now that you know some of the things you can and can’t do in your code, it is time to talk about things you should avoid doing in your code. These aren't necessarily right or wrong, but Skillcrush discourages students from using these in your style sheet unless it is a last resort.

1. Negative margins

This is one of the practices I am guilty of the most when I code and need to improve on it. We talk about spacing and margins often and how these areas will be the place you play around the most as you style a website. In some cases, you will not want a space between elements or have them be very close.

It is easy to think negative margins can be the solution to this problem, but they actually can create more problems for you. The biggest problem with negative margins is overlapping elements. Developers don't want overlapping elements.

Instead of using negative margins, Skillcrush suggests students play with the padding or a nearby margin. For example, I would try setting the padding to zero and playing with the opposite sides of the element's margins. If that doesn't get me the results I want, then I can use negative margins.

2. Fixed heights

I talked about this often when I explained width and height. Fixed heights don't make a good user experience. Remember a fixed height leads to a scroll bar for any text that might overflow from its container. It is best to avoid this as much as possible.

3. Using borders on lots of elements.

Borders are great on a website, but there is a limit on how many you should use. Too many can throw off all your measurements. Plus it would just look odd seeing a bunch of borders all over a website.

Skillcrush suggests using borders sparingly per page. They suggest using borders on one to two elements. If you need more lines to separate your page into different areas, try other ways to keep things organized such as playing with the spaces or using the background color.

4. Floating too many things.

This is another topic addressed in this series and is something newbies can easily do as they are learning how to code. Floating too many items can create lots of problems with your site. When I built my first website as a developer, I floated way too many elements which resulted in a messy website in the browser. When it comes to floating, it is best to float only when it is necessary and as little as possible.

5. Floating to the right

You might have noticed in my previous post that I floated my items to the right in some of the sample code. That isn't a good CSS practice. Floating elements to the right can mess up all the hard work you've done on your website very easily.

If you want to work in responsive web design, floating right will give you a headache as you translate these layouts to your site. Avoid the headache by just floating left as much as you can.

Let me introduce you to the span tag!

As we wrap up HTML & CSS, it is time to introduce you to another HTML tag you can try in your code. The span tag isn't used as often as div tags, but it is a nice trick for developers to know as they create websites. A span tag allows developers to add style to sections of inline text.

You might use this tag to give a little bit of style to a few words. First, you need to add the span tag in your HTML. I created a brand new website with a sample code for my HTML file.

I want to have a few words italicized and have the color purple. I set the span tag around the text I want to be changed and gave the tags a class. I named my classes "emphasis-1" for all my span tags.

<p>This is an example of how I can use span tags in my code. In order to use a span tag, I would put a span tag around <span class="emphasis-1">words I want to draw attention to.</span> 
Once I decide where the span tags go, it is time to go to the style sheet! I am going to add <span class="emphasis-1">purple and italicized</span> to my span tags. What do you think now?</p>

Once you set all the span tags in your HTML, it is time to move to the style sheet and use some CSS. Inside my style sheet, I took the class name "emphasis-1" and used the CSS properties to get my text italicized and change the color from black to purple.

.emphasis-1 {
  font-style: italic;
  color: purple;
}

Now it is time to check and see if everything appears in the browser. Below is a screenshot of what I see in the browser. Although you are seeing only a section of my sample code, you can see from my HTML sample code how the span tag around the "add purple and italicized" text has some style while the rest of the text is left the same.

Conclusion

That's a wrap on CSS! You learned some best practices for working with CSS and what you should avoid as much as possible. Although this post is mostly a review of things you should and shouldn't do in your code, you did learn about a brand-new HTML tag.

I showed you how to add a span tag to your website so you can add some style to small sections of text. We may be finished with CSS, but I'm giving you another break to practice using span tags, and check out some of the resources in this post. This a great time to practice your coding skills and everything you've been learning throughout the series.

This post was originally published on June 7, 2017 on the blog The Original BritishPandaChick. I made minor changes to the original post to work here on DEV.