Tips for implementing CSS on nested classes

   <main>
            <div class="first-scheme">
                <div class = "row">
                    <div class="col-sm-12">
                        <p>Hello World</p>
                        <button type="submit" formtarget="_blank" class="btn-sm">Read More</button>
                    </div>
                </div>
            </div>

i am trying to style the first-scheme using CSS

.first-scheme{
margin-top: 10px;
height: 250px;
width: 450px;
background:black;
color: white;

}

However, when I apply this CSS, there is no effect on the page

Answer №1

There are multiple possibilities for the issue you're facing, but based on the code snippet provided: have you included the body of the HTML within a tag or is this just a shortcut used for the purpose of this post (it's advisable to use the correct syntax as you would in an actual HTML document)? To my knowledge,

I hope this information proves helpful to you.

Answer №2

It appears that the solution is working properly: https://codepen.io/dieg02000/pen/ExWKjVr

I believe your issue may be related to not linking your style file correctly with your html file. You should consider adding the CSS code within the <style></style> tags in your html file. Other than that, everything seems fine.

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

Only half of the image is responsive to hover effects

Just starting out with coding and running into an issue... My social media icons are supposed to turn pink on hover using a second image, but for some reason it's only showing up on the bottom half. Any suggestions? CSS: a.twitter:hover { backgr ...

Reasons Child Components in React Native & Redux Are Not Re-rendered with Every State Update

Within my React Native and Redux setup, I have a <NavigationCardStack/> component serving as the root. Whenever the state is updated, the redux-logger correctly displays the new state. However, after a state change, the child component fails to log ...

Table within a table does not occupy full height within a table cell

I encountered an issue while nesting a table within a td element. The behavior differs between browsers: in Firefox, the nested table fills the entire cell from top to bottom, but in Edge and Chrome, it is centered within the td cell and does not occupy th ...

Inconsistency with Mobile Viewport Problem

Apologies for the chaos below, but I've spent quite some time attempting to fix this on my own. It's time to surrender and seek assistance! Here are some screenshots to illustrate the issue: The problem is that sometimes the webpage functions c ...

Angular has trouble displaying information across multiple HTML files

I have created an HTML file to display some data. The initial HTML file named disc-log.html looks like this: <div> <h2>Discs</h2> <jhi-alert></jhi-alert> <div class="container-fluid"> <div class=" ...

Ways to retrieve a specific item from a constantly changing knockout observableArray without employing a foreach loop

Why can I only access one property ('member_A') of an Element in an observableArray using an HTML <input>? I am attempting to add a new object of type abc() to the observableArray "list_of_abc" when the button "ADD To List of abc" is click ...

What is the reason for the 'scrollHeight' being considered 'undefined' in this particular scenario, and why did the iframe encounter an error when switching to the html-file?

This is my first time asking a question, so please forgive any mistakes... I am attempting to create a website using HTML, CSS, and JavaScript on my Raspberry Pi with Apache2. I have written a script for an automatic iframe height function based on the co ...

Using `ng-disabled` in AngularJS to check a function that utilizes `$http.get`

Seeking assistance on how to make my ng-disabled button trigger a controller function that makes an $http.get request. Below are the relevant code snippets: HTML Code: <a class="btn btn-warning" ng-click="upVote(item,me.email);" ng-disabled="votechec ...

A guide to adding images to dropdown options in Angular 6

I'm having trouble getting an icon or image to appear next to text in a dropdown menu. I'm currently working with Angular 6 and despite trying multiple solutions, I haven't been able to make it work. All I want is to display a flag next to ...

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

I am dealing with a CSS class named "myclass" that requires a z-index of 5 specifically for IE8. I have attempted to achieve this using the following methods: .myclass{ z-index: 5\9; } ---> Interestingly, this method applies from IE10 onwards a ...

Elevate a div above the rest when it is selected or dragged

I am facing an issue with draggable divs inside a parent container. Each div has a popup edit panel to modify its content. The problem arises when the divs overlap, causing the edit panel to get hidden behind another div. I want to ensure that whenever a d ...

What causes the disappearance of the figure under slider control?

One of the functionalities I am working on involves using three.js to dynamically adjust the rotation speed of a cube by utilizing a slider control. After setting up the scene, camera, and cube, the JavaScript code that controls the rotation speed looks li ...

How does altering the flex direction impact the height of the child elements?

I am currently attempting to create a media query using Flexbox in order to display an input element below another one instead of side by side. However, the issue I am facing is that when I set the flex-direction to column, the width of the input is not as ...

Scraping a website where the page source doesn't match what is displayed on the browser

Imagine I'm interested in extracting marathon running time data from a specific website: Upon inspecting the webpage using Google Chrome, I noticed that the desired data is not directly visible in the page source. Although I have successfully scraped ...

I have a slight confusion when it comes to using HTML frames

Currently, I am in the process of creating a static webpage for an online bookshop. The layout is divided into three frames: top left, and right, each serving a specific purpose. The top frame contains the title, the left frame displays all available boo ...

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

Issue with Bootstrap carousel control not switching back to the previous slide

Interestingly, the carousel is functioning for sliding to the next slide but not for going back to the previous one. I'm still getting the hang of jsfiddle, as you can see, highlighting works for the next slide but not for the previous. Check out the ...

Place an overlay element in the top-left corner of a perfectly centered image

Currently, there is an image that is centered on the screen using flexbox: .center-flex { display: flex; justify-content: center; } <div class="center-flex"> <img id="revealImage"> </div> An attempt is be ...

Attempting to create a button cluster using Bootstrap and AngularJS for the purpose of navigating to various URLs

Looking to create a pair of buttons using bootstrap and angularjs that will redirect to different URLs when clicked. Here is the relevant code snippet: app.controller('LinkController',function(link, $scope, $location){ $scope.go = function() ...

PHP file unable to access Bootstrap file

I have my bootstrap css file stored in the following directory: C:\Users\SCEA\Downloads\bootstrap-3.3.7\css When linking this css file to my php file, I used the absolute path: <link href="C:\Users\SCEA\Downl ...