Search code examples
htmlcssw3c-validation

Error: CSS: text parse Error

I just put my HTML through validation at W3C and got back the following error:

ERROR: CSS: text parse error - it's talking about the sidebar-container DIV.

What am I doing wrong? I have a couple of errors relating to the same sidebar-container div.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Prisma Kitchens</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="desctiption" content="Kitchen designers in Manchester.">
        <meta name="author" content="Prisma Kitchens">

        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <link rel="stylesheet" href="css.css" style="text/css">
        <link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" style="text/css>
    </head>
    <body>
            <div class="sidebar-container">
            <div class="sidebar">
            <div class="logo">
            <!--Logo is here-->
            </div>
            <div class="links">
                <ul>
                    <li><a href="index.html">home</a></li>
                    <li><a href="about.html">about</a></li>
                    <li><a href="services.html">services</a></li>
                    <li><a href="gallery.html">gallery</a></li>
                    <li><a href="contact.html">contact</a></li>
                </ul>
            </div>
    </div>
    </div>

    <div class="right-container">
            <div class="head_image_mobile"></div>
            <div class="heading_image">
            <!--Holds the image at top of page-->
            </div>
            <div class="content">
            <div class="subheading">Why Choose Prisma Kitchens?</div>

            <a class="button" href="about.html">Learn More...</a>
            <div class="content_gap"></div>
            <div class="subheading">What Can We Offer?</div>

            <a class="button" href="services.html">Our Services...</a>
            <div class="content_gap"></div>


            </div>

    </body>
    </html>
Solution

  • It's type="text/css" not style="text/css". Also there was a " in type="text/css missing and a closing </div> at the end.

    Cleaned up

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Prisma Kitchens</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="desctiption" content="Kitchen designers in Manchester.">
        <meta name="author" content="Prisma Kitchens">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
        <link rel="stylesheet" href="css.css" type="text/css" >
        <link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" type="text/css">
    </head>
    <body>
        <div class="sidebar-container">
            <div class="sidebar">
                <div class="logo">
                    <!--Logo is here-->
                </div>
                <div class="links">
                    <ul>
                        <li><a href="index.html">home</a></li>
                        <li><a href="about.html">about</a></li>
                        <li><a href="services.html">services</a></li>
                        <li><a href="gallery.html">gallery</a></li>
                        <li><a href="contact.html">contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="right-container">
            <div class="head_image_mobile"></div>
            <div class="heading_image">
                <!--Holds the image at top of page-->
            </div>
            <div class="content">
                <div class="subheading">Why Choose Prisma Kitchens?</div>
                <a class="button" href="about.html">Learn More...</a>
                <div class="content_gap"></div>
                <div class="subheading">What Can We Offer?</div>
                <a class="button" href="services.html">Our Services...</a>
                <div class="content_gap"></div>
            </div>
        </div>
    </body>
</html>