CODEWITHSUNDEEP
htmlcss
gSider
gSider

Reputation: 23

One of my CSS classes is not having any effect

I have two headers, one with class="mainHeader", and another with class="subHeader". I'm trying to contain both of those in another class by using <div class="header"> beforehand (and a </div> after of course). However in my CSS file that I linked, when I try to do .header { /* styling */ }, no matter what I put in there nothing changes when I open the HTML file.

Here are my files:

<!DOCTYPE css>

.header {
  font-family: Roboto, serif;
  text-align: center;
  color: Black;
}

.mainHeader {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.5em;
  padding-top: 20px;
}

.subHeader {
  font-size: 14px;
  line-height: 0em;
  word-spacing: 0.25em;
  padding-bottom: 100px;
}
<!DOCTYPE html>

<html>

  <head>
    <link href="WSDS-css.css" rel="stylesheet" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
    <title>Temp title</title>
  </head>
  
  <body>
    <div class="header">
	  <h1 class="mainHeader">Temp main heading</h1>
	  <h2 class="subHeader">Temp sub-heading</h2>
	</div>
  </body>
  
</html>

As you can see when you run it, no styling made in the ".header" is used. I'm still pretty new to this so please understand if it's an easy fix!

Upvotes: 2

Views: 55

Answers (3)

Parth
Parth

Reputation: 29

Remove <!DOCTYPE css> from your css file. DOCTYPE declarations are for HTML based documents.

Upvotes: 0

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

  • DOCTYPE declarations are for HTML based documents.So remove <!DOCTYPE css> from your css file.
  • Make sure file path for css file is correct.

Upvotes: 0

hungerstar
hungerstar

Reputation: 21675

You don't define a doctype for CSS files, remove <!DOCTYPE css>.

.header {
  font-family: Roboto, serif;
  text-align: center;
  color: Black;
}

.mainHeader {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.5em;
  padding-top: 20px;
}

.subHeader {
  font-size: 14px;
  line-height: 0em;
  word-spacing: 0.25em;
  padding-bottom: 100px;
}
<!DOCTYPE html>
<html>

<head>
  <link href="WSDS-css.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet">
  <title>Temp title</title>
</head>

<body>
  <div class="header">
    <h1 class="mainHeader">Temp main heading</h1>
    <h2 class="subHeader">Temp sub-heading</h2>
  </div>
</body>

</html>

Upvotes: 4

Related Questions