Beyond the Basics: CSS Selectors Unleashed

Faessal Sufi — Thu, 30 Nov 2023 16:56:30 +0000

Do you know that selectors are the most important part of CSS?

When we talk about CSS, most people will say or think that we know that yes, of course you know, but there is a catch: knowing the styling of HTML content is not only CSS. Let me explain. You might know how to style a webpage, and that's great, but when it comes to professionalism or advanced things, CSS selectors come into play. If you know how to select that particular element, then you can definitely do something out of the box.

Types of selectors:

There are many types of selectors, but we will cover the most popular and widely used in industry. So let's get started!

1. Universal selector

As its name suggests, "universal" means it will select all the elements on a webpage and apply CSS to all of them. It is also widely used in industries.
Syntax:

*{
styling 
}

example:
This will remove the default padding and margin from the whole webpage.

*{
padding:0px;
margin:0px;
}

2. Element Selector

We are all familiar with HTML tags, right? When we need to select an element, or we can say an HTML tag, we use the element selector. It can be any element of HTML, but if we select an element, it will apply to all elements present on the page. Suppose we select a <p> tag and apply some CSS to it, then it will be applied to all the <p> tags in the code.
Syntax:

element{
   styling
}

Example:

h1 {
  color: #1a047d;
  background-color: #949494;

}

One more thing: always write the colour in hex code format so that the website will look the same in every browser.

3. Class selector

We'll be using the class selector most of the time to select the class and play with it. To select a class in CSS, we have to use . before a class name, and it is good practice to reuse the classes in HTML to avoid repeating code.

Syntax:

.class_name{
Your CSS
}

Example:
btn is the name of the class

.btn{
  color: #eae8f1;
  background-color: #f38b8b;
}

4. ID selector

There are some times we are only required to style a unique element in these types if case ID comes into the picture. It allows us to style and select the element using ID, and we have to use # before mentioning ID.

Syntax:

#ID_name{
styling
}

Example:
school is the name of the ID

#school{
  margin: 0;
  padding: 0;
}

5. AND selector or chained selector

This selector is interesting. Supposing somebody said, "I want a cup of coffee and bread," what would you give him? Both right? same in this case of the AND selector, it will select the element only if it satisfies all the conditions. Let's understand with an example.
This is a code snippet we'll be working on.

 <ul>
            <li class="text-orange">Home</li>
            <li class="text-blue sans-serif" id="bg-white">Services</li>
            <li class="text-orange" id="bg-black">About Us</li>
            <li>Contact Us</li>
 </ul>

In this case, suppose we have to target the 'li', which has the class text-orange and ID 'bg-black'. This condition will only satisfy if a li has a class named text-orange and an ID named bg-black.

Syntax:

.class1.class2{
styling
}

Example:

li.text-orange#bg-black {
  background-color: #cbf8cb;
  color: #0000ff;
}

Output:

6. Combined selector

When we have to target more than one element, we use the grouping selector. We can use it to select multiple elements, like two or more classes, IDs, elements, or a mixture of those. Let us understand it by example.
Syntax:

class_name, ID_name, element{
styling
}

Example:

.text-orange,
#bg-black,
h2 {
  color: #720000;
  background-color: antiquewhite;
}

Output:

7.Inside an element selector

Sometimes there might be a scenario where you have to target a specific element that is inside another element. In this case, we use the inside element selector. It's very simple; we just have to put space between those elements.

Syntax:

element1 element2 element3{

}

Example:

nav ul li {
  color: blueviolet;
  background-color: #4f3636;
}

In this case it will search for a nav and then ul and finally li
Output:

8. Direct child selector

This is useful to select the direct child element. Let me explain: suppose we have to select a particular element that is inside some elements. In this case, we use the direct child selector. Let us understand it with the help of an example.

Syntax:

element1 >element2 >element3{

}

Example:

div > span {
  color: #ffff00;
  background-color: #fe8223;
}

Output:

9.Siblings

There are two types of siblings: direct siblings and adjacent siblings. We can target direct siblings with + and adjacent siblings with ~.

Syntax:

element1 + element2{
styling
}

Example:

h3 + p {
  color: #fe8223;
  background-color: #4f3636;
}

Output:

Adjacent sibling Syntax:

element1 ~ element2{
styling
}

Example:

h3 ~ li {
  color: #27fe23;
  background-color: #201f1f;
}

Pseudo-elements

Some people find the pseudo element a little tricky, but no worries, I'm here to help you out. There are many pseudo-elements, but as of now, we'll cover only ::before and ::after pseudo elements.Let me explain that a pseudo-element is a keyword that is added to a selector and lets you style a specific part of the selected element.

::Before keyword

Syntax:

selector::pseudo-element {
  property: value;
}

Example:
When we use ::before It will add the style before the selected element. In this case, we have added "🔗"before the <a> tag.

a::before {
  content: "🔗";
  display: inline-block;
}

Output:

::After keyword

If we use ::after It will add the style after the selected element. In this case, we have added "🔗"after the <a> tag.

a::after{
  content: "🔗";
  display: inline-block;
}

Output:

Easy peasy, right? That's for today. I'll catch you in the next article with some interesting topics.

HTML Essentials: Unveiling the Basics of Structure and Key Tags

Faessal Sufi — Tue, 14 Nov 2023 20:33:15 +0000

What is a web server?

A web server is not always a big rack; it can be software as well as hardware. It stores all the files that are required to view a web page on a browser.
The most popular web server is Apache, which serves 67% of the total websites all around the world. It is a software-based web server.
The reason a web server exists is to serve us the web page we want. Let's support you. You have to visit the Google website now. What will you do? You will open the browser and type www.google.com. Correct? So in this case, you typed the URL and requested the server for a web page, which is Google, and your request is sent via HTTP (Hyper Text Transfer Protocol), and then the server checks or searches the URL in the system; it will send you the response and serve the web page to you.

What is Apache?

Apache is one of the most powerful web server softwares till now, and the reason developers like it is that it is open source, highly customised, and gives so much freedom to a developer. That's the reason 67% of the world's websites are served by Apache.

What is a live server?

I can bet! When you started your coding journey and watched a YouTube tutorial, they just told you to go and install the extension called Live Server, and you're ready to go. It will automatically refresh the page, but have you ever thought How is it happening? Why?
When we open a webpage without any live server, the current state of the web page is loaded into memory, and it gets served to you. If you make any changes later on, it will not show directly because the old state is being served to you and the browser is not aware that the file has been changed. If we refresh the page, then we can see the changes. To automate this task, live servers are made. It is nothing but a piece of code that tracks the file, and if any changes are made to the file, it will refresh the page. It is all done by a script that is embedded in your code while serving you. This is how a live server actually works.

What is HTML?

HTML stands for hypertext markup language. It is used to make the structure of a webpage. Most people ignore the learning part of HTML because they think we know that.
But there is a catch: if you want to rank your website on Google, you must know the basics and fundamentals of HTML, which help a lot to rank a website, so that the Google algorithm can know what you are actually serving on your webpage. In this way, you can optimise your website.

HTML's basic structure You might know that using the emmet abbreviation, we can generate the boilerplate of HTML using "!" and Tab/Enter.

Some HTML tags: We have a heading tag to showcase the heading for a webpage, and we can have a total of 6 levels of headings from h1 to h6. H1 is the biggest heading, and H6 is the smallest heading.

We also have the <p></p> tag to write the paragraph or long text. Every p tag takes its own line; it is mostly used to write long text on a website.
Let's talk about an important tag, which is the <img src="" alt=""> tag. Which takes two parameters? One is required, which is source or src, and the other is alt. The purpose of using alt is that if our image fails to load, then the value in alt will be displayed on the screen so that the user can understand that the picture belongs to nature, space, etc.
We also have a size attribute to adjust the size of the image with the source set to show more than one image. Its tag looks something like this: "<img src="" alt="" sizes="" srcset="">" We can give one or more source strings separated by commas to give multiple values.

DEV Community: Faessal Sufi

Beyond the Basics: CSS Selectors Unleashed

Do you know that selectors are the most important part of CSS?

Types of selectors:

1. Universal selector

2. Element Selector

3. Class selector

4. ID selector

5. AND selector or chained selector

6. Combined selector

7.Inside an element selector

8. Direct child selector

9.Siblings

Pseudo-elements

::Before keyword

::After keyword

HTML Essentials: Unveiling the Basics of Structure and Key Tags

What is a web server?

What is Apache?

What is a live server?

What is HTML?