CSS

A brief about Selectors

Usually the first word people hear when starting to learn CSS is SELECTOR. As the name says , we select HTML elements and apply styling to it. And yes, when we talk about styling there are whole lot of ways to style a text/image.
Styling includes many ways/properties to add up to HTML . for example, for text {font ,back ground ,margin, padding, aligning ............}. for an image {size(width & height, position, align.......}
Types of Selectors

1. Universal Selector
2. individual Selector
3. Class & Id Selector
4. And Selector (Chained)
5. Descendant Selector
6. Sibling ~ and +
7. Direct Child
8.Pseudo

Universal Selector: Asterisk (“*”) symbol used for denoting the selector as a universal selector. The asterisk is used for selecting all elements. This asterisk also has the capability to select all elements that are inside another element.

Simple syntax looks like this:

* {
     property: value;
  }

Individual Selector: The individual selector is also known as the type or element selector. This selector can affect all over the page or specifically apply on.

Individual selectors are more specific to control/target and whereas universal selectors are general/throughout the page.

<style>
        p{
            font-size: 25px;
            color: red;
            font-style: italic;
        }
        h1{
            font-size: 100px;
            color:green;
            font-style:oblique;
        }
        h2{
            margin: auto;
            color: #ffffff;
            background-color: black;
        }
</style>
<body>
    <p>Hello ,new to coding??</p>
    <h1>Hello ,new to coding??</h1>
    <h2>Hello ,new to coding??</h2>

</body>

Output looks like this

Screenshot 2022-07-18 at 5.25.03 PM.png Class & Id Selector:

Class selectors: Class selectors consist of a dot prefixed before the class name in the CSS stylesheet. The class name is defined in the class attribute in an HTML element.

The major difference is multiple elements are allowed to have the same class name. As a result, the class selector that matches all HTML elements with the same class name will have effects.

Id Selector: The Id selector is the most specific selector. This means that it should only relate to a single element in the document. The Id selector consists of a hashtag prefixed before the id name of the HTML element. code snippet

<p class="large" id="big">this is large paragraph.</p>
<style>
   .large{
       font-size:100px;
}
   #big{
    margin: auto;
}
</style>

Chained Selector we use chained selector to select multiple elements to style syntax

h1, p, div, .class, #id{
color: #fff;
}

Descendant Selector: This selector is implemented to select every child element within the particular tag mentioned in the CSS selector section. The tags may be of the direct child of any specific tag or extremely deep within the particular tag. Here all p tags are targeted

<style>
        div p{
            background-color: blue;
        }
    </style>
<body>
    <div>
        <p>First</p>
        <h1>child</h1>
        <p>second</p>
        <p>third</p>
    </div>
</body>

A Sibling Child: selects the next siblings of a specified element
this targets only one next sibling

<style>
  div+p{}  
</style>

this targets all siblings

<style>
  div~p{}  
</style>

Direct Child: You can also select child of an HTML element li is the direct child of div here

<style>
  div>li{}  
</style>

Pseudo Selectors: these selectors are usually used in elements which has opening and closing tag(ex:lable) if we use these selectors we can modify behaviour when content is being click/pointer. examples : before , after, hover, focus

a:hover{
color: #fff;
font-size: 20px;
}

p::first-line{
text-decoration: underline;
}

Pramod Reddy

Pramod Reddy

New to CSS, Do not worry!!! CSS *Selectors{ }

CSS : explore more when only needed.

Simple syntax looks like this: