Skip to main content

11/100: Selectors in CSS

 Welcome to the 11th day of 100 days web development challenge. Today is my 3rd day of learning CSS for web development. 

Using CSS feels like I have more control over the look and feel of my HTML documents. And honestly speaking, it is fun learning CSS because I'm able to change the color and position of my texts and paragraphs. 

Today I learnt about "selectors" in CSS and wrote 5 HTML files that are styled using different types of selectors and uploaded those files on my GitHub.


Topics:


What is Selector in CSS?

  • A selector is an HTML tag at which style will be applied.
  • This could be any HTML tag like <h1>, <p>, <table> etc.
  • CSS selectors are used to "find" or as it's name suggests to "select" the HTML element that we want to give style to.
  • To style, we first write the selector that is the name of the HTML element followed by opening and closing "curly braces".
  • Inside those curly braces we write the CSS rule that we want to apply to that element.
  • Those rules we write inside the curly braces are called "Declaration" which is in "key:value" pair.
  • We can write as many declarations as we want.


Types of Selectors in CSS:

We can declare selectors in 5 ways, they are:

  1. Id Selector:
    • The "id" selector styles the element by using the id of that HTML element.
    • Id is an attribute in HTML which is be used to give unique identity to each different element.
    • We can give id to any HTML element by declaring it in the opening tag of that element.
    • We cannot give same id value to any other element, which makes it unique for every element.
    • The id selector is used when we want to style a single HTML element.
    • An id value cannot start with numbers.
    • In CSS, we write "#" followed by the "id" value name and then write the style rule in curly braces.
    • For example:
<head>
    <title>CSS id selector</title>
    <style>
        #heading{
            color: blue;
            text-align: center;
        }
        #me{
            color: blue;
            text-align: center;
        }
        #name{
            color: blue;
            text-align: center;
        }
        #place{
            color: blue;
            text-align: center;
        }
        #status{
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2 id="heading">Welcome to My Web Page</h2>
    <h3 id="me">About Me</h3>
    <p id="name">My name is <span style="color: red; font-weight: bold;">Brijraj Rastogi</span>.</p>
    <p id="place">I live in <span style="color: red; font-weight: bold;">Navi Mumbai</span>.</p>
    <p id="status">I'm currently learning <span style="color: red; font-weight: bold;">CSS</span>.</p>
</body>


  1. Element Selector:
    • The "element" selector styles the element by using the name of the element.
    • It is used when we want to give style based on the name of the element, which means it will style all the occurrences of that element.
    • We only need to write the element name followed by CSS style rule in curly braces.
    • It is useful when there are many occurrences of an element and we want to apply same style to all of them.
    • It requires less code.
    • For example:
<head>
    <title>CSS Element Selector</title>
    <style>
        p{
            color: blue;
            text-align: center;
        }
        h2{
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Welcome to My Web Page</h2>
    <h2>About Me</h2>
    <p>My name is <span style="color: red; font-weight: bold;">Brijraj Rastogi</span>.</p>
    <p>I live in <span style="color: red; font-weight: bold;">Navi Mumbai</span>.</p>
    <p>I'm currently learning <span style="color: red; font-weight: bold;">CSS</span>.</p>
</body>


  1. Class Selector:
    • The "class" selector selects elements with a specific class attribute.
    • We can specify the same class attribute value name to other HTML elements also.
    • By specifying the same class value to many elements, we can style those elements by writing style rule for that single class name.
    • We write a period(. character) followed by the class name and then write the style rule inside the curly braces.
    • For example:
<head>
    <title>CSS Class Selector</title>
    <style>
        .green{
            color: green;
            text-align: center;
        }
        .blue{
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2 class="green">Welcome to My Web Page</h2>
    <h3 class="green">About Me</h3>
    <p class="blue">My name is <span style="color: red; font-weight: bold;">Brijraj Rastogi</span>.</p>
    <p class="blue">I live in <span style="color: red; font-weight: bold;">Navi Mumbai</span>.</p>
    <p class="blue">I'm currently learning <span style="color: red; font-weight: bold;">CSS</span>.</p>
</body>


  1. Universal Selector:
    • The "universal" selector gives style to all the HTML elements present in that HTML document.
    • It affects the look of all the elements of an HTML page at once.
    • We use the asterisk(*) character which selects all the HTML element followed by style rules inside curly braces.
    • For example:
<head>
    <title>Universal Selector in CSS</title>
    <style>
        *{
            color: burlywood;
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>Welcome to My Web Page</h2>
    <h2>About Me</h2>
    <p>My name is <span style="color: red; font-weight: bold;">Brijraj Rastogi</span>.</p>
    <p>I live in <span style="color: red; font-weight: bold;">Navi Mumbai</span>.</p>
    <p>I'm currently learning <span style="color: red; font-weight: bold;">CSS</span>.</p>
</body>



  1. Grouping Selector:
    • The "grouping" selector is used when we want to give same style to different elements.
    • We just need to write the name of the element followed by a comma(,) and then another element name.
    • It is useful as it reduces development time and can be achieved in less code as we write all the element names in a single line followed by commas.
    • For example:
<head>
    <title>CSS Grouping Selector</title>
    <style>
        h1, h2, p{
            color: blueviolet;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <h2>About Me</h2>
    <p>My name is <span style="color: red; font-weight: bold;">Brijraj Rastogi</span>.</p>
    <p>I live in <span style="color: red; font-weight: bold;">Navi Mumbai</span>.</p>
    <p>I'm currently learning <span style="color: red; font-weight: bold;">CSS</span>.</p>
</body>


Get the full code for each type of selector below:

You can check all the blogs of this challenge below.
All Links:


Labels:
Location: India

Comments

Post a Comment

If you have any doubts, Please let me know.