Levels of expertise in CSS – Are you ready for the tutorial?

The following is a guide to help understand Cascading Style Sheets (CSS) tutorials. To assist with those who are creating tutorials, as well as my future tutorials, I would like to quantify levels of expertise in CSS. I’m planning on making a guild for HTML and JavaScript! I have found that sometimes these skill levels are not well defined. So as a resource for students to gauge if a tutorial is right for them, I’ve come up with the following. For this scale, I will use Beginner, Basic, Intermediate, and Advanced to indicate what prior knowledge a student should know before taking on a tutorial. For each level, the student should know or have:

Beginner CSS

Know nothing Jon Snow

  • No previous knowledge of CSS

Basic CSS

Peter Grifin level of confidence

  • Requires a basic or intermediate knowledge of HTML.
  • How to make a style rule.
  • Understanding of the differences between a tag, ID, and class rule declaration.
  • Understand on how styles ‘cascade’ downward.
  • Some basic style rules, like color, font-family, background-color.
  • How to insert CSS files into HTML documents.
  • What pseudoclasses are, and how to target rules on to them.
  • What web fonts and system fonts are.

Intermediate CSS

getting there

  • What the rule !important does and why not to use it in most cases.
  • What the browser defined styles are and why reset files are needed.
  • Most of the style rules.
  • How to target rules based on HTML attributes.
  • Understand the various ways of positioning and when to use them.
  • Understand the box model, when to use position, margin, border, padding, height, and width.
  • How to nest styles within styles.

Hey if you like this why not sign up for my once-a-month newsletter that covers my favorite content on tech and programming delivered to your inbox


Advanced CSS

Bob ross of css

  • Requires an advanced knowledge of HTML.
  • All style rules and when they apply to specific tags.
  • Sibling selectors, like > and +.
  • How to solve style issues caused by browser compatibility.
  • How to use media queries to build responsive sites and elements.
  • How to create animations with keyframes.
  • How to use :before & :after to make style driven elements in the DOM.
  • Understand what CSS preprocessors are and how to use at least one.

This blog is only a guideline, of course, there are plenty of cases where some overlap of knowledge will be required. Example being a basic tutorial requiring some intermediate knowledge. For students, just remember Googling for terms you don’t completely understand is encouraged. For educators, it’s not a bad thing to go into more detail on what you think might be necessary knowledge.

Brian at Sheridan College

Further Reading

Site Footer