Doctype seems to block or cause Button CSS to not work

Diskutiere Doctype seems to block or cause Button CSS to not work im HTML Forum im Bereich Programmierung; Hey everyone. I tried to figure this out on my own, but... since I just got started with HTML and CSS I´m a bit stuck. While doing some...
Neues Thema erstellen Antworten
F

Frankster

New member
Beiträge
4
Punkte Reaktionen
0
Hey everyone.

I tried to figure this out on my own, but...

since I just got started with HTML and CSS I´m a bit stuck. While doing some exercises with styling Buttons via CSS I encounter the problem that,... as soon as I use the doctype html at the beginning of my page, two of my buttons lose the CSS styling. All other Buttons seem to be okay.
I can´t figure out why this is happening. As soon as i remove the doctype HTML at the beginning of my page, the Buttons are displayed with the styles I used again.

Does anyone have an idea, why this is happening?
 
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
Please post the code in question, HTML and CSS.
 
F

Frankster

New member
Beiträge
4
Punkte Reaktionen
0
Sure,... on top is the HTML code and on the below the CSS i styled the buttons with.
1664219403485.png 1664219514645.png

That is what it is supposed to look and what it looks like if I remove the <!DOCTYPE html>. 1664219765340.png


But it keeps looking like that, if i use the <!DOCTYPE html>.1664219896046.png
 
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
Please don't post screenshots of your code, copy&paste the text and use code tags when posting, the small menu icon right of the landscape icon and then </>.
Additionally you can check your code by the validator:
https://validator.w3.org
Maybe it will give you useful hints what's wrong.
 
F

Frankster

New member
Beiträge
4
Punkte Reaktionen
0
Ok, I will keep that in mind for future questions.
I hope I did it right this way. Also, Thank You for the link. I´ll go check it out.

HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Button Exercises</title>
  <link rel="Stylesheet" href="Styles/Buttons.css"></head>
<body>
  <div class="firstthreebuttons">
  <button class="subscribe-button">
    SUBSCRIBE
  </button>
 
  <button class="Join button">
    JOIN</button>
 
  <button class="Tweet button"><strong>
    Tweet</strong></button>

  </div>

CSS: 
.subscribe-button {
    background-color:rgb(174, 19, 19);
    color: white;border: 0ch;height: 30px;width: 105px;border-radius: 2px;cursor: pointer;
    transition: 0.20s;margin-left: 0px;}

  .subscribe-button:hover {
    opacity: 0.5;}
 
  .subscribe-button:active {
    opacity: 1;}

    .join button {
      background-color: white;border-color: rgb(31, 73, 213);border-style: solid;border-width: 1px;color:rgb(31, 73, 213);
      height: 36px;width: 62px;border-radius: 2px;cursor: pointer;margin-left: 8px;transition: 0.30s; }
      
      .join button:hover {
        background-color:rgb(31, 73, 213);color:white;}
      
      .join button:active {
        opacity: 0.75;}

        .tweet-button {background-color: rgb(0, 195, 255);border: none;color:white;border-radius: 20px;width: 75px;
          height: 40px;font-size: medium;margin-left: 8px;cursor: pointer;transition: 0.15s;}
        
          .tweet button:hover {
            box-shadow:10px 10px 10px rgba(0,0,0,0.15);
            margin-right: 10px;cursor: pointer;}

            .tweet-button:active {opacity: 0.80;}
 
S

Sempervivum

Well-known member
Beiträge
353
Punkte Reaktionen
52
That's fine now.
Don't use blanks in your class names. What's happening is as follows:
In your HTML you assign this class: class="Tweet button"
The browser is taking this as two independent classes.
However in your CSS you are using this selector: .tweet-button
These do not match, therefore your CSS doesn't take effect.
Or, for hover, you are using this selector: .tweet button:hover
This addresses a button element inside another element having the class "tweet".
Use underlines or dashes in your class names. When using blanks, the components will be taken as separate classes.
 
F

Frankster

New member
Beiträge
4
Punkte Reaktionen
0
Wow, I don't know how I didn't see that. Well, I am still at the very beginning but...
I guess I have to train my eye a little more in such points.
Thank you for the quick helpful tips. No spaces. I will remember that.
In the end i fixed it by simply omitting the dashes altogether. Now it is working.
 
Thema:

Doctype seems to block or cause Button CSS to not work

Oben Unten