skip to Main Content

I have these lines of code on separate sheets and there isn’t any referencing error but when I .change height and width values nothing changes it just displays the button depending on size of text
`

Menu

<style>
.button{
  text-align: center;
  font-size: 24px;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-decoration: none;
  border: 2px solid #ccc;
  border-radius: 7px;
  font-family: 'Noto Sans';
  background-color: #8361ff;
  color: white;
}
</style>
</html`

..expecting the button’s width and height to change

2

Answers


  1. Chosen as BEST ANSWER

    Thanks, but that wasn't the case, to be able to edit the button more I used span rather than button and gave it the class name button but when I edit the width and height it wasn't being edited I figured how to solve it tho, I changed the padding-left, right, top and button I think there should be a simpler way tho


  2. It seems to me like you’re trying to select a class but you don’t have that class in your HTML. When you want to select a type of element (like a button), you would refer to it in CSS like this:

    button {
       width: 100px;
       height: 100px;
    }
    

    The HTML would not have to have anything special added to it.

    Now let’s take a look at what happens when you’re using a class instead of an element selector (which is what your code is doing right now). The CSS should look like this. Note the dot in front of button:

    .my-button-class {
       width: 100px;
       height: 100px;
    }
    

    Now that your CSS is referring to a class, your HTML must also have that class. Here’s how you would do that:

    <button type="submit" class="my-button-class">My Button</button>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search