December 18, 2018 · coding CSS

CSS Selectors

There are two type of selectors - Tag selectors and Class slectors.

A tag selector will effect that tag through-out your entire code. For example

h1 {
    color: red; 
    font-size: 200px;
}

This will effect all the horizonal rules within your website.

If you were wanting only specific selectors to be changed you need to introduce the class property to differentate between different lines of code.
In the HTML code you would insert the following class property

<img class="bacon" src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/118/bacon_1f953.png" alt="bacon-img">
  <img class="broccoli" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/155/broccoli_1f966.png" alt="broccoli-img">

then in your CSS file you you change the property for that specific line of code.
When using class selectors you will need to put a "." before the class property name like below

.bacon{
    background-color: green
}

.broccoli{
    background-color: red
}

111-3

Classes vs Ids

In the CSS, a class selector is a name preceded by a full stop “.” and an ID selector is a name preceded by a hash character “#”. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

The class element is useful in grouping tag that you want to have a smilar style, whereas a id is more targeted at a single element like a <h1> or navigation bar.
It is posisble to have multiple class elements for the same attribute but you cant do the same with id.

<img class="broccoli circular" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/155/broccoli_1f966.png" alt="broccoli-img">

Pseudo-classes

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

img:hover {
    background-color: gold;
}

222-2

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket