A part of styles didnt work when i add <!DOCTYPE html>-CodePudding

The style of y "Tweet" button disappears whem i adding !DOCTYPE html.

<!DOCTYPE html>
<html>
    <head>
        <title>Buttons</title>
        <link rel="stylesheet" href="styles/buttons.css">
    </head>
    <body>    
        <button >SUBSCRIBE</button>
        <button >JOIN</button>
        <button >Tweet</button>
    </body>

</html>

css part of Tweet button from button.css

.tweetb {
    background-color: rgb(29, 155, 240);
    color: white;
    border: none;
    height: 36px;
    width: 74px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    margin-left: 8px;
    transition: box-shadow 0.15s;
    vertical-align: top;
}

.tweetb:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

CodePudding user response：

From you screenshot class name for tweet button is TweetBT., whereas in you butttons.css it's .tweetBT, which should be .TweetBT. As class name is not matching so CSS is not applied it's not an issue with !DOCType Html. It's because classname selector is not matching.