CSS selectors


CSS selectors is used to select HTML elements which you want to syle.

 

Id selector

  • It is used to apply CSS in a particular HTML element.
  • We must have use ‘id’ with a unique name to specify a single element and apply css in this.
  • Id name is used in CSS with a hash character(#), after this, we can use CSS attribute in ‘{ }’.
  • Id name must have no space.
  • You can use only one id name in a single HTML element.

 

Syntax –

Id=” unique id name here

 

For example

<html>

<head>

          <title>Teknowize</title>

          <link rel="stylesheet" type="text/css" href="G:/style.css">

</head>

<body>

    <h2> welcome to teknowize</h2>

    <h2 id="kuchv"> thank you </h2>

    <p> this is my website </p>

 

</body>

</html>


#kuchv

{

    Color:  red;

}


Output

css selectors

Class selector

  • It is used to apply CSS in a particular HTML element.
  • We must have use ‘class’ with a unique name to specify a single element and apply CSS in this.
  • class name is use in CSS with the punctuation character(.), after these, we can use CSS attribute in ‘ { } ’.
  • class name must have no space.
  • You can use one or more than one class name in a single HTML element with giving space between two class name.

 

Syntax –

class=" unique class name here "

 

For example

<html>

<head>

          <title>Teknowize</title>

          <link rel="stylesheet" type="text/css" href="G:/style.css">

</head>

<body>

    <h2> welcome to teknowize</h2>

    <h2 class="kuchv1 kuchv2 "> thank you </h2>

    <p> this is my website </p>

 

</body>

</html>


.kuchv1

{

    Colorred;

}

.kuchv2

{

   font-size:1rem;

}


Output

css selectors


CSS Universal Selector

  • The universal selector (*) selects all HTML elements on the page.
  • The CSS rule below will affect every HTML element on the page.


For example

<html>

<head>

          <title>Teknowize</title>

          <link rel="stylesheet" type="text/css" href="G:/style.css">

</head>

<body>

    <h2> welcome to teknowize</h2>

    <h2> thank you </h2>

    <p> this is my website </p>

 

</body>

</html>


 *

{

    Color:  red;

}


Output

css selectors

CSS element Selector

  • It is used to apply CSS in a particular HTML element based on the element name.
  • we need to write element name only, after these, we can use CSS attribute in ‘ { } ’.


For example

<html>

<head>

          <title>Teknowize</title>

          <link rel="stylesheet" type="text/css" href="G:/style.css">

</head>

<body>

    <h2> welcome to teknowize</h2>

    <h2> thank you </h2>

    <p> this is my website </p>

 

</body>

</html>


 p

{

    Color:  red;

}


Output

css selectors