CODEWITHSUNDEEP
htmlcss
s._rucha
s._rucha

Reputation: 3

Can't Connect External Stylesheet to HTML

This will be an easy question for you to answer. I'm making a Google Clone Homepage, and I'm trying to connect my CSS and HTML. For some reason it isn't working.

My HTML and CSS are in the same folder so that's not the problem. In my HTML sheet, I've already linked to the external CSS stylesheet as well. The HTML code is below. 

<style> 
    <link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</style>

I'm expecting to see my HTML change because of my CSS, but I don't see that.

You can find my full HTML code: https://codeshare.io/ay3yrw

And full CSS here: https://codeshare.io/GABLnN

Upvotes: 0

Views: 373

Answers (5)

Teocci
Teocci

Reputation: 8855

I check your code and I found three main reasons why your CSS doesn't work properly.

1. link tag

As many others mentioned, you need to remove the <style> ... </style> tag from the <head> tag and use the <link> tag directly inside of it.

2. Not id but class

Your HTML and CSS have many errors. For example, you are styling in the CSS file:

.top left links {
    ...
}

Here .top is defined as a class but in your HTML code you defined it as an id, check this line:

<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>

<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>

Remember that an id should be unique therefore you should change id attributes with class attributes.

3. No white spaces

In your CSS file all your definitions are incorrect:

.top left links {
    ...
}

From this definition, we know that .top is a class, but left and links are representing tags. And we all know that where is no <left> nor <links> tags they should be represented as classes. Also, remember that you concatenate them when you want to refer to a single element with multiple classes and you separate classes by a white space when you want to refer to a descendant element.

So the correct definition will be without white spaces:

.top.left.links {
    ...
}

Finally, I did some modification on the CSS file for the .search1 class. Check this code:

/* Google Duplicate CSS */

.top.left.links {
  float: left;
  color: #718090;
  text-align: left;
  padding: 30px;
  margin: auto;
  list-style-type: none;
}

.top.left.links a:hover {
  text-decoration: none;
}

.top.right.links {
  float: right;
  color: #718090;
  text-align: right;
  padding: 30px;
  margin: auto;
  list-style-type: none;
}

.top.right.links a:hover {
  text-decoration: none;
}

#ham_menu {
  height: 24px;
  width: 24px;
  float: right;
}

.search1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  -webkit-border-radius: 2px;
  -webkit-user-select: none;
  color: #5F6368;
  height: 36px;
  line-height: 27px;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  cursor: pointer;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  min-width: 54px;
  padding: 0 16px;
  text-align: center;
}

.bottom.left.links,
.bottom.right.links {
  list-style-type: none;
  color: #718090;
  padding: 30px;
  margin: auto;
  font-size: 13px;
}

.bottom.left.links {
  float: left;
}

.bottom.right.links {
  float: right
}

.footer {
  position: fixed;
  min-width: 980px;
  z-index: 103px;
  height: 64px;
  background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
  <!-- Containing Top Left Links on Nav Bar -->
  <div class="top left links">
    <a href="https://about.google/intl/en/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
    <a href="https://store.google.com/?utm_source=hp_header&utm_medium=google_oo&utm_campaign=GS100042">Store</a>
  </div>

  <!--Containing Top Right Links on Nav Bar-->
  <div class="top right links">
    <li><a href="https://mail.google.com">Gmail</a></li>
    <li><a href="https://www.google.com/imghp?hl=en&tab=wi">Images</a></li>
    <li><a href="https://accounts.google.com/ServiceLogin/signinchooser?hl=en&passive=true&continue=https%3A%2F%2Fwww.google.com%2F&flowName=GlifWebSignIn&flowEntry=ServiceLogin">Sign In</a></li>
  </div>

</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">

<!--Actual Google Image, Search Form, and Buttons-->
<center>
  <img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
  <form class="search" input type="text"> </form>
  <button class="search1" type="submit" value="Google Search" style="visibility">
         Google Search
        </button>

  <button class="search1">
        I'm Feeling Lucky
        </button>

  <p><a href="https://www.blog.google/outreach-initiatives/education/teacher-appreciation-week-2019/?utm_source=google&utm_medium=hpp&utm_campaign=taw_2019" target="_blank">We're supporting teachers inspiring the next generation.</a></p>
</center>



<!--Footer Links-->
<footer>
  <div class="bottom left links">
    <a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">Advertising</a>
    <a href="https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1#?modal_active=none">Business</a>
  </div>

  <div class="bottom right links">
    <li><a href="https://policies.google.com/privacy?hl=en&gl=us">Privacy</a></li>
    <li><a href="https://policies.google.com/terms?hl=en&gl=us">Terms</a></li>
  </div>
</footer>

Upvotes: 0

ShivCK
ShivCK

Reputation: 659

link tag is used directly inside the head tag

It must be like this:

<head> 
    <link rel="stylesheet" type="text/css" href="googleduplicate.css"/>
</head>

Upvotes: 0

不愿透露姓氏的李同学
不愿透露姓氏的李同学

Reputation: 1

Please, remove the <script> tag so that you can reference this CSS file.

Upvotes: 0

Atul Rajput
Atul Rajput

Reputation: 4178

Remove the style tag from the beginning and end of the link tag, like the following

<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>

and in this condition make sure your HTML file and CSS file need to be in same folder.

Upvotes: 0

Syed Ekram Uddin
Syed Ekram Uddin

Reputation: 3091

Remove the style tag from the beginning and end of the link tag, like the following 

<link rel="stylesheet" type="text/css" href="googleduplicate.css"/>

Upvotes: 0

Related Questions