Question 354457 in Html Question posted in
Some basic documentation can be found here.

Trying to understand How CSS selectors interact with HTML Buttons

I’m new to making websites and so found a template to use as a reference for my own personal website, so far I am working with the buttons trying to remove the border so it is a text button instead of a 3D button. I have coded the buttons in HTML and am trying to edit them in a separate CSS file I have tried using flex containers to help organise those specific buttons so if I use buttons in future the CSS code does not interact with all buttons on the website.

The issue is that the no matter what CSS selectors I use they don’t actually interact with the buttons inside the container and instead seem to only interact with the contain itself which is slowly boggling my mind. I have used class selectors and ID selectors, I don’t want to use element selectors as that will interact with every button I add to the website.

I have looked at Selector Priorities to see if I had missed something but I don’t believe that is the issue I am dealing with but hopefully with your help I can figure out the puzzle piece I am missing.

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="App.css" 

    <meta charset="UTF-8" />
    <title>Scarlets Website</title>
</head>
<body>
    <h1>
        Welcome to Scarlets Website!
    </h1>

    <div class = Selectors> 
        <button> Resume </button>
        <button> My work </button>
        <button> Socials </button>
    </div>


</body>
</html>

CSS CODE

h1 {
    color: white;
    font-size: 20px;
    position: fixed;
    left: 100px;
    bottom: 830px;
}

body {
    background-color: black
}

.Selectors {
    border: none;
    size: 100px;
    position: fixed;
    left: 50%;
    background-color: black;
    color: white;
    
}

with this code I was hoping to interact with the buttons as a whole so each of the buttons are edited together inside selectors but it only impacts the flex container and am lost how to either interact with them individually or interact with all three of my buttons inside the container. Any help would be appreciated thankyou!

Tags:

2

Answers


  1. 0

    Instead of using the .Selectors class to style the buttons, you should use a more specific selector for the buttons directly.

    .Selectors button {
    border: none; 
    padding: 10px;  
    margin: 5px;  
    background-color: black;
    color: white;
}

    And what did you mean by size: 100px; ?

    If you’re trying to set the size of the buttons, you should use the width and height properties.

    Login or Signup to reply.
  2. 0

    First of all, there’s a few bugs: your div selector that looks like this <div class = Selector>, Selector needs to have quotes around it like this: <div class = 'Selector'>. Next I fixed this line <link rel="stylesheet" href="App.css"> because it didn’t have a > at the end of the tag. Next if you want to select something inside a div you type the tag name like .Selector button which selects all the buttons inside it. Also I change some CSS so you can see every button.

    h1 {
    color: white;
    font-size: 20px;
    position: fixed;
    left: 100px;
    bottom: 830px;
}

body {
    background-color: black
}

.Selectors button{
    border: none;
    width:100px;
    height:100px;
    left: 50%;
    background-color: black;
    color: white;
    
}
    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="App.css"> 

    <meta charset="UTF-8" />
    <title>Scarlets Website</title>
</head>
<body>
    <h1>
        Welcome to Scarlets Website!
    </h1>

    <div class = 'Selectors'> 
        <button> Resume </button>
        <button> My work </button>
        <button> Socials </button>
    </div>


</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search