Css Selector Tutorial with examples

CSS Selectors

css Selectors is the selection of html element you want to edit or style.

Css Element Selectors

Example

here all <p> tags will be selected and codes inside css will be applied to all <p> tags.

Css Codes

    p {
       background-color:#fff000;
       font-size:20px;
    }
  

This code will create a background color and bigger font size of every content inside <p> tag.

---

CSS Id selector

Id is the unique id which can be given to any one element of html for that whole webpage. We will see it in the Example

Example

you can add id like this

<p id="htmlid">
and then add css like this
Css code

    #htmlid {
           background-color:#fff000;
           font-size:20px;
    }
  

this code will create same thing as provided above about it

---

Css Class selector

Class is same as id but difference is that you can give same class to multiple element of html

Example

you can add class in html like this.
<p class="htmlclass">
and can access and css like this

Css code

    .htmlclass {
              font-size:20px;
              background-color:#000fff;
    }
  

---

Css universal selector(*)

* as a selector is used to select html complete background.

Example

Css universal selector Example is here

Css Code

    *{
      background-color:#dd00dd;
      font-color:blue;
    }
  

Some Another Examples

    div {
      width: 320px;
      padding: 10px;
      border: 5px solid gray;
      margin: 0;
}
  

  ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
  

ul {
  list-style-image: url('sqpurple.gif');
}