CSS not linking to my index.html

问题

I'm a beginner in this so I apologise in this since I'm learning myself so please cut me some slack. I'm having a problem in linking my CSS into my index, all I'm trying to do is make a certian portion on top of the page black, like a box just filled black. The banner area technically. And it's not linking for some reason? Here is the CSS and HTML code - I've tried opening in Chrome and explorer and nothing is happening? Please help.

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

.top-section {
    padding: 30px 0;
    margin-bottom: 0;
    color: #000000;
    background-color: #000000;
    background-size: cover;
}

.top-section {
padding-top: 100px;
padding-bottom: 100px;
}

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<title>Upload Festival</title>  
    <head>
  
      <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="googlebot" content="index,follow">
        
    <!--css-->
    <link href="css/customization.css" rel="custom" style="text/css">
  </head>
<body class="index">
<header class="top-section" role="banner"></header>
</body>
</html>

回答1:

I you are a beginner, then start with simple an basic concepts...
Use this template that is the structure of a HTML page:

<html>
    <head>

        <title>Page Title</title>
        <!--Link to an external resource-->
        <link rel="stylesheet" type="text/css" href="css-folder/css-file.css">

    </head>
    <body>
        <header class="top-section" role="banner"></header>
    </body>
</html>

Put your style sheets into another file. For example:

css-folder/css-file.css:

html {
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

.top-section {
    padding: 30px 0;
    margin-bottom: 0;
    color: #000000;
    background-color: #000000;
    background-size: cover;
}

.top-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

You don't need to know about the conditional comments and doctypes and meta datas right now!
Good luck.

回答2:

It seems to be a problem with your CSS linking, in the rel attribute and the style attribute (which doesn't exists). You have this:

<link href="css/customization.css" rel="custom" style="text/css">

And it should be like this:

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

More information about linking CSS files to your own website: http://www.w3schools.com/css/css_howto.asp

More information about the LINK tag: http://www.w3schools.com/tags/tag_link.asp

Have a nice day!

来源：https://stackoverflow.com/questions/28797082/css-not-linking-to-my-index-html

标签

html

css

indexing

stylesheet