In this edition of the Technobabble series, we are going to continue talking about learning CSS, but this time looking at how to select elements. If you missed the previous article, where we looked at why learn CSS is always related to HTML, you might want to start there before we go into ‘selectors’.
As there is quite a bit to learn with CSS, we will divide it into three manageable articles: simple selectors, combined selectors and complex selectors, giving you time to try things out and gradually build upon what you have learned.
Learning CSS doesn’t need to be difficult. In this article, we’re going to look at simple selectors or element selectors, which are the ones that refer directly to an element. So, without further ado, let’s get stuck in!
This is the most direct of all. Simply use the name of the selector, like you would with HTML.
A “class” selector always starts with a period “.”. Classes are used to select a group of elements at any one time, even if they are of different types. You can use an unlimited number of classes, and you can have more than one class per element by simply separating them by spaces.
An “id” selector can only be used once and there can only be a single element with the same id. It is used to define a specific element.
Important: If it is used more than once, the same id may appear differently in different browsers.
The ids are selected from the CSS with a hashtag “#”.
We can apply a CSS rule to all the elements of a web page, but sometimes, on very large pages, the performance can be affected. A good use of it is to change the font-family or the colour of the text.
So there you have it: Learning CSS part 2, simple selectors. Doesn’t seem quite so tricky now, right? In the next article, we will play around with the combination of these simple selectors and get slightly more specific.
Interested in learning CSS, HTML and other programming languages such as Java? Take a look at our course of Java Web Developer bootcamp.