Css not working for button


#1

Hello, I added a button but when I tried to add some styling on it, it doesn’t work. It just stays as the default button. Here’s my html


#2

CSS is added inside an attribute called style, as in <button style="display:inline"></button>.


#3

What do you mean?


#4

I’m not sure where my answer was unclear.


#5

nibba Do you mean like this?


#6

Yes. I’m sure whatever material you’re using to learn HTML has a section on adding style rules.


#7

It’s still not working


#8

What goal are you trying to achieve? A button on its own isn’t going to look any different if you’re just changing display around.


#9

Well as I was trying to fix the button problem all my css went away. The coding is still there but when I open the document on chrome none of the style is there


My css disappeared
#10

I can’t see any of the things that you’re seeing. If you provide me with visuals, I might be able to help you, but you have to take the first step. Do you know how to use Chrome’s dev tools?


#11

I know how to access them and work around with some things. I don’t think anything is wrong with my css.

body{
font-family: Arial, Helvectica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color:#f4f4f4;

}
/*Global */
.container{
width: 80%;
margin:auto;
overflow: hidden;
ul{
margin:0;
padding:0;
}
style{
height:38px;
background:#f4f4f4;
border:none;
}

/*header **/
header{
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
color:#ffffff;
padding-top:30px;
min-height:70px;
border-bottom:#008B8B 5px solid;
}
header a {
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
}

header li{
float:left;
display:inline;
padding: 20px 5px 20px 5px;
}

header #branding {
float:left;
}
header #branding h1{
margin:0px;
}
header nav {
float:right;
margin-top:10px;
}
header h3{
float:left;
}

header .highlight, header .current a{
color:#008B8B;
font-weight:bold;
}
header a:hover {
color:#cccccc;
font-weight:bold;
}

/showcase/
#showcase{
min-height:400px;
background-color:black;
background-image:
radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
text-align:center;
color:#008B8B;
}

#showcase h1{
margin-top:100px;
font-size:55px;
margin-bottom:10px;
text-align:center;
}

#showcase p{
font-size:20px;
}
#newsletter{
padding:15px;
color:#008B8B;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
border-top:#008B8B 5px solid;
}
footer{
padding:20px;
margin-top:0px;
color:#ffffff;
background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
text-align:center;
}
}


#12

what it looks like now


#13

what it looked like before.


#14

What does your HTML look like?

Also, when you post code on this forum, you should format it as such for the sake of readability. If you post

```
<div>
  <h2 class="link"><a href="https://google.com">Go here</a></h2>
</div>
```

it will turn into

<div>
  <h2 class="link"><a href="https://google.com">Go here</a></h2>
</div>

which is substantially easier to read and understand immediately.


#15

How is your problem related to Atom? There are plenty of better websites to get help on general HTML/CSS issues.


#16

True, but a total newbie who isn’t familiar with good question-asking technique is going to run into the same need for clarification at another place, and the rigor requirements imposed by sites like StackOverflow might be frustrating to someone who hasn’t already been introduced to the various components of a well-formed question. I feel like this is an acceptable place to help someone figure out what they want to ask and what they need to provide in order to get an answer, then if I can’t provide an answer I point them to other sites.


#17

Hi,

So let’s first start by writing the css consistently and that will get some of you problems solved.

Ex: header a {color:#ffffff;} 
Ex: /*this is how you add comments*/ .... |not like this| ... probably why your styling is gone

It’s good practice to put line-breaks between your selectors when they are not related. You have several places where you are running everything together …

header a{color:#333333;}footer a{color:#333333;}

If you insist on working with inline styles then your button style should look like:
<button style="display:inline;"></button>

I would probably use a class to make this work, more like:
<button class="somename"></button>

Then up top in your area add .somename {display:inline;}

You have formatting issues all over the place so i would fix that first so you can be consistent and it will be much easier to pick out any errors. As a last comment, what are you trying to do with that button?

Ryan.


#18

The comments are correct. They appear as /comments/ because that’s how the forum parses /*comments*/.


#19

Any idea why the comments above that one are showing correct in the header style area and not being parsed as | |. Did you end up getting his actual style sheet / code?

Ryan.


#20

Because of the spaces. When /*asterisks */ aren’t right at the start and end of word boundaries, the forum ignores them because asterisks are a common character outside of markdown.

Nope.