Development Path

When To Start Learning CSS

Alan Johnson

September 6, 2022

(6 minute read)

CSS Wallpaper

When should you start learning CSS?

Once you have a good grasp on HTML basics, now its time to learn CSS. The reason you don't need to know everything when it comes to HTML is because you can GOOGLE it. Once you become a great researcher/"Googler", you can always look up certain aspects or tags for HTML. Even the most experienced developers have to Google things, so please learn to use this tool, it's very essiential.

Intro to CSS

Jumping into CSS can be extremely daunting, because CSS is filled with so many worlds of possibilities. How I began to learn CSS was through FreeCodeCamp at first. I was using a website IDE named, "CodePen", which I still use sometimes to this day. An IDE is an Integrated Development Environment. Most developers will use VS Code (Visual Studio Code), IntelliJ IDEA, and Aptana Studio 3. But the main IDE that most companies prefer is VS Code. Now CodePen is an alternative to an IDE, but still works great and its very useful for learning how to code.

CSS Basics

The first lesson I ever learned in CSS was how to change the "Background Color" for the body of the project. Honestly, when I could change the color to anything I really wanted, I was hooked already. Now lets get this straight, CSS is not all sunshine and rainbows, it can get challenging if you don't structure your code correctly.

Indentation for your HTML is so important when learning how to write code. Having the proper formatting in your IDE will help you out tremendously, when finding classes for CSS. Classes can be very specific or very common.

Common Classes

  • Paragraph (p)
  • Body (body)
  • Headers (h1, h2, h3, etc.)
  • Title (title)
  • Images (img)

Classes can be anything you want them to be, but be very specific and short with your class names. There is room for error when transferring class names from HTML to CSS, so make sure to make specific names that fit the reason of the content. This is part of being a great developer, because if you are working on a project with your team of maybe 20 developers you want to make sure your class names are specific and not something completely bizarre.

Examples of Specific Classes:

  • h1 : class="title"
  • div : class="container"
  • img : class="tech_image"
  • title : class="title_content"
  • p : class="content"

Next week we are going to dive deeper into CSS Basics and gravitate towards classes being "selectors", and the properties that inside of your CSS window of your IDE.


Development Path

Show me the code!


Back to Top