DEV Community: Saleh Mubashar

Learn how to take full control of select styling using CSS.

Saleh Mubashar — Sun, 02 Nov 2025 10:05:59 +0000

Saleh Mubashar

Nov 1 '25

HTML Selects Are Actually Styleable Now

#css #webdev #html #frontend

Comments 1

3 min read

HTML Selects Are Actually Styleable Now

Saleh Mubashar — Sat, 01 Nov 2025 11:43:19 +0000

The <select> element has historically been one of the most difficult HTML elements to style. For the longest time, OS defaults made elements nearly impossible to style, forcing developers to build custom dropdowns or rely on libraries. I’m sure most of you have tried appearance: none and the usual hacks to make it look right.

Chrome 135 changes this with new web-native styling that gives you complete control over <select> elements using just HTML and CSS.

Check out the full article here!

`appearance: base-select`

appearance: base-select is a new CSS property that converts the element to a customizable state and removes the OS styling. This can be applied to the select itself and the dropdown picker as well. However, you can’t style the picker without also applying it to the parent <select>:

select,
::picker(select) {
  appearance: base-select;
}

This property allows you to do a bunch of cool stuff:

Complete styling control over the select and picker. This includes the <selectedcontent> as well (the content of the selected option shown in the button).
Include rich content like an image or SVG in the <option> element. Previously, the browser would ignore these.
Style the drop-down arrow icon using ::picker-icon.
Conditionally style selected (checked) options and their respective checkmarks.

Let's discuss each of the above in more detail.

Styling the Components

The Select Button

Since the selection button is the main visible part, it is often the most styled. Once you apply appearance: base-select, it behaves like any other stylable element. You can add padding, borders, shadows, background colors, etc.

select {
  appearance: base-select;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 6px;
  padding: 0.5em 1em;
}

select:hover{
  background-color: #0078d7;
}

You can also style the content shown inside the button using the new <selectedcontent> element. This represents whatever’s currently selected (i.e. the content inside the select button).

selectedcontent {
  /* some styling */
}

The dropdown picker

The dropdown (or the picker) as a whole can be targeted by the ::picker(<element>) pseudo-elemenent.

::picker(select) {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

The picker behaves like a popover and is layered above all other content.

Note: This will only work if the has appearance: base-select;.

The picker icons

Using the ::picker-icon pseudo-element, you can style or completely replace the dropdown picker icon. You can combine this with the :open pseudo-class to only style the icon when the picker is open.

select::picker-icon {
  content: "▼";
  color: #666;
  margin-left: 0.5em;
}

select:open::picker-icon {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

Conditional styling

The selected or “checked” state can now be targeted directly using option:checked.

option:checked {
  background: #0078d7;
  color: white;
}

The ::checkmark pseudo-element targets the checkmark icon inside the currently selected option.

option::checkmark {
  content: "✔";
  color: white;
  font-size: 0.9em;
  margin-right: 0.5em;
}

Browser Compatibility

As of writing this, only Chromium-based browsers (starting with Google Chrome 135+ and similar versions of Microsoft Edge) fully support the new appearance: base-select workflow along with pseudo-elements like ::picker(select), ::picker-icon, and ::checkmark.

Thanks for reading!

Want to explore more modern CSS tricks? Check out @starting-style for easy entry transitions.

Learn how to take full control of select styling using CSS.

Saleh Mubashar — Fri, 31 Oct 2025 11:55:04 +0000

HTML Selects Are Actually Styleable Now

Saleh Mubashar ・ Oct 30

#webdev #css #html #frontend

Learn how to create entry effects with ease using @starting-style!

Saleh Mubashar — Thu, 30 Oct 2025 16:51:38 +0000

Saleh Mubashar

Jan 13 '25

Simplifying Entry Animations with @starting-style

#webdev #css #programming #beginners

Comments

3 min read

Everything you need to know about @starting-style!

Saleh Mubashar — Sat, 03 May 2025 02:23:56 +0000

Saleh Mubashar

Jan 13 '25

Simplifying Entry Animations with @starting-style

#webdev #css #programming #beginners

Comments

3 min read

Simplifying Entry Animations with @starting-style

Saleh Mubashar — Mon, 13 Jan 2025 09:06:03 +0000

Entry animations can be tricky—between handling DOM load times and animating from display: none, it's easy to get stuck. The @starting-style rule simplifies this by letting you explicitly set starting values for CSS properties when an element first loads, creating smoother transitions right from the get-go.

You can view the complete post with additional examples here.

The Basics

@starting-style defines the starting point for your CSS properties before the element is visible. Think of it as the "before" state. The "after" state gets defined in your usual CSS rules. Here's how it works:

element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

When the element first loads, @starting-style defines its initial state, opacity: 0 in this case. It then transitions to the default state (or an explicitly defined one) which is opacity: 1 here. These styles also apply when an element changes from display: none to a visible state, making them ideal for animating toggled elements as well.

Nesting

You can use @starting-style in two ways: either nest it inside an element's ruleset (no selector needed) or define it separately with a selector.

However, note: nesting @starting-style within a pseudo-element (like ::before or ::after) won’t work because the styles will apply to the main element itself, not the pseudo-element.

/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}

Pro Tip: The @starting-style at-rule and the "original rule" have the same specificity. To ensure that starting styles are applied correctly, always place the @starting-style at-rule after the "original rule."

Examples

A useful application of @starting-style is in creating entry effects or transitions on a webpage. For instance, fading in text on page load or animating popups and dialogs. A few of these are discussed below.

Animations from display: none

The main advantage of the @starting-style rule is the ability to create smooth entry transitions for elements that are initially hidden, especially when transitioning from display: none to a visible state. Without @starting-style, it would be difficult to transition from display: none, since there is no starting state from which to transition. @starting-style overcomes this limitation by defining an initial state for elements once they become visible.

A great way to visualize this is using the dialog element. The dialog's body switches between display: none and display: block as it is toggled. Normally, animating this transition would be impossible due to the display property change, but @starting-style makes it possible to animate the element's entry.

Fading and Sliding on Page Load

In the above code, @starting-style is used to set the "before" state for both elements. In the fade section, the opacity is set to 0, while in the slide section, the element is translated to the left.

Thanks for reading! You may have noticed the lack of discussion on exit effects—that's because they fall outside the scope of @starting-style, as the name suggests. For handling exit effects, you'll need to use transition-behavior, which is a separate topic for a future article.

Check out the complete post here.
Check out my Blog here.

Create a Dynamic Code Playground with SandPack + React!

Saleh Mubashar — Mon, 11 Nov 2024 06:17:31 +0000

In this article, we will explore SandPack, a popular playground framework by CodeSandbox, and discuss how you can use it to create a more dynamic and interactive environment for your users.

This article covers pretty much all of the basic things you need to know about SandPack. However, more advanced features such as hooks and custom components as well as cool customization options are discussed in detail on my blog.

Check out the detailed version of this article

What is SandPack

SandPack is a component toolkit for building live code editors for your blogs and technical docs. In this article, we will focus on sandpack-react rather than sandpack-client, which is a lightweight JavaScript bundler.

What makes SandPack stand out is the wide range of customization options available. Plus, it's really easy to get started with. The most useful features of sandpack-react include:

Pre-built templates for popular languages and frameworks
A larger number of pre-built themes for the editor as well as the option to create custom themes.
Support for all npm dependencies and major JavaScript frameworks.
Options to customize the UI and almost every aspect of the playground.
You can create a completely custom playground using the pre-build composable components.
Providers and custom hooks are available to create custom components.

Overview of The PlayGround

To get started with sandpack-react, run this npm or yarn command:

npm i @codesandbox/sandpack-react

or
yarn add @codesandbox/sandpack-react

Next, import the Sandpack playground and render it using the following code:

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return <Sandpack />
}

The <Sandpack /> component sets up an empty playground for you to jump right in. By default, the playground contains a basic React template. Let's look at basic props to customize the templates, themes, and more:

template: This property accepts a predefined list of templates. By default, vanilla is set.
files: This is a very useful property. You can create multiple files with custom code, similar to a regular folder structure. The files object contains a value (the relative file path) and the key (file content). The files in this object are then automatically shown in the tabs as well.
options: You can customize several features using the options object. You can view the full list here. Some of the most useful ones include:
- showLineNumbers: Toggle the visibility of line numbers.
- showTabs: Toggle the visibility of the tabs.
- classes: You can assign custom class names to existing template classes for further customization.
dependencies: The dependencies object can contain any NPM package needed by the app. The format and syntax are similar to those of a package.json file.
theme: You can chose a pre-built theme or assign a completely custom theme.

Customizing the PlayGround

Let's tweak the default playground to fit our style and create a fun example to play around with. Customizing the editor to match your site theme can make it blend seamlessly and not feel like a third-party embed. First, let's use the files prop to create a simple counter button. Besides the App.js file, we'll also create the App.css file.

Have a look at the example and code below:

In this example, a counter component is rendered in the playground. The files object contains the code for both App.js and App.css. We've chosen a theme from the pre-built list mentioned earlier, sourced from sandpack-themes, adding a touch of style. Line numbers have been set to true as well.

Additionally, you can easily customize the layout of the playground. This can be done by either applying custom classes or utilizing the pre-built options that SandPack provides. For instance, you can use custom classes like this:

<Sandpack
  theme={theme}
  template="react"
  options={{
    classes: {
      "sp-wrapper": "custom-wrapper",
      "sp-layout": "custom-layout",
      "sp-tab-button": "custom-tab",
    },
  }}
/>

You can then tweak the appearance and layout using CSS, giving you much more control over the visual design.

Another useful feature is the ability to switch between different layout modes. SandPack offers three modes: preview, tests, and console. The default mode is preview, while the tests mode provides a suite for running tests and the console mode renders a terminal/console component instead of a preview window. The console mode is useful for displaying outputs of server side logic. You can also switch the layout direction using the rtl (Right to left layout) option.

Customizing the Output

Besides the editor itself, the output display can be customized as well. For instance, you can choose to show or hide the console, change the layout, or even modify the appearance of the preview window. Pretty cool right!. Code editors often have heavily customized editing windows, but the actual output is not paid attention to as much.

The console displays all sorts of errors and console logs. Depending on the type of code snippet being showcased, you'd either want to show or hide the console. You can also toggle the visibility of the show console button. By default, the console is hidden. As with all the SandPack components, the styling can be individually modified using custom CSS classes.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showConsole: true,
    showConsoleButton: true,
  }}
/>;

Besides the console, the display window itself can be customized as well. For example, you can turn the navigator bar on or off with the showNavigator option and decide if you want the panels to be resizable with the resizablePanels option.

<Sandpack
  template="react"
  files={files}
  theme={nightOwl}
  options={{
    showLineNumbers: true,
    showNavigator: true,
    resizablePanels: true,
  }}
/>

The result will look somewhat like this:

Conclusion

Sandpack isn't just easy to use—it's also super customizable. This makes it a great choice for blogs, documentation, or any platform where live code editing adds value, while still allowing developers to customize it based on their sites.

You can check the detailed version of this article here

Thanks for reading!

3 Advanced Framer Motion Effects in React

Saleh Mubashar — Mon, 04 Mar 2024 03:47:31 +0000

Animations are a powerful tool to enhance user experience, and when it comes to creating animations in React, Framer Motion is a popular library of choice.
Previously, we looked at 5 simple animations that you can add to your site. In this post, we will have a look at 3 complex animations or effects that can be created using Framer Motion in React that will take your website to the next level.

Check out this post on my blog

1. Follow Mouse Effect

In this effect, a small element, such as a circle, follows the mouse as it moves. To achieve this effect, we first need to track the cursor's position every time it moves. We store the x and y values of the mouse position in a state variable. Then, we create an effect that runs a function on pointermove.

To get the mouse position relative to the object that will follow the mouse, we will add a ref to that element. In the pointermove function, we use the window's clientX and clientY properties as object parameters. Here's the effect in the code:



useEffect(() => {
  //  check if DOM element referenced by ref has been mounted
  if (ref.current) {
    const handlePointerMove = ({ clientX, clientY }) => {
      const element = ref.current;
      // calculate x and y coordinates
      const x = clientX - element.offsetLeft - element.offsetWidth / 2;
      const y = clientY - element.offsetTop - element.offsetHeight / 2;
      // update state
      setCoordinates({ x, y });
    };

    window.addEventListener("pointermove", handlePointerMove);
    return () => window.removeEventListener("pointermove", handlePointerMove);
  }
}, []);

Here, element refers to the DOM element currently referenced by the ref object (the circle that will follow the mouse in our case). The x and y coordinates are calculated by subtracting offsetLeft and offsetTop from the horizontal and vertical coordinates of the pointer's position on the screen (clientX and clientY). Finally, we subtract half of the width and height of the element from the values calculated above to ensure that the pointer is positioned at the center of the circle.

Next, we create the circle using a motion.div component, assigning it the ref object. The x and y values will be animated using values from the state and we will also add a spring transition to create a cool bounce effect.

The complete code and the demo can be seen below:

2. Draggable List

A common feature found in most lists such as to-do lists, saved item lists or simply custom tabs is the option to rearrange items through drag-and-drop functionality. Let's dive into how you can create draggable lists using Framer Motion in React.

For this effect, we will utilize the ReOrder.Group component available in Framer Motion. The list will be wrapped by this component or you can directly map out list items within this component. A few cool props that are available for the ReOrder.Group component:

as: Determine whether you want the list to be ordered or unordered.
axis: Specify the orientation of the list. For instance, vertical for to-do lists and horizontal for tabs.
values: The array of values utilized as the source.
onReorder(newOrder): This is a callback function that runs when items are dragged and reordered. Usually, the stateSetter function is passed if the list items are stored in a state array.

Furthermore, there are a few useful props for the Reorder.Item component. You can check them out in the official docs.

The basics are quite simple. To create a demo of a draggable list, the following code provides the basics:



export default function App() {
  const [listItems, setListItems] = useState(list);

  return (
    <Reorder.Group axis="y" onReorder={setListItems} values={listItems}>
      {listItems.map((el) => (
        <Reorder.Item key={el} value={el}>
          <span>{el}</span>
        </Reorder.Item>
      ))}
    </Reorder.Group>
  );
}

Here, we are mapping out a state array of list items. Each item is represented as a Reorder.Item within the Reorder.Group. The axis is vertical, while the default as prop is an unordered list. The demo can be seen below:

3. Parallax Effect

The parallax effect is a widely used technique used to create depth and dynamism by moving elements at different speeds as the user scrolls through a webpage. We can create this effect using only a couple of lines of code with Framer Motion. In our example, we will have some text over a full-screen image. The text will move at a different speed compared to the background.

To create this effect, we will first calculate the vertical scroll progress of the page relative to a reference point (the text in our case). Then we will utilise the useTransform hook and map this value onto a range of [-60, 60], which represents the maximum and minimum displacement of the text along the y-axis. This transformed value is then applied as the y property in the text's style, creating the desired parallax effect.



function App() {
  const textRef = useRef();
  const { scrollYProgress } = useScroll({ target: textRef });
  const y = useTransform(scrollYProgress, [0, 1], [-60, 60]);

  return (
    <div className="app">
      <motion.div className="text" ref={textRef} style={{ y: y, x: "-50%" }}>
        <h2>Hello, World!</h2>
        <p>Framer motion parallax effects are super cool!</p>
      </motion.div>
      <img
        src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_640.png"
        className="background-image"
      />
    </div>
  );
}

The scrollYProgress gives us a value from 0 to 1 depending on the percentage of the page scroll with reference to the textRef.
The demo can be seen below:

Thank you for reading

Check out this post on my blog too.

5 Cool Animations in React with Framer Motion

Saleh Mubashar — Wed, 25 Oct 2023 07:25:30 +0000

Animations are a powerful tool to enhance user experience, and when it comes to creating animations in React, Framer Motion is a popular library of choice.
In this blog post, we'll explore 5 cool animations you can create in React using Framer Motion.

Check out this post on my blog

Framer Motion is a versatile animation library for React, known for its simplicity and powerful animations. If you're looking for an alternative, you can explore React Spring, which I've covered in my article here.

Now, let's dive into five cool animations you can create in React using Framer Motion!

1. Button Tap Animation

This is a really simple yet fun effect to add to your buttons. It adds a fun touch to your buttons by scaling them when tapped. To add this, we can make use of the whileTap property. We can scale the button up or down within this property:



import { motion } from "framer-motion";

function App() {
  return (
    <motion.button
      whileTap={{ scale: 0.85 }}
    >
      Click me!
    </motion.button>
  );
}

export default App;

The demo is provided below:

2. Text Typing Animation

Text typing animations, created with Framer Motion, add a playful touch to engage users, useful for loading messages and chat simulations.
To achieve this effect, we will take a sentence we want to display and convert it into an array of words. Next, we will map this array out and add an animation and transition on the opacity, as well as a delay that creates the typing effect.



import "./styles.css";
import { motion } from "framer-motion";

function App() {
  const text = "Framer Motion is a really cool tool".split(" ");

  return (
    <div className="App">
      {text.map((el, i) => (
        <motion.span
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{
            duration: 0.25,
            delay: i / 10
          }}
          key={i}
        >
          {el}{" "}
        </motion.span>
      ))}
    </div>
  );
}

export default App;

The demo is provided below:

3. Stagger Animations

Stagger animations, as demonstrated in dropdowns and navigation menus, involve animating elements in a sequential manner, each appearing one after the other, with a subtle delay distinguishing their appearances. You can create much more complex effects using this method as opposed to the ones mentioned above.

In this example, we will animate in some menu items when a menu button is clicked. We will use the stagger function alongside motion and useAnimate. Learn more about useAnimate here.



import { useAnimate, stagger, motion } from "framer-motion";

Start by creating an array that holds the list of items to be displayed in the menu. To achieve this effect, the list items are initially mapped within a <ul> element. When the button is clicked, the <ul> is first made visible. Then, the list items will animate in a staggered fashion one by one.

We will utilize the useAnimate hook to generate the animations for both the <ul> and <li> elements. These animations will be triggered by a change in state, which can be toggled using the button.



import "./styles.css";
import { useState, useEffect } from "react";
import { useAnimate, stagger, motion } from "framer-motion";

export default function App() {
  const [open, setOpen] = useState(false);
  const [scope, animate] = useAnimate();
  const items = ["Item 1", "Item 2", "Item 3", "Item 4"];

  // the stagger effect
  const staggerList = stagger(0.1, { startDelay: 0.25 });

  // create the animations that will be applied
  // whenever the open state is toggled

  useEffect(() => {
    animate(
      "ul",
      {
        width: open ? 150 : 0,
        height: open ? 200 : 0,
        opacity: open ? 1 : 0
      },
      {
        type: "spring",
        bounce: 0,
        duration: 0.4
      }
    );
    animate(
      "li",
      open
        ? { opacity: 1, scale: 1, x: 0 }
        : { opacity: 0, scale: 0.3, x: -50 },
      {
        duration: 0.2,
        delay: open ? staggerList : 0
      }
    );
  }, [open]);

  return (
    <div className="App" ref={scope}>
      <motion.button onClick={() => setOpen(!open)} whileTap={{ scale: 0.95 }}>
        Menu
      </motion.button>
      <ul>
        {items.map((item, index) => (
          <motion.li key={index}>{item}</motion.li>
        ))}
      </ul>
    </div>
  );
}

The demo is provided below:

4. Count Animation

This effect is commonly used for displaying numbers and statistics and is often used in countdown timers.

To implement this effect, we'll utilize MotionValues to monitor the state and velocity of the values, and we'll employ the animate function to specify the animation duration.



import { motion, useMotionValue, animate } from "framer-motion";

We will pass it an initial state or value which will be 0. Then we will count up to 50. Keep in mind that you need to round the count to make sure no decimal points are shown. For this, useTransform will be used.



import "./styles.css";
import { motion, useMotionValue, useTransform, animate } from "framer-motion";
import { useEffect } from "react";

export default function App() {
  const count = useMotionValue(0);
  const rounded = useTransform(count, Math.round);

  useEffect(() => {
    const animation = animate(count, 50, { duration: 2 });

    return animation.stop;
  }, []);

  return <motion.h1>{rounded}</motion.h1>;
}

In the code above, animation.stop is being used to stop the animation when the component is unmounted. This ensures that the animation is terminated, and any resources associated with the animation are released.

5. Scroll Reveal Animations

Scroll reveal animations are a great way to make websites engaging and appealing to users. For instance, you can create effects like fading an element in or smoothly sliding it into view as it becomes visible on the screen.
To create this effect, we can use the whileInView and viewport props. Here's an example of how to use these props to achieve a scroll reveal effect:



<motion.div
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true }}
/>

We can add animations and effects within the initial and whileInView props. Variants can also be used for this purpose. In the example below, we are going to slide in some elements when they come into view:



import React from "react";
import { motion } from "framer-motion";

function Card({ text, index }) {
  return (
    <motion.div
      className="card"
      initial={{
        opacity: 0,
        // if odd index card,slide from right instead of left
        x: index % 2 === 0 ? 50 : -50
      }}
      whileInView={{
        opacity: 1,
        x: 0, // Slide in to its original position
        transition: {
          duration: 1 // Animation duration
        }
      }}
      viewport={{ once: true }}
    >
      <p className="card-text">{text}</p>
    </motion.div>
  );
}

export default Card;

You can set viewport={{ once: true }} to false if you want the effect to occur every time the element is scrolled into or out of view.

Thanks for reading!
Check out this post on my blog too!

Specificity in CSS Selectors

Saleh Mubashar — Mon, 02 Oct 2023 11:48:05 +0000

In this post we will discuss a key aspect of CSS selectors: Specificity and Priority. We will also look at a bunch of examples to understand the concept of Specificity.

Check out this post on my blog.

What is Specificity?

Specificity refers to the priority assigned to one selector over another. If an element has multiple selectors with different rules, the browser will use specificity to determine which set of rules are applied to the element.

For instance, an ID selector holds greater specificity compared to a class selector:



<p class="text" id="paragraph">Some text</p>



#paragraph {
  color: blue;
}

.text {
  color: red;
}

In the above example, the text will have the color blue because the ID selector takes precedence over the class selector.

The Specificity Rules

In general, the following order is followed by a browser when determining the priority given to a selector (from lowest to highest):

Type Selectors: These selectors have the lowest specificity and target all elements of a certain type (e.g., p, h1, h2).
Class Selectors: Selectors that target elements with a specific class (e.g., .btn, .logo).
ID Selectors: Selectors that target a single element with a specific ID (e.g., #paragraph, #alert).
Inline Styles: Styles defined directly on an HTML element using the style attribute have the highest specificity.

Note: Pseudo and attribute selectors have the same specificity as class selectors.

A Few Examples

Let's look at a couple of examples:

1 - Class vs Type Selectors



<p class="text">Some text</p>



p {
  color: blue;
}
.text {
  color: red;
}

The color of the text will be red because the class has greater priority than the type selector.

2 - Class/ID vs Inline Selectors



<p class="text" id="para">Some text</p>



p {
  color: blue;
}

.text {
  color: red;
}

#para {
  color: yellow;
}

The color of the text will be yellow because the ID has greater priority than both the class and type selector.

Some Exceptions

Apart from the above mentioned selectors, there a couple of exceptions. Let's look at these:

The !important Property

The !important property has the highest specificity and overrides all other declarations - even inline styles. There is no other rule that can override this. However, it's recommended to use !important sparingly to maintain code readability and avoid unexpected behaviour.
Let's look at the following example, where an inline style is overridden by a class with the !important property:



<p class="text" style="color: red">Some text</p>



.text {
  color: blue !important;
}

The color will be blue because of the !important property.

The * Selector

The * selector, often referred to as the universal selector or all selector, is used in CSS to select or apply a CSS style to all DOM elements on a webpage. This selector can be useful for setting default styles or applying global styles across an entire document.
However, this selector has the lowest specificity which can be advantageous because it allows you to customize individual elements on a webpage, even if there is a global style applied to them using the * selector.

Thanks for reading!
Check out this post on my blog as well!.

ClipBoard API in JavaScript

Saleh Mubashar — Thu, 24 Aug 2023 08:23:44 +0000

The Clipboard API in JavaScript allows you to read data from and write data to the system clipboard. This enables capabilities like copying text to the clipboard and pasting clipboard content into your web apps.

Check out this post on my Blog!

Copying Data to the Clipboard

The method navigator.clipboard.write() allows us to write data to the clipboard. The method returns a promise and takes 2 arguments:

The data to write (eg. string, text or DOM element/image)
The type of data. To copy plain text to the clipboard we can use the method above like this: ```javascript

navigator.clipboard.writeText('Sample text to save in clipboard!')
.then(() => {
console.log('Text copied!');
})
.catch(err => {
console.error(err.message);
});


## Reading Data from the Clipboard

The method `navigator.clipboard.read()` reads data from the clipboard and returns a promise. It takes one argument which is the type of data to read:

- "text/plain" for plain text
- "text/html" for HTML content
- "image/*" for image data

To read plain text from the clipboard, we can use the method above like this:
```javascript


navigator.clipboard.readText()
  .then(text => {
    console.log(text); 
  })
  .catch(err => {
    console.error(err);
});

Creating a Copy to Clipboard Button

Now let's create a practical example. You may have seen on many websites a button that let's you copy a code or some link. Let's see how we can build it. The HTML/CSS is simple and can be see in the codepen given below.
For the JavaScript, we will first get the paragraph or text element using document.getElementById. Next, we will create a function that will save the innerText of the text element in the clipboard when the button is clicked.

Thank you for Reading!
Check out this post on my Blog!

How to Add CSS to your HTML Pages

Saleh Mubashar — Wed, 28 Jun 2023 18:57:21 +0000

Read the full article here:

In this article, we'll discuss three methods to add or link CSS to an HTML document:

Inline styles
The style tag
External stylesheets

Inline Styles

Inline styles in HTML allow you to apply custom CSS styling rules directly to elements within an HTML document.
To apply inline styles, you need to add the style attribute to the HTML element you wish to style. The style attribute should contain one or more CSS property-value pairs enclosed within curly braces. Below is an example:



<h2 style="color: red; font-size: 24px;">Hello World</h2>

Style Tag

Another common way of adding CSS to your document is using the style tag. The Style tag in HTML allows you to define CSS rules directly inside an HTML document (usually the head of the markup). This method is common when working on single page website where there is less styling needed.



<!DOCTYPE html>
<html>
   <head>
      <title>Style Tag Example</title>
      <style>
         h1 {
            color: blue;
            font-size: 36px;
         }
      </style>
   </head>
   <body>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

One significant advantage of using the Style tag is that you can define specific styles for different media types. For example, you can define different styles for printing, screen, or mobile views.

External Stylesheets

An external stylesheet is a separate CSS file that is linked to an HTML document using the link tag. This file typically has a .css extension and contains the style rules for the entire website. Here's an example:



<!DOCTYPE html>
<html>
   <head>
      <title>External Stylesheet Example</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <h1>This is a Heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

In the example above, the link tag is used to point to style.css, which is a separate file that contains CSS rules for the website. However, keep in mind the inline styles have the highest priority so they will override the stylesheet.

Check out this post here.
Also, have a look at my blog.
Thanks!