<p>The most basic way to create a webpage is by using HTML(Hypertext Markup Language) and CSS(Cascading Style Sheet).HTML gives a basic element structure of a website. like how many headings are there how many paragraphs will be there?so HTML deals with all the basic data creating part of the webpage. but if you only create a web page using only HTML the webpage will look like something made in the 90's.
So styling a webpage is very necessary so the webpage can look somewhat presentable. A CSS page can be linked with the HTML page in three ways using the </p>

The most basic way to create a webpage is by using HTML(Hypertext Markup Language) and CSS(Cascading Style Sheet).HTML gives a basic element structure of a website. like how many headings are there how many paragraphs will be there?so HTML deals with all the basic data creating part of the webpage. but if you only create a web page using only HTML the webpage will look like something made in the 90's.
So styling a webpage is very necessary so the webpage can look somewhat presentable. A CSS page can be linked with the HTML page in three ways using the <style> tag in the HTML page, another way is using inline styling which is like a <h1 style=" color: blue">.the most mature way of linking is by using a link tag(which will look something like <style rel=" stylesheet" href="styles.css"/>)where you have to create a different style page with a name of style.css.the most basic way to get started with CSS is to target an HTML page.
the ways to target an element are-

1. Universal Selector
2. Individual Selector
3. combined Selector
4. Class Id Selector
5. Chained Selector
6. Inside Selector
7. Direct Selector
8. Sibling Selector
So, let's discuss them in a proper way.

1. Universal Selector
      A universal selector is used to apply styles to all the HTML elements. this is used to apply some basic styles to all the elements.
example-
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
2. Individual Selector
    An Individual selector is used to select any single type of HTML element and apply a style to that element .like if we want to make changes to all the text color of the H1 tag which is generally black the something like 

h1{
color="purple";
}
is used.

3. combined Selector
    As the name suggests it is used to select multiple HTML elements and select them together to style altogether. Example
h1,p{
color="purple";
}
4. Class ID Selector
       <p1 class="hero-description"></p1>
        <h1 class="this_head"></h1>
            most of the time we will notice something like this type of class and ID type of attribute this is to target the HTML elements more. In the style sheet, the class element will be targeted using. so something like .hero-description and the ID tags will be targeted using # so by using #this_head type of tags.

5. Chained Selector
    The previous 3 selectors are kind of casual selectors. to target elements in a wide manner but to specifically target any element we need a more targeted selector. The chained selector is one of the elements that solve this purpose. this type of selector can target any element with multiple attributes. let's understand this by using an example

  p .head-element .first-one{
  font-size:30px;
}
    this will target an HTML element that will have these two class names head-element and first-one and must be a paragraph element.

6. Inside Selector 
      elements in the HTML create a Document Object Model which is known as a DOM tree. where the elements will structure themselves as a tree hierarchy structure. so this type of selector will point to an element using this hierarchy structure. so any p which is in the div tag is selected as
div p {

}

7. Direct Selector
  At a glance, this will look similar to the Inside selector but they are slightly different. the Direct Selector will target the sibling elements and change the style for them. let's understand this by an example

index.html
                    .....
                      <div>
                                <h1>  
                                        <p></p>
                                  </h1>
                                  <p></p>
                      </div> 
    Style.css
          div>p{
              color: yellow;
}
the styling will be applied to the last paragraph item, not to the one which is one level below the h1 tag.

8. Sibling Selector
    there are total of two subtypes  of elements in these .They are as follows
1.General sibling combinator 
      the best way to describe this is by using a simple example.   

         <div class="hello">                                                                  .hello+h1{
           <h1>this is the first heading</h1>         
          <h1>this is the second heading</h1>                                                    }
          <h1>this is the third heading</h1>    
          <h1>this is the fourth heading</h1>    
          </div>

this will select the first heading h1.so this type of selector targets the element after the class that is mentioned 
2. Adjacent sibling combinator
  Also, the best way to describe this is by using a simple example.   

         <div class="hello">                                                                  .hello~h1{
           <h1>this is the first heading</h1>         
          <h1>this is the second heading</h1>                                                    }
          <h1>this is the third heading</h1>    
          <h1>this is the fourth heading</h1>    
          </div>

this will select all the h1 tags after the div element of the class .hello.so this type of selector targets all the same elements after the class that is mentioned.

                                                                                                  

      

Taking control over elements to Style

Product

Explore

Company

Blogs

Support