CodeDragon circular icon

CodeDragon might not work properly for you...

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: Stylesheets & pseudo-classes

CSS/4

CSS is about to get even more fancy.

Written by Pal Kerecsenyi

CSS: Stylesheets & pseudo-classes

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

Attributes

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.

<style> global styles

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 multiple elements at the same time), 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.

Classes

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:

Your turn

Time to try this all out!

  1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
  2. Drag a yellow header block and a yellow paragraph block inside the body.
  3. Drag the combined pink style block inside anywhere in the head.
  4. Drag the pink colour block inside the 'selector' block and choose any colour you like from the colour picker (not white though!)
  5. Change the selector to h1 or p and watch either the header or paragraph change colour in the preview!
  6. Then, drag a combined green attributes block onto the side of both the header and paragraph.
  7. Give both of them the same class name.
  8. Change the selector to your class name (make sure to precede it with .).
  9. Drag in more headers and paragraphs and give them all the same class name, and watch them all become the colour you chose!

ID vs class

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 unique — 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.

Pseudo-classes

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 in a specific state. 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.

Try out pseudo-classes

Give replicating the code above in blocks a go.

End of tutorial