Not all properties are affected by the CSS stylesheet

Even though my CSS stylesheet successfully changes the background color of the page, I am facing issues with other properties that I have set on my HTML tags.

{% block body %}
    <div id='title'>
        <h1>
            VISUALIZER2D
        </h1>
    </div>
    <form class='formclass' action='/' method='post'>
        <div class='input'>
            <input name='link' placeholder='Enter YouTube URL' type ='text'>
        </div>
        <div>
            <button type='submit'>Next</button>
        </div>
    </form>
{% endblock %}

I've also included my CSS stylesheet below:

body
{
    background-color: #252C3E;
    text-align: 'center';
    font-family: 'Courier'
}
.formclass
{
    border-radius: 8px;
}
.input
{
    font-size: 2em;
    height: 90px;
    width: 190px;
}
#title
{
    color: white;
}

Despite having all these styles set, only the background color is being applied. What could be causing this issue?

htmlcss

Answer №1

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- || METADATA || -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- || STYLESHEETS || -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      <!--
      Page
      title
      --
    />
    <title>Wtitle</title>

    <!-- || CSS || -->
    <style>
      body {
        padding: 20px;
        display: inline-block;
        background-color: #252c3e; /* Works | Changes background color */
        /* text-align: "center"; Invalid Property Value */
        font-family: "Courier"; /* Works | Changes font family */
      }
      .formclass {
        padding: 5px;
        border: 2px solid #73ad21;
        background-color: white;
        border-radius: 8px;
        width: 405px;
        text-align: left; /* Changes position of "Next" button */
      }
      .input {
        font-size: 2em;
        height: 90px;
        /* width: 195px; Don't need this */
      
      }
      #title {
        color: white;
        width: 410px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <!-- || BODY || -->
    <div id="title">
      <h1>
        VISUALIZER2D
      </h1>
    </div>
    <form class="formclass" action="/" method="post">
      <div class="input">
        <input name="link" placeholder="Enter YouTube URL" type="text" />
      </div>
      <div>
        <button type="submit">Next</button>
      </div>
    </form>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- || METADATA || -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- || STYLESHEETS || -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      <!--
      Page
      title
      --
    />
    <title>Wtitle</title>

    <!-- || CSS || -->
    <style>
      body {
        padding: 20px;
        display: inline-block;
        background-color: #252c3e; /* Works | Changes background color */
        /* text-align: "center"; Invalid Property Value */
        font-family: "Courier"; /* Works | Changes font family */
      }
      .formclass {
        padding: 5px;
        border: 2px solid #73ad21;
        background-color: white;
        border-radius: 8px;
        width: 405px;
        text-align: left; /* Changes position of "Next" button */
      }
      .input {
        font-size: 2em;
        height: 90px;
        /* width: 195px; Don't need this */
      }
      #title {
        color: white;
        width: 410px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <!-- || BODY || -->
    <div id="title">
      <h1>
        VISUALIZER2D
      </h1>
    </div>
    <form class="formclass" action="/" method="post">
      <div class="input">
        <input name="link" placeholder="Enter YouTube URL" type="text" />
      </div>
      <div>
        <button type="submit">Next</button>
      </div>
    </form>
  </body>
</html>

Not sure exactly what you're aiming for here, but I believe these adjustments will point you in the right direction. It seems like you are attempting to modify properties that do not exist. You can round the corners of a border only if there is an existing border. Make sure to create one for your form.

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

When clicked, the onClick feature will reduce the number each time instead of initiating the timer

Currently, I am working on a meditation application using React. As a starting point, I implemented a 25-minute countdown feature. The challenge I am facing is that the timer starts counting down each time the button is clicked, rather than triggering it ...

javascripthtmlcssreactjsjsx

Incorporate pug and sass into your React project for a more

Are pug/jade and sass compatible with react? I enjoy organizing my code by separating files, and the functionality that sass and pug provide is great for this purpose. Is there a way to integrate pug and sass into a react project? Pug example: doctype ...

javascripthtmlcssreactjspug

Display or conceal a div depending on whether the user is on a mobile or desktop browser

In order to optimize the display on different devices, I organized my content into two divisions. The left division contains quantity, price, and item name, while the right division includes product names. For mobile browsers, I would like to hide the pro ...

jqueryhtmlcssmobile

Decoding Encrypted HTML with Incorrect Formatting

After retrieving encoded HTML from the database, I decoded it in one section but noticed that the bold, italic, and other formatting were not displaying. Only plain text was showing. Here is my code: string a = da.GetLeftPanelData();//<-- in here Enco ...

c#asp.nethtmlc#-4.0

Use jQuery to replace this color with that color in CSS every time it appears

I have numerous div elements, some with a background-color: #aaa, others with font color: #aaa, and some with border-color: #aaa. There are also divs with various other colors. I am looking to update these colors (#aaa) to #ccc throughout the CSS. While ...

jquerycsscolorsreplace

The integration of a side panel with a chrome extension is experiencing issues

I am working on a chrome extension with the following functionalities - Extract URL path from a specific webpage. (The webpage's URL remains constant) Open this URL in a new tab. It can be either http:// or https://. Embed an iframe containing a sim ...

javascripthtmlgoogle-chrome

Issues with Image Loading in Azure WebMatrix

I am currently using WebMatrix to host my website, but I'm facing some issues with certain elements not loading correctly. Specifically, I have two pictures on my site that are linked to a directory on my local machine. I would like to know how I can ...

htmlcssazure

What is the reason behind Gmail altering the id attributes of certain elements?

Here we have a snippet from Gmail, showcasing the "Compose" button. Note the id, it starts as ":il" when there are no unread messages. <div id=":il" class="aic"> <div class="z0"> <div class="T-I J-J5-Ji T-I-KE L3" tabindex="0" role="button" ...

htmlseleniumgmail

What is the best way to ensure that this header remains adaptable to different screen

Looking for guidance on creating a fluid and responsive header design similar to the curved images shown at this link or this link. How can I ensure that my design maintains its shape without distortion when viewed on different devices? Any suggestions a ...

css

Prevent the left border from displaying on a link that wraps to a new line

Excuse me, I am facing an issue with a pipe separator in my subnav bar between links. The problem is that the first link on a new line retains the left-border that should be disabled. How can I prevent this border from appearing on the first link of a new ...

javascriptjqueryhtmlcss

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox

How can we ensure that multiple forms are validated when submitting one form in AngularJS?

Is there a way to validate two forms on the same page (address1 and address2) using AngularJS when the button on one of the forms is clicked? ` ...

javascripthtmlangularjsforms

Determine whether the Bootstrap data-style attribute is enabled or disabled

I have a bootstrap checkbox that I would like to trigger an alert dialog when it is switched off. <div class="row"> <link href="css/bootstrap-toggle.min.css" rel="stylesheet"> <script src="javascript/bootstrap-toggle.min.js ...

javascriptjqueryhtmlcss

Loading dynamic fonts in React MaterialUI

In our web application, each user experiences a unique style with colors, fonts, border widths, and more based on the Material UI JSON theme retrieved from the database upon loading the app. The challenge lies in handling dynamic fonts. What approaches ha ...

cssreactjsfontsmaterial-uidynamic-content

What is the correct way to include '?i#efix' in a font directory path in a Rails application?

It is suggested to include ?#iefix at the end of .eot font paths in order to resolve another erratic behaviour issue in IE: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url(&ap ...

cssruby-on-railsasset-pipelinefont-face

Utilize JavaScript to apply the CSS -moz-transition

Creating a web application and using CSS3 to transform a div, but encountering a challenge with Firefox. Able to make Chrome, Opera, and IE work properly, except for Firefox. Here's how I'm setting up the working browsers: obj.style.WebkitTrans ...

javascriptcssfirefoxstyles

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

htmlcssreactjs

Unable to properly access required file path through HTML source

I have a confidential folder named 'inc' where I store sensitive files such as passwords in php connection files. This folder is located at the same level as the 'public_html' folder. I successfully accessed php files with database conn ...

javascriptphphtml

Remove the option to delete without making any changes to the flash file

Utilizing the DataTable javascript tool to export a grid, I have obtained the following HTML generated code: <div class="DTTT_container"> <a class="DTTT_button DTTT_button_copy" id="ToolTables_example_0" tabindex="0" aria-controls="e ...

javascriptjqueryhtmlflashdom

The color of the ellipsis value does not match properly

In my table, I have lines that end with 3 dots '...' when the text overflows. To achieve this, I used the ellipsis value of the text-overflow property. While this works well and the '...' are displayed when resizing the window, I encoun ...

htmlcss