5/21/21

CSS tutorials : CSS Selector & Different type of CSS Selectors Part 3

(4) CSS Group Selectors 

In CSS, you can also give the same style in any Html element just need to write the style at once. You just need to select the all the Html element at once and give them style which you want. This type of selection is done by Group Selectors. In simple words, you can style many Html elements just to select them at once. You don’t need to write style for all Html elements. 

Let Us See through an example:- 

In this example, we will show you that how one style sheet will style on all the Html elements with the help of group selectors. 

Example:- 

<html>
<head>
 <title> CSS Selectors </title>
</head>
<style>
    p, h1, h2, span {
        font: 120px;
        Color: red;
        Background-color: Yellow;
        border: 2px solid green;
    }
</style>
<body>
<h1> This is a 1st Heading. </h1>
<p>  Lorem, ipsum dololoam hic minus ducimus? Deserunt commodi eaque sit expedita. </p>
<span> This is a Span.</span>
<h2>This is 2nd heading. </h2>
<p>Lorem ipsum dolor oloremque consequatur repellendus magni? Reprehenderit aut asperiores id?</p>
</html> 

Output :- 

As you can see in the above example how all the Html elements group together and once CSS properties will apply to all of them. 

(5) CSS Universal Selectors 

CSS Universal Selectors is used when you want apply a particular CSS properties to all the html elements. 

Let’s see through an example :- 

<html>
<head>
 <title> CSS Selectors </title>
</head>
<style>
   * {
     background-color: rgb(207, 107, 107);
    }
</style>
<body>
<div> <p> This is a Paragraph inside Div Container.</p> </div>
<p> This is a Paragraph Outside the Div Container.</p>
<div> <span> This is a Span tag inside the Div Container. </span></div>
<div> <textarea> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse? 
</textarea></div>
<div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, debitis? Lorem ipsum 
dolor sit amet consectetur, adipisicing elit. Error recusandae dolore eius eum asperiores?</div>
</html> 

Output :- 


In this example, we have applied the background-color CSS property to all the Html elements that why the background color of all the Html elements will change. But you can use a universal selector in many different ways. Let’s see through an amazing example. 

Example: -

<html>
<head>
 <title> CSS Selectors </title>
</head>
<style>
    div * {
        background-color: rgb(207, 107, 107);
  }
</style>
<body>
<div> <p> This is a Paragraph inside Div Container.</p> </div>
<p> This is a Paragraph Outside the Div Container.</p>
<div> <span> This is a Span tag inside the Div Container. </span></div>
<div> <textarea> Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, esse?</textarea></div>
 <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, debitis? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error recusandae dolore eius eum asperiores?</div>
</html>

Output :- 

In the above example, we saw that how we used the universal selector for the elements which is inside the div containers. The CSS property only applies to the elements which are inside the div containers. It doesn’t affect the other elements which are outside the div container.

Hope you all understand. If you still have any problem regard this, then tell us by commenting below, we will definitely try to solve the problem.  


Continue Reading →

5/20/21

CSS tutorials : CSS Selector & Different type of CSS Selectors Part 2



CSS Selectors Part 2

Hey Friend, in our last tutorials we have seen about CSS selectors and different types of CSS selectors. There are 5 types of CSS Selectors are present in CSS. I have already told the first 2 selectors in our last tutorials. So you do not read it then read the last tutorial first then read this.

CSS Class Selector

This types of selector select the Html elements by their class name. You can select any class name by using “.” And style him. Let us see through an example 

Important:- A Class Name should not be started from numerical value. 

Example:- 

<html>
<head>
    <title> CSS Class Selector </title>
</head>
<style>
.marquee{
    font-size: 30px;
    color: red;
    background-color: yellow;
}
.heading1{
    color: Green;
}
.paragraph{
    background-color: tomato;
    border: 2px solid green;
}
</style>
<marquee class = "marquee"> Example of Selectors </marquee>
<h1 class = "heading1">
    This is a Heading. 
</h1>
<p class="paragraph"> This is a paragraph. </p>
</html>

Output :- 

CSS Selector For Specific Elements

This type of selector selects the specific Html element. For example, If there are a lot of Html elements with the same class name but you want to style only on paragraph tag. Then you need to use CSS selector-specific tool. if you want to style a specific Html element then you need to go through this selector. 

Example 

<html>
<head>
    <title> CSS Class Selector </title>
</head>
<style>
    p.para {
        Color: red;
        Background-color: Yellow;
    }
</style>
<body>
    <h1 class="para"> This is 1st Heading. </h1>
    <p class="para"> This is 1st Paragraph. </p>
    <h2 class="para"> This is 2nd Heading. </h2>
    <p class="para"> This is 2nd Paragraph. </p>
</html>

Output :- 

Before Appling CSS Class Specific Selectors

 
After Appling CSS Class Specific Selectors

 
In this example, there are the same class names on the both heading and paragraph tag. But I want to style only paragraph tag. That’s why I use CSS class-specific selectors. First, select the specific Html element then the class name, and then the style which you want to style on that element. 

Continue Reading →

5/7/21

CSS tutorials : CSS Selector & Different type of CSS Selectors Part 1

Hey Friends, in our last tutorials we have seen about CSS syntax. Now, in this tutorial, we are going to learn about CSS selectors. So let’s begin…

CSS Selectors

CSS Selectors are used to selecting the Html elements which you want to style. Selectors are select Html elements by their id, class, attributes, type, etc. 

There are several different types of CSS selectors are:- 

  • CSS Element Selector
  • CSS Id Selector
  • CSS Class Selector
  • CSS Universal Selector
  • CSS Group Selector

CSS Element Selector

In this type of CSS Selector the selector select by the name of html element. Let’s See the Example below.

Example :- 

<html>

<head>

<title> CSS Elements Selector </title>

</head>

<style>

h1 { 

background-color: red;

color: Yellow; }

p { 

background-color: Yellow;

color : Green; }

</style>

<body>

<h1> This is a Heading. </h1>

<p> This is a Paragraph Tag. </p>

</body>

</html>

Output: - 

CSS ID Selector

This type of CSS Selector selects the element by its id.  It is good practice to give id or class name to each and every Html element. The main reason behind giving id and class name was you can select a particular element by its id or class name. 

Example: -

 <html>

<head>

    <title> CSS ID Selector </title>

</head>

<style>

    #heading {

        background-color: red;

        color: Yellow;

    }

    #heading2{

        background-color: black;

        color: white;

    }


    #para {

        background-color: Yellow;

        color: Green;

    }

</style>

<body>

    <h1 id="heading"> This is a Heading. </h1>

    <h2 id = "heading2"> This is another heading</h2>

    <p id="para"> This is a Paragraph Tag. </p>

</body>

</html>

Note:- For Selecting the Html Element by its id. Always use "#" first, then the id name. 

Output: -


Continue Reading →

5/4/21

CSS Tutorials - CSS Comments with Example.

 CSS Comments

Comments are added to the source code to easily understand the code. It helps the other developer or programmer to understand the code (written by another developer) easily. Just like Html, comments are also written in CSS. 

There are two types of comments in CSS: -

  • Single Line Comments: - These types of comments written only in one line. 
  • Multi Line Comments: - These types of comments are written in one or more lines.

Note :- Comments are ignored by the browser and would not be display as output. 

Example of Comments

<html>
<head>
<title> Example of CSS Syntax </title>
<style> 
h1{             
/* This style is given to the heading tag only they didn't work on paragraph tag. */
color: Red;
background-color: Yellow;
text-align: center;
}
p {          
        /* This style is given to the 
                        paragraph tag only 
                        they didn't work on heading tag. 
                        */

color: Yellow;
background-color: green;
text-align: center;
}
</style>
</head>
<body>
<h1> This is a Heading. </h1>
<p> This is a Paragraph. </p>
<div class="container">
    <p> This is a paragraph tag under the div. </p>
</div>
</body>
</html>

Output: -




Continue Reading →

CSS Tutorials - CSS Syntax with Example

CSS Syntax 

A CSS style sheet consists of a set of instructions that is interpreted by the web browser and after interpreted by the web browser instructions are applied to the corresponding elements. Such as - paragraph, heading, div, etc. 

The CSS Syntax Rule is made of three major parts:-

  • Selectors: - A Selector is an html tag on which the CSS Style Sheet will be applied. Like :- <h1>, <p>, <span> etc.
  • Property: - A property is a type of attribute of the Html elements. Such as Color, border, etc. 
  • Value: - Value is assigned on the CSS Property. Such as Color is the property and red is the value which is assigned to the color attribute. 

Syntax of CSS


Let us see through with a simple example.

<html>
<head>
<title> Example of CSS Syntax </title>
<style> 
h1{
color: Red;
background-color: Yellow;
}
p{
color: Yellow;
background-color: green;
}
</style>
</head>
<body>
<h1> This is a Heading. </h1>
<p> This is a Paragraph. </p>
</body>
</html>

Output: -


You May Also Like:- 



Continue Reading →

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.