When creating a website you will have at least one HTML document and you should (if following best practice) have an external CSS file. The external CSS file is referenced in the <head> of your HTML documents and is used to style your HTML document.
CSS selectors are what you use to apply your styles to particular parts of your HTML document without having to add the styles “inline” (i.e. actually in your HTML). For example, you may want to make all <h1> elements in your HTML blue. You could do that inline by writing <h1 style="color: blue;"> every time you add an <h1>element but you shouldn’t… there’s no need, it creates more opportunities for mistakes to be made and W3C tells us not to! What you should do is add h1 {color: blue;} to your external CSS file. This will automatically make the text blue wherever you’ve used <h1> tags. In that example color: blue is the CSS, h1 is the selector.
So that’s what a CSS selector is. There are a whole bunch of different selectors available to you that allow you to be really precise in your styling. Over time you will find you start to memorise the selectors but, for the time being, here’s a useful cheat sheet. You can download the cheatsheet at the end of the article.
Download the cheatsheet here.
