CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.
Or, you can continue anyway.
CSS is about to get even more fancy.
So far, this is how you've learnt to style elements using CSS:
This makes perfect sense when we have one element that we want to apply CSS styles to. However, when we have multiple elements that we want to apply the same set of styles to, we would have to repeat the same code several times, making it inefficient.
Is there a way to define CSS styles in a way that they apply to multiple elements? Yes. There is. Otherwise, this tutorial wouldn't be here.
You may have noticed that there are two different tags that contain the word 'style' available in the full CodeDragon editor. One is style= and the other is <style>. The latter is an element itself, and can be put inside the <head> tag.
Inside it, you can use selectors to reference an element (or ), and then apply styles to it/them. The code for actually applying the styles is exactly the same.
Here's a full example of what this might look like:
You can take this way of defining styles even further by using more complex selectors. For example, you could select all paragraphs that come directly after heading 1 tags, using this syntax:
There's a lot of different ways to select elements, but I won't list them all here. You can find a full reference here.
If you find yourself in a situation where you can't simply use the relative selectors described above to select elements, luckily there is another way to select elements more specifically without using the style attribute. The answer is to use a different attribute.
This attribute is called class and the way it works is quite simple. You give all elements you want to have a specific set of styles applied to it a class name, and then select the class name in your CSS.
Here's an example:
Time to try this all out!
You may also have come across another attribute called id. This is very similar to the class attribute, since it lets you select specific elements in CSS. However, ID attributes are — only one element on a page can have any chosen ID.
Once you've given an element an ID, you can select it in CSS by preceding the ID name with a # instead of a . in the selector.
That's a very fancy word.
However, pseudo-classes ('pseudo' is pronounced s-ew-dough) aren't all that complicated and are, in fact, very useful.
A pseudo-class is a type of CSS selector that selects elements which are . For example, you can use a pseudo-class to select all headers that are being hovered over by the user's mouse and apply special styles to them. If we wanted to change the background colour of a button when the user put their mouse over it, pseudo-classes would be the way forward.
The syntax for pseudo-classes is a bit weird-looking but it makes sense. Here's how to select a heading that's being hovered over:
CSS styles are additive, which means that if you define different rules for the same particular element through multiple selectors/in multiple places, they will all get applied to the element in the end.
CSS styles also have an overriding hierarchy. Basically, if an element has two of the same rule being applied to it (but with different values), then whichever value is defined lower down in the stylesheet will be applied to it, and any other values will be ignored.
You may be confused as to why I'm telling you this. Allow me to demonstrate using an example:
As you may have expected, :hover isn't the only pseudo-class in existence. There are a few others.
Give replicating the code above in blocks a go.