Override the CSS property in question

I have tackled numerous lines of pure CSS code, and I always knew where each property was coming from. However, the inline CSS works fine, but not the class/id. The doctype is correctly typed. Despite spending a significant amount of time researching, nothing has helped me solve this issue. You are my last hope.

The HTML:

    <div className='insideContainer'>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
      <div className='default'>hello</div>
    </div>

The CSS:

.insideContainer {
  width: 300px;
  height: 400px;
  border: 1px solid #888;
  overflow: scroll;
  margin: 0 auto;
}
.default {
  background-color: 'blue';
  width: 200px;
  height: 50px;
  margin: 5px;
  display: 'flex';
  justify-content: 'center';
  align-items: 'center';
  border: 1px solid #888;
}

The browser:

https://i.sstatic.net/XWuyU.png

https://i.sstatic.net/BEISI.png

Answer №1

It seems that the use of quotes around your styles is unnecessary.

background-color: 'blue';

You can simply modify it to:

background-color: blue;

Answer №2

It is recommended to use "class" instead of "className" and remove the quotation marks on CSS attributes.

.insideContainer {
  width: 300px;
  height: 400px;
  border: 1px solid #888;
  overflow: scroll;
  margin: 0 auto;
}
.default {
  background-color: blue;
  width: 200px;
  height: 50px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #888;
}
 <div class='insideContainer'>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>Jello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
      <div class='default'>hello</div>
    </div>

Answer №3

Upon the observation of the insightful @kind user, it has come to my attention that I mistakenly neglected to modify the background-color: 'blue' in the inline CSS code snippet. Instead, it should have been changed to background-color: blue, among a few other properties. Gratitude for pointing that out!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on creating and accessing a variable within a Jinja for loop

Whenever a link is clicked by the user, I would like Jinja to establish a variable known as {{ contact_clicked }} that holds the same value as {{ contact }}. I thought about using <a href="/?{% contact_clicked = contact %}">.....</a> ...

bespoke filter designed to conceal any negative figures

I am trying to implement a feature where a text box will display nothing if the ng-model contains a negative value. I want the ng-model to remain unchanged while ensuring that negative values are not displayed. I am looking for a custom filter to achieve t ...

seamless blending effect as the opacity transitions smoothly on an element with a applied filter

I've been working with a DIV that has a blur filter applied to it, and I'm attempting to smoothly "fade in" the DIV using CSS opacity (going from 0 to 1) with a one-second transition. However, even though the DIV does fade in, it's quite gli ...

Is there a way to retrieve an array within an object that is located in another array?

Can you show me how to access the sub_categories array within an array of inputs? const input = [{ "id": 3252, "title": "Payment", "sub_categories": [{ "id": 3252, "subtitle": "House", }], }] Here's an example output: cons ...

Combining Objects in an Array using JavaScript

Here is an array example: let array = [ { yearBirth : 1995, name : 'daniel', }, { yearBirth : 1995, name : 'avi', }, { yearBirth : 1993, name : 'john', }, { yearBirth : 1993, n ...

Tips on aligning text link to the right within li using CSS

I am looking to adjust the position of a text link that is currently aligned to the left inside an li element, by moving it slightly to the right. Is there a way to achieve this effect without changing the overall layout? Page link: CSS: #secondnav li ...

Encountered a problem when attempting to access an element on a PHP page using

My javascript code is supposed to retrieve information from a specific URL (song.php) which contains the name of a song. However, there seems to be an issue as the javascript is not extracting the required data. Below is the HTML element and javascript fo ...

Tips for consolidating multiple projects under one domain without incurring any additional costs

Good morning! In my quest to host multiple projects on a single domain, specifically xyz.com, I am faced with a dilemma. I have an outdated personal developer portfolio created with React, and a newer software built with Vue.js that I would like to use fo ...

Uncovering the specific file housing a CSS definition

I'm currently navigating a complex webpage with numerous CSS files that were not authored by me. I am struggling to identify a CSS style that seems elusive, as it is not located in the most obvious places (such as the CSS files) and I have no idea whe ...

Particle JS - Taking over the entire screen

I have incorporated Particle JS into the banner using the link provided. It should be confined within the banner, with a white background underneath displaying the header text "hello there." However, the Particle.JS effect is currently taking over the enti ...

What is the method for generating a light-emitting Object in React Three Fiber?

When using directional or point light, the light is generated from outside the object rather than within. For example, the Sun can be the light source for objects in the surrounding area. Please refer to the images below for a better understanding of the ...

Ways to add a string to an array as a labeled object in javascript?

Is there a way to manipulate the array in imageCollection to achieve the format of the array in carouselPhotos as shown below? export default class HomeScreen extends Component { state = { imageCollection: [ { name: "P ...

Create a hexagon shape using a Div element and start from one of its sides

Is there a way to create a Div with a background image that appears like a hexagon when viewed from one side? Check out this demo to see exactly what I'm looking for: Demo In the example/demo, the header is designed to look like a hexagon from its ...

Issue with state update in Markdown Editor using React and Next.js

"use client"; import { useState, useLayoutEffect } from "react"; import { useParams } from "next/navigation"; import React from "react"; import dynamic from "next/dynamic"; const SimpleMDE = dynamic(() =&g ...

Iterating through the sorted list in reverse order, retrieving the text of each list item

Is there a way to navigate through an ordered list, extract and return the text based on a scenario where the user clicks on an li element like Cat 1-2? The goal is to concatenate all parent li's text into either a string or an array. If an array is u ...

Using setInterval in React within an onChange event

I am facing a challenge where I need to set a setInterval inside an onChange event, which is typically done in componentDidMount. Currently, I have 2 dropdowns that filter data and then render a table. The dropdowns are controlled by their respective onCh ...

Vue's smooth scrolling in Nuxt.js was not defined due to an error with the Window

There seems to be an issue with adding vue smooth scroll to my nuxt.js project as I'm encountering the "window is not defined error". The steps I followed were: yarn add vue2-smooth-scroll Within the vue file, I included: import Vue from 'vue ...

The URL in React Router updates as expected, but when attempting to render a component using a button component link

I have encountered a situation similar to the one portrayed in this CodeSandBox example, where I am required to implement react routing within two distinct components. The issue that is perplexing me is that, when I navigate down to either the Profile or ...

What is the best method to achieve a width of 100% for an element (textarea) that has unspecified borders and padding, while also including the borders and padding

Native borders for input controls in various browsers often look more visually appealing compared to those set with CSS. However, the thickness of these native borders and padding can vary across different browsers, making it difficult to predict beforehan ...

By incorporating a selectable style in React Native, the dropdown picker can be elevated above all other views, rendering it unclickable

I am dealing with a specific dropdown view that I need to keep on top of all other views. This is how it currently appears. https://i.sstatic.net/lZMzP.jpg I attempted to set a style of "elevation: 1" which resolves the UI issue, but unfortunat ...