I'm having trouble changing the background color of a blank document in Brackets using external CSS

I have been utilizing Brackets for a project at school and attempting to align div tags side by side, but I am not seeing any changes in the visual display of the code. I started to suspect an issue with the external CSS, so I tried altering the background color without success. Even in a basic blank document setup, I could not change the background color.

Here is the code I used to attempt changing the color:

body {
    background-color: green;
}

Below is the HTML code I used for testing purposes:

<!DOCTYPE html>
<html>
    <head>
        <title>Solitare</title>
        <link rel="stylesheet" href="Untitled-2.css" type="tex/css">

    </head>
    <body>

    </body>
</html>

Could I be overlooking something obvious, or is there another underlying issue?

Thank you very much. G. Ward

Answer №1

It appears there may be an error in your code at

<link rel="stylesheet" href="Untitled-2.css" type="tex/css">
. Please try using
<link rel="stylesheet" href="Untitled-2.css" type="text/css">
instead.

body {
    background-color: green;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Solitare</title>
        <link rel="stylesheet" href="Untitled-2.css" type="text/css">

    </head>
    <body>

    </body>
</html>

Answer №2

Great job with your code! The only thing you're missing is changing 'tex' to 'text'

<link rel="stylesheet" href="Untitled-2.css" type="tex/css"

It should be

<link rel="stylesheet" href="Untitled-2.css" type="text/css"

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

Output the result of a PHP script inside a JavaScript code

I'm having trouble getting the code below to display the success word. Can anyone spot what's wrong with it? Appreciate any help in advance. <script type="text/javascript"> function verification(){ var s = document.test_form.textfiel ...

AngularJS Multiple Select fails to display preselected options

This morning, I dedicated a significant amount of time to finding a solution for assigning multiple values to an entity on my form. The scenario is as follows: I have an Entity named QualityData that can have various MechanismIdentifiers. After brainstor ...

Steps for generating a sophisticated shadow effect using CSS

Currently in the process of revamping a poorly designed website by replacing images with CSS whenever possible, along with other updates. I have encountered a challenging graphic (there are three of these, one for each active tab): https://i.sstatic.net/1 ...

Troubleshooting Problem with Centering Rows in Bootstrap

I am utilizing the most recent version of Bootstrap 3 to design a website for a friend, but I am encountering a challenge with centering elements on the page. Typically, I would use the following code: .center{ width: 90%; margin: 0 auto; } Howev ...

The Bootstrap Grid Leaves Blank Spaces Unfilled

View the screenshot here Take a look at the image above. I'm struggling to fill the empty space with div elements. I've experimented with display:inline-block and other display properties, but they haven't yielded the desired results. < ...

Set a div to have both absolute positioning and sticky behavior

Looking to create a div ("profilemenu") that pops out on the right side of the page triggered by a button (I'll handle this part). I want it to have a sticky attribute, but positioning has been tricky. Using position: absolute works for proper placeme ...

Creating interactive and adaptable maps

Currently, I am working on making a Joomla website responsive. However, I have encountered an issue with the SobiPro Map. The problem arises when displaying a map (background img) and points (a link + img) over it with an absolute position. As a result, wh ...

Overlapping spans

I am trying to stack these spans on top of each other without much success, http://jsfiddle.net/76NNp/79/ <td class="rtf hov"> <div>Investment</div> <div class="mub eub"> <span style="float:left">Test</spa ...

Tips for eliminating unnecessary space in a text area

I have a textarea and a button. I wanted them to be placed in the same horizontal line from the bottom. However, when I place them inline with no style applied, there is extra margin at the bottom of the textarea that is causing them not to align properly: ...

Aligning a div vertically in the center of its parent container

I am trying to vertically align a child element within its parent element <!DOCTYPE html> <html> <head> <title>Test</title> <style type="text/css"> #body { font-family: sans-serif, arial, 'Roboto'; } #outer ...

Unable to capture HTML form input in $_POST[]

I've encountered an unusual issue while transferring data from an email form (HTML5) to ajax/JSON and receiving false in order to prevent redirection to the php script after pressing the submit button. When I include commas between each data paramete ...

The bootstrap 4 dropdown button fails to activate the dropdown feature

I am currently working on a Flask application with Bootstrap integration. I am facing an issue while trying to incorporate a dropdown menu, which needs jQuery + Popper elements in order to work properly. Even though the button is displayed, the dropdown fu ...

ASP.NET Core MVC: Issue with Passing C# Razor Variable to HTML Tag

GitHub Repo: https://github.com/shadowwolf123987/Gun-Identification-App I'm currently facing an issue in passing the values of two C# variables from the code block defined in my view to the corresponding html tags within the same view. Unfortunately, ...

Height of Bootstrap 4 footer aligned to the bottom

I've made a template that sets the height of the footer to 120px and specifies the line-height as well. Here is an example: .footer { height: 120px !important; line-height: 120px !important; } <!doctype html> <html lang="en"> &l ...

How to eliminate the space between text and list-style-image in CSS

My ul list items have an image added using the list-style-image property. Here is an example of what I have done: JSFiddle ul { list-style-image: url('http://placehold.it/50x40'); } <ul> <li>Coffee</li&g ...

Positioning the close button on the top right edge of a Material-UI Dialog: A step-by-step guide

https://i.sstatic.net/ARTtq.png How can I include a close icon in the top right corner of the header section? I'm using the Material UI Dialog and everything works well, but I need a close button in the top section. Can anyone assist me with this? ...

Utilizing preg_match in PHP to validate a textarea for alphanumeric characters, numeric values, and spaces

I've almost got everything working, but I'm stuck on how to utilize preg_match. I checked the manual here http://php.net/manual/en/function.preg-match.php, but it doesn't clearly explain the syntax for creating my own validation. For example ...

Tips for extracting and utilizing a JSON object provided by the parent page:

Sorry in advance if this question has already been addressed. I've spent hours searching on Google, but haven't found a satisfactory answer yet. Below is the code snippet I'm working with: <ion-content> <div class="list"> ...

Is it possible to use styled-components to specifically style a child class within a component?

Hey there, I'm currently working with a mui Badge component and am trying to customize the appearance of the small circle. This is what I have so far: const BadgeStyled = styled(Badge)` & > .muibadge-badge: { background-color: #d3d4d7; ...

Adjust css rotation to direct an element towards a specific point

Looking to rotate a div towards a point using the CSS 3 transform rotate function. Progress so far: View code on JSFiddle $(document).ready(function(){ var scw,sch,scx,scy; calcCenter(); $(window).resize(function() { calcCent ...