DEV Community: Smruti Ranjan Nayak

CSS: Everything you need to know about targeting elements

Smruti Ranjan Nayak — Sun, 13 Nov 2022 09:28:08 +0000

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 )

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.

Output :

Using CSS :

Output :

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.

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

Internal CSS file :

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

Inline Style :

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

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;
}

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;
}

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>

Before CSS :

After CSS :

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>

Output :

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;
}

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>

Output:

Thank you very much for reading.
Sm8uti

Introduction to WEB and HTML

Smruti Ranjan Nayak — Sun, 06 Nov 2022 07:08:55 +0000

What is Web Server?

Web servers are an important part of a website and it is important to understand how a web server works on the internet or the World wide web. A website doesn't just depend on the coding or content part it depends on how the website performs on the internet and how much it is efficient so we need a good web server.

A website is a collection of web pages while a web server is software that responds to the request for web resources.

A web server is a computer where web content is stored and also the content is served on the internet. that's why a user visits your website and sees your all content over the world because of a web server.

Nowadays worldwide most famous & widely used web server is Apache 2 and other web servers are Nginx, Lighttpd, etc.

The biggest advantage of using this server is supports all operating systems ( Windows, Mac, and Linux, etc. ) and most websites ( around 70% ) are using Apache for hosting their content. Apache is open-source which means it is available for free, and can easily be accessed through online communities. a lot of online support is available in case you are stuck in a problem or error.

How does it be Works?

The web server responds to the client's request in two ways one is sending the file to the client associated with the requested URL ( Uniform Resource Locator ) and the second ways generating a response by invoking a script and communicating with the server.

URL is an acronym for Uniform Resource Locator and is a reference (an address) to a resource on the Internet

Example of URL : http://example.com

where the http is protocol identifier and the example.com is resource address.

When you type a URL into a browser that means the client sends a request for a web page, the web server searches for the requested page if it exists or is found then it will send it to the client with an HTTP ( Hypertext Transfer Protocol ) response. and if the requested web page is not found or does not exist web server sends an HTTP response ( 404 not found )

What is HTML ?

Basically, HTML is the main part of a web page. its full form is Hypertext Markup Language. and you can also imagine HTML is a bone of a web page because you use it to structure your web page.

The origin of the HTML language dates back to the physicist Tim Berners-Lee, its creator, a worker at CERN (European Organization for Nuclear Research) who at the end of 1989 proposed the HTML language together with the HTTP protocol, whose objective was to create a means to be able to share information between physicists of the time who worked all over the world.

The first version of HTML was released in 1991 ( HTML 1 ) .

HTML 2 - Released in 1995
HTML 3 - Released in 1997
HTML 4 - Released in 1999
HTML 5 - Released in 2014

HTML 5 is the latest version and this version includes many outstanding features.

Basic structure of HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>SM8UTI</title>
  </head>
  <body>
   <h1>Smruti Ranjan Nayak</h1>
   <p>SM8UTI</p>
  </body>
</html>

in the above html code the <!DOCTYPE html> declaration defines that this document is an HTML document or file. the html, head, title, body these are called elements or tags. <html> is the root element. <head>, this element contains meta information, title, and links etc. and <body>, this element contains the body part of web page or content part.

The two most used extensions of HTML documents are .html and .htm.

Thank you very much for reading.
Sm8uti