DEV Community: Shahin Alam

🚀Five Essential CSS Selectors

Shahin Alam — Tue, 11 Mar 2025 10:40:18 +0000

🚀Five Essential CSS Selectors Every Developer Should Know

CSS is the backbone of web design, transforming plain HTML into visually engaging experiences. At the heart of CSS are selectors—tools that allow developers to target specific elements on a webpage for styling. Here are five of the most important CSS selectors that every developer should know, along with their purpose, use cases, and practical examples.

1️⃣ Element Selector (Type Selector)

The Element Selector targets all instances of a specific HTML tag. It's the simplest and most foundational selector, making it an essential
starting point for applying broad styles.

Syntax: element

{ property: value; }

Use Case: Ideal for setting default styles across all occurrences of an element type, such as paragraphs, headings, or links.
Example:

p {   font-size: 16px;   color: #333; }

This styles all
elements with a 16-pixel font size and a dark gray color.
Why It’s Important: The Element Selector provides a quick way to establish a consistent baseline for your site’s typography or layout. Its low specificity means it’s easily overridden by more targeted selectors when needed, offering flexibility in larger projects.

2️⃣ Class Selector

The Class Selector targets elements with a specific class attribute, allowing developers to apply styles to multiple, unrelated elements across a page.

Syntax: .class-name

{ property: value; }

Use Case: Perfect for reusable styles, such as buttons, alerts, or text highlights, where consistency is key.
Example:

.btn {   background-color: #007bff;   color: white;   padding: 10px 20px; }

This applies a blue background and white text to any element with class="btn", like

<button class="btn">Click Me</button>.

Why It’s Important: With a balance between broad applicability and targeted control, the Class Selector reduces code duplication, making it indispensable for maintainable stylesheets.

3️⃣ ID Selector

The ID Selector targets a single, unique element on a page based on its ID attribute, offering pinpoint precision for styling.

Syntax:

#id-name { property: value; }

Use Case: Best for styling one-of-a-kind elements, such as a header, footer, or a specific section like a hero banner.

- Example:

#main-title {   font-size: 32px;   text-align: center; }

This styles the element with id="main-title", such as

<h1 id="main-title">Welcome</h1>

Why It’s Important: With a high specificity, the ID Selector ensures styles apply only to the intended element, making it a go-to for unique design tweaks. However, its uniqueness requirement limits its scalability compared to classes.

4️⃣ Universal Selector

The Universal Selector targets every element on a page, providing a powerful way to apply global styles or reset defaults.

Syntax:

* { property: value; }

Use Case: Useful for applying site-wide styles, such as removing default margins and padding, or setting a universal font family.

Example:

css

{ margin: 0; padding: 0; box-sizing: border-box; }

This resets margins and padding for all elements and enforces a consistent box-sizing model.

Why It’s Important: With a low specificity, the Universal Selector is a blunt but effective tool for establishing a clean slate. It’s often used in CSS resets or to enforce global rules, though overuse can lead to performance concerns on large pages.

5️⃣ Pseudo-class Selector

The Pseudo-class Selector targets elements based on their state or position, adding interactivity and dynamism to web designs.

Syntax: element:pseudo-class { property: value; }
Use Case: Essential for styling user interactions (e.g., hover effects) or specific element states (e.g., first child in a list).
Example:

a:hover {   color: #ff4500;   text-decoration: underline; }

This changes the color of links to orange-red and adds an underline when users hover over them, like

<a href="#">Link</a>.

Why It’s Important: Pseudo-classes enhance user experience by providing visual feedback and targeting elements contextually. Their specificity matches the base selector, making them versatile for both simple and complex designs.

🎯 Why These Five Matter
These five selectors provide a strong foundation for CSS:

✅ Element Selector → For broad styling
✅ Class Selector → For reusable styles
✅ ID Selector → For unique elements
✅ Universal Selector → For global styles
✅ Pseudo-class Selector → For interactivity

🔹 For Beginners: These are easy to learn and cover most basic styling needs.
🔹 For Pros: They combine well for powerful, scalable designs.

⚡ Practical Tips
✅ Combine Selectors: Use .btn:hover or #main-title span for precision.
✅ Mind Specificity: Higher-specificity selectors override lower ones.
✅ Optimize Performance: Avoid overusing * (Universal Selector) on large projects.

Conclusion

Mastering CSS selectors is a gateway to effective web styling, and these five—Element, Class, ID, Universal, and Pseudo-class—are among the most important to know. They empower developers to craft everything from basic layouts to interactive interfaces with efficiency and flair. As you build your next project, experiment with these selectors, and watch your designs come to life with precision and personality.

Get_cli Unhandled exception on flutter project.

Shahin Alam — Sat, 16 Mar 2024 13:48:19 +0000

In this blog post, we will explore how to create a Flutter project using get_cli and discuss a temporary solution for a specific issue that you might encounter during the process.

Introducing get_cli
get_cli is a powerful command-line interface (CLI) tool for Flutter that enhances your development workflow by automating repetitive tasks. With get_cli, you can quickly generate code and project structures, saving you valuable time and effort.

Creating a Flutter Project with get_cli

To create a Flutter project using **get_cli**, follow these simple steps:

Step 1:

Ensure that you have Flutter and Dart installed on your system. If not, you can install them by referring to the official Flutter installation guide.

Step 2:

Open your terminal or command prompt.

Step 3:

Activate get_cli by running the following command:



flutter pub global activate get_cli

Step 4:

Generate a new Flutter project by running the following command:



get create project

By default, this command will create a project in the current directory with a name matching the folder's name. If you prefer a different project name, you can use the following command:



get create project:my_project

Replace my_project with your desired project name.

Step 5:

Wait for the project creation process to complete. Once finished, you will have a new Flutter project set up with the chosen structure.

Now that you have created a Flutter project using get_cli, you can dive right into developing your app using the generated code and project structure.

Temporary Solution for a Specific Issue

While creating your Flutter project, you may encounter a situation where the --enable_deprecated_wait_for flag does not work on your OS installation. This flag is typically used to enable the deprecated wait For function in the dart:cli library.

As a temporary solution, you can attempt the following command to activate get_cli from a specific GitHub source:



flutter pub global activate --source=git https://github.com/inyong1/get_cli.git

By executing this command, you can activate get_cli from the specified GitHub source, allowing you to utilize it with the deprecated wait For function. However, it's important to note that this solution is temporary and may not be applicable in all scenarios.

Keep in mind that both the --enable_deprecated_wait_for flag and the temporary solution mentioned above should be used cautiously since the wait For function is deprecated and will eventually be completely removed.

Customize your terminal using oh-my-posh theme

Shahin Alam — Sat, 01 May 2021 10:45:55 +0000

Hey developers,

Today I will show you how you can customize your windows terminal with your test like this. Or you can add your own theme. Trust me, and it’s super easy anyone can do. You need to know simple codding knowledge, and you are good to go. If you face any problem, write it down in the comment section. I will try to solve your problem.

In this tutorial, I am trying to make it as simple as I can. I will explain every detail you need to know when you are making your terminal theme.

Without wasting your valuable time, let’s jump to the tutorial.

Follow those simple steps.

               Set up Powerline in PowerShell

Step 1: Install the windows terminal by using this link.
https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab

Step 2: Install a Powerline font
https://www.nerdfonts.com/font-downloads
Using this link, you will find the font named FiraMono Nerd Font. Download and install it on your system.

Step 3: Now, you need to install Install Git for Windows by using this link
https://git-scm.com/downloads

Step 4: Let’s set up Git
Open windows terminal and type (CTRL +, ) to open setting
You'll want to append one of the profiles options below (depending on what version of git you have installed) to the "list": portion of the settings.json file

Profile options

Uncomment correct paths for command line and icon if you are using:

*Git for Windows in %PROGRAMFILES%
*Git for Windows in %USERPROFILE%
*If you're using scoop

Or you can use my setting.json file just copy and paste
https://git.io/J3nNy.

If you like the ( Learn with Sumit) terminal, then paste this code without making any changes.

Step 5: install oh my posh on windows terminal

https://ohmyposh.dev/
Using your windows terminal, install Posh-Git and Oh-My-Posh:


 posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser

If you are using PowerShell Core, install PSReadline:
 -Name PSReadLine -Scope CurrentUser -Force -SkipPublisherCheck
             Customize your PowerShell prompt
Using your windows terminal, import module Posh-Git and Oh-My-Posh:
 posh-git
Import-Module oh-my-posh
Set-PoshPrompt -Theme hotstick.minimal
Now paste one more command
 $profile

It will show you this ps1 file path.

"C:\Users\Shahi\OneDrive\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1"

Then paste another command


 $profile

It will open a notepad in this empty space. Paste the code below and save it
Import-Module posh-git
Import-Module oh-my-posh
Set-PoshPrompt -Theme hotstick.minimal

Step 6: setup windows terminal setting.json

Open windows terminal and type (CTRL +, ) to open setting
Change those setting

Step 7: customize windows terminal Theme JSON.

In this step, you need to copy-paste my customized theme.
Open terminal and run
Get-PoshThemes

Now you can see the list of all themes of oh-my-posh. We pick one theme named hotstick.minimal.omp.json

Paste the command to the terminal.
Set-PoshPrompt -Theme hotstick.minimal

Now let’s customize hotstick.minmal

https://git.io/J3cIq

Check the link and download the hotstick.minimal.omp.json
file:

Replace the hotstick.minimal json file on this file path

"C:\Program Files\WindowsPowerShell\Modules\oh-my-posh\3.134.0\themes\hotstick.minimal.omp.json"

https://www.buymeacoffee.com/shahinalamx

Learn Python In 7days Complete Guidelines Zero to Hero

Shahin Alam — Mon, 26 Apr 2021 17:08:47 +0000

Hey developers,
Today I’m giving you complete guidelines to become a junior of python.
Trust me, it’s super easy and very simple steps just follow my steps, and you become a junior developer of python. On the 7th day, we will build some awesome projects.

First of all, I need confirmation that you can spend 5--6 hours daily for 7days, you will become a Junior Python Developer.
If you are super lazy or do not have the patient to spend 5--6 hours daily, my suggestion to you, my friend, please ignore this.
Now let’s jump to day 1

Day-1: 4 basic concepts (5 hours)

=>Python Print() Function
=>Variable
=>Input
=>Conditionals

Day-2: 5 basic concepts (5 hours)

=>List
=>For Loop
=>While Loop
=>Function
=>Import Modules

Day-3: Simple coding problems (6 hours)

=>Swap Two Variables
=>Convert miles to kilometers
=>Reverse a string (Check palindrome)
=>Calculate simple interest
=>Calculate GCD
=>Find the largest number in a list
=>Check a number is a prime number or not
=>Merge two sorted Array
=>Sum of all digits in a number
=>Calculate age
=>Build a simple calculator
=>Number guessing game

Day-4: Data Structures (6 hours)

=>Stack (LIFO)
=>Queue (FIFO)
=>Dictionary
=>Tuples
=>Tree
=>Linked List

Day-5: Python OOP (6 hours)

**=>Object
=>Class
=>Method and constructor
=>OOP- Inheritance

IF you have more time to learn all about the oop of python then you can learn

=>OOP- Encapsulation
=>OOP- Abstraction
=>OOP- Polymorphism**

Day-6: Algorithm (... hours)

=>Search (Linear and Binary search)
=>Sort (Bubble sort, Selection Sort)
=>Recursive function (factorial, Fibonacci series)
=>Time Complexity (Linear, Quadratic, and Constant)

Day-7: Project (6 hours)

=>1.Build a web crawler
=>or a news aggregator
=>or a simple game using pygame

Remember one thing if your sincerity follows my steps, then on the 7th day, you become a Junior python developer.

Excellent web extension for developers

Shahin Alam — Sun, 25 Apr 2021 17:05:14 +0000

Hey developers,

Today I will share some excellent web extension which enhances your work faster as a new web developer. We likely already have a collection of favourite Chrome extensions you use daily. Extensions that make life simpler make you more productive or perform an imperative task better than a dedicated tool. This list may build on that collection.
In this list, I only add the google chrome extension if you are using Firefox or any other browser. Maybe you can't find those extensions. In my personal opinion, use google chrome.

1. Githunt

Githunt is useful if you spend a lot of time on GitHub looking for new projects to work on. Rather than depending on GitHub’s trending projects feed, this Chrome developer extension brings it to the fore by highlighting all trending projects in a new tab area in your browser. You can search for projects in different languages.

Size: 1.17MiB
User: 5,000+
Offered by: roadmap.sh

2. Fonts Ninja

Fonts Ninja is a very useful Chrome extension for developers who need to identify fonts used on web pages. It’s fast, effective and identifies individual fonts within a page in seconds. Just Navigate the cursor to the font, then a small popup window in the browser you can see the family, size, weight, and colour.

Size: 1.45MiB
User: 400,000+
Offered by: fonts.ninja

3.ColorPick Eyedropper

ColorPick Eyedropper is a very neat zoomed selector for web pages. It’s a useful Chrome developer extension because it can quickly identify any colour on any web page and zooms in, so you can even select a border 1px wide. While you may not use it every day, it’s an excellent tool to keep on hand.ColorPick Eyedropper is a very neat zoomed selector for web pages. It’s a valuable Chrome developer extension because it can quickly identify any colour on any web page and zooms in, so you can even select a border 1px wide. While you may not use it every day, it’s an excellent tool to keep on hand.

Size: 1.47MiB
User: 1,000,000+
Offered by: vidsbee.com

4. CSS Viewer

CSS Viewer is another simple but very effective Chrome extension for web developers. As its name implies, this addon shows you the CSS properties of a given page wherever you hover your mouse. A small popup window appears showing you the CSS data that makes up the element you’re pointing at.

Size: 1.47MiB
User: 1,000,000+
Offered by: vidsbee.com

5. Web Developer

Web Developer is a suite of tools contained within a single Chrome extension. While titled ‘Web Developer’, we think this tool is suitable for general devs, including a range of useful tools that any dev can use.
Once installed, Web Developer is accessible using the small cog icon in the toolbar. Once selected, you should see a small dropdown box appear with a range of options organized into tabs. Select a tab to access the tools within. A lot is going on here, but each tool is genuinely useful.

Size: 1.1MiB
User: 1,000,000+
Offered by: chrispederick.com

Access your code answers Faster. #Grepper

Shahin Alam — Sat, 24 Apr 2021 16:40:45 +0000

So, you're a Programmer. You code along. When you face a problem, you first do a google search right, but sometimes we can't find the proper solution or take so much time to find the right solution.
Glad we got DRY out the way. How many times will we hear that? Take this same analogy and shift it to a roadblock scenario. I recycle functions, methods, algorithms often in my application but find myself always puzzled when trying to implement the code. My google history can attest to it. Whether it is going to a stack overflow link, MDN link, React docs or a Medium post a colleague wrote on my struggle, it takes time away from coding the logic.

Here I introduce, Grepper. Grepper is a google chrome extension created to make programmers' life a bit easier when searching for code snippets. Once installed, when you google search a problem, “javascript loop through an object” in my example, Grepper will populate snippets of codes most related to your search. It will return two snippets with the option to view more before the listed websites.

Grepper answer will show up at the top, as you can see.
Grepper is new to our community and allows you to publish your own snippets so others might use them. For example, when I google “python merge two sorted arrays,” no code snippet appears but a box that allows me to input the code snippet.

You can also save code by clicking the right site of the grepper icon.

After successfully saving, if you refresh or search again, you can see your code snippet with the option to view your Grepper profile. Here, you can add/edit/delete your snippets as you please. You have the option to make your account private or public as well.

Now, Why you should use Grepper
=> Develop Faster
=> Learn & constantly improve your coding skills
=> Grow your Career
=> Innovate, Earn & Lead the way

Here is the link for more info on Grepper https://www.codegrepper.com/welcome.php