TheLazy.Dev
Portfolio GitHub

Blog

webdev |iwritecode |sm8uti |css

CSS: Everything you need to know about targeting elements

sm8uti

Smruti Ranjan Nayak

Posted on November 13, 2022

CSS: Everything you need to know about targeting elements

In the front-end development journey the 3 things that are important. HTML, CSS, and javascript. in this article, we will cover the basics of CSS and how it works on a web page, and why it is an important thing in a website.

What is CSS?

CSS: Cascading Style Sheets

CSS is a language for styling a website and it helps to change the appearance of the website and made stunning looks for a web page. Frankly saying that the CSS is only used for targeting elements or tags and changing the look of a website or webpage

CSS is a style sheet language that is used to describe the look and formatting of a document written in a markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML document including plain XML, SVG, and XUL. ( Source : Javapoint )

html&css.png

How CSS works?

The better way you understand how it works, I will give you an example :

First, we create an HTML file and open the file in VS Code, you will use different IDE like Sublime Text, Atom, etc. then we write an element in a file, select the element using CSS and change some appearance like background color, etc.

code.png

Output :

screenshot-127.0.0.1_5500-2022.11.13-13_14_27.png

Using CSS :

code.png

Output :

screenshot-127.0.0.1_5500-2022.11.13-13_36_36.png

Once you have loaded and parsed the HTML content and CSS styling. First, the web browser converts them into the DOM ( Document Object Model ).once the DOM combines the content and style of the web document and is a representation of the web document within the memory of the computer, the browser will display the content.

Frame 3 (1).png

we can add the CSS file in 3 different ways:

  • External CSS file :

    In the External CSS file, we can create a CSS file and then link the CSS file to an HTML file. this method we use in real-life projects or the programming world.

CSS File extension is .css

code.png

  • Internal CSS file :

In this method, we can write CSS code inside the HTML page or document using <style> tag.

code.png

  • Inline Style :

In this method, we can write CSS rules or styles directly inside an HTML element using style attributes.

code.png

CSS Selector :

Selectors are just used to select elements or tags on the web page or web document. in the above example, we select the h1 tag and use some styling.

h1{
  background-color:blue;
}
Enter fullscreen mode Exit fullscreen mode

Here h1 is the Element selector.

In CSS, We use different CSS selectors they are :

Universal Selector :

This selector is used for styling all the elements present in an HTML Document.
* is a Universal Selector.

CSS universal selectors select any type of element in an HTML page.

*{
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iwritecode</title>
    <style>
             *{
                  background-color: blueviolet;
              }
    </style>
</head>
<body>
    <h1>Hello Smruti Ranjan Nayak,</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde eligendi praesentium id officiis quam saepe?</p>
    <h2>I am a</h2>
    <ul>
        <li>Lorem, ipsum.</li>
        <li>Lorem ipsum dolor sit.</li>
        <li>Lorem, ipsum dolor.</li>
        <li>Lorem, ipsum.</li>
    </ul>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Before CSS :

screenshot-127.0.0.1_5500-2022.11.13-14_27_23.png

After CSS :

screenshot-127.0.0.1_5500-2022.11.13-14_28_59.png

Individual or Element selector :

In this selector, we select a specific element on a web page that we want to style.

in an HTML file, we select only the h1 tag and if we change the color from black to green then inside a web page all h1 tags changed color from black to green.

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iwritecode</title>
    <style>
        h1{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <h1>Hello Smruti Ranjan Nayak,</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde eligendi praesentium id officiis quam saepe?</p>
    <h2>I am a</h2>
    <ul>
        <li>Lorem, ipsum.</li>
        <li>Lorem ipsum dolor sit.</li>
        <li>Lorem, ipsum dolor.</li>
        <li>Lorem, ipsum.</li>
    </ul>
    <h1>I am from,</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde eligendi praesentium id officiis quam saepe?</p>
</body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Output :

screenshot-127.0.0.1_5500-2022.11.13-14_40_11.png

Class and ID selector :

These selectors are used to select the content we want to style.ID and Class both are CSS element selectors and are used to identify an element based on its assigned name. CSS id and class selectors are the most used selectors in CSS.

We can apply a class to various elements so that it could be numerous times on a single page. The class is assigned to an element and its name starts with . followed by the name of the class.

The Id is unique on a page, and we can only apply it to one specific element. The name of the Id starts with the # symbol followed by a unique id name.

#idName{
  color:blue;
}

.className{
  color:green;
}
Enter fullscreen mode Exit fullscreen mode

Example :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iwritecode</title>
    <style>
        .heading {
            background-color: blueviolet;
        }

        #green {
            color: green;
        }
    </style>
</head>

<body>
    <h1 class="heading">Hello Smruti Ranjan Nayak,</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum
        maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et
        odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde
        eligendi praesentium id officiis quam saepe?</p>
    <h2>I am a</h2>
    <ul>
        <li>Lorem, ipsum.</li>
        <li>Lorem ipsum dolor sit.</li>
        <li>Lorem, ipsum dolor.</li>
        <li>Lorem, ipsum.</li>
    </ul>
    <h1 id="green">I am from,</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos eligendi ratione odit similique nostrum
        maiores dolor quas! Ipsum reiciendis soluta assumenda nesciunt dolores maiores amet pariatur ullam, culpa et
        odit molestiae aliquam! Molestiae optio voluptates quo? Nemo fugiat repellat eos vel necessitatibus, sequi, unde
        eligendi praesentium id officiis quam saepe?</p>
</body>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Output:

screenshot-127.0.0.1_5500-2022.11.13-14_49_29.png

Thank you very much for reading.
Sm8uti

💖 💪 🙅 🚩
sm8uti
Smruti Ranjan Nayak

Posted on November 13, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

CSS: Everything you need to know about targeting elements
webdev CSS: Everything you need to know about targeting elements

November 13, 2022