Why can't I add any new CSS rules to new classes or id´s that has any effect?

Question

I am experiencing many irrational issues when I am trying to code some simple HTML with CSS. Most of the code is taken directly from courses here. Now the biggest problem seems to be that I can not add any new classes to my CSS that will have any effect in the browser. I have tried to move the classes higher up in the DOM with same result. I have tried creating new documents for the site, have copied and pasted different parts of the code, have written minimal code just to try single function but no difference in result. I am sitting on a MBPR and have been using TextWrangler and Sublime. Anyone got any idea? When I make changes to existing classes, they work, most of them.

Answer 1 · 2015-03-04T19:37:16Z

March 4, 2015 7:37pm

I strongly recommend you test your code through a validator:

HTML: http://validator.w3.org/
CSS: https://jigsaw.w3.org/css-validator/

Your doctype declaration is incorrect - there should be no space between the exclamation mark and the word 'doctype'.
In each of your navs, change id="selected" to class="selected" as id's must be unique, i.e no duplicates.
You are missing the closing div tags on .main-nav in both instances (top and bottom of page)
body tag needs style attribute for `background: img/bg3.jpg". Although you should be able to remove that inline styling now (see below).
In main.css - .main-nav ul li, change vertical-align: center; to vertical-align: middle;.
Change @media screen (max-width: 718px) to @media screen and (max-width: 718px) {}.

1: .gallery will not be styled at all, no matter what I do with the code.

Remove list-style: none; from .gallery and add the following after the .gallery rule:

.gallery ul {
    list-style: none;
}

There is something else going on here, but I haven't been able to decipher what it is... strange indeed.

2: I have to put the background-image, both for body and .wrapper, inline, as nothing happens when put in stylesheet.

URL references in stylesheets are relative to where the stylesheet is located. So if the img folder is relative to your HTML document and your stylesheet is in css/main.css, then the value of background-image in your CSS would be url('../img/bg3.jpg').

Also, the background-image property in your body selector is incorrect. The values you have there are for other background properties as shown below:

body {
/* Change the following: */
/* !!    background-image: center center fixed; */
    background-image: url('../img/bg3.jpg');
    background-attachment: fixed;
    background-position: center center;
/* end edit */
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #111;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;

}

3: I can't effect the a:active in nav, even when I've put it in an div for each active site. I could for a moment do a underline styling for the id="selected", but then even that stopped working.

.main-nav ul li a:hover does not have a closing curly bracket which is preventing the next rule (`:active') being read.

Answer 2 · 2015-03-04T18:43:09Z

March 4, 2015 6:43pm

Are you placing a dot at the start of the class name in your CSS? Note, that you do NOT add the dot in your HTML element's class attribute.

Perhaps you could post some sample code for us to look at. See this post about posting code - https://teamtreehouse.com/forum/posting-code-to-the-forum .

Answer 3 · 2015-03-04T19:06:44Z

March 4, 2015 7:06pm

So the problems are:

1: .gallery will not be styled at all, no matter what I do with the code.

2: I have to put the background-image, both for body and .wrapper, inline, as nothing happens when put in stylesheet.

3: I can't effect the a:active in nav, even when I've put it in an div for each active site. I could for a moment do a underline styling for the id="selected", but then even that stopped working.

Answer 4 · 2015-03-04T19:00:06Z

March 4, 2015 7:00pm

This is my HTML and CSS:

<! DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Designgolv.com</title> 
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body background="img/bg3.jpg">
        <style>

        #wrapper {
            background-image: url("img/grey_bg.png");

        }

        </style>

        <div id="wrapper">
            <div id="content">
                <header>
                    <div id="logo"><img src="img/logo2.png" alt="designgolv.com" /></div>

                    <div class="home_header"><img src="img/db_header.jpg" alt="exempelbilder"> </div>

                    <nav>
                        <div class="main-nav">
                            <ul>
                                <li><div id="selected"><a href="index.html">VÄLKOMMEN</a></div></li>
                                <li><a href="designbetong.html">DESIGNBETONG</a></li>
                                <li><a href="designgjuteriet.html">DESIGNGJUTERIET</a></li>
                                <li><a href="galleri.html">GALLERI</a></li>
                                <li><a href="webbshop.html">WEBBSHOP</a></li>
                                <li><a href="kontakt.html">KONTAKT</a></li>
                            </ul>

                    </nav>
                </header>

                <section>

                    <div class="welcome"><h2>DESIGNBETONG - Tunn betong för alla utrymmen</h2></div>
                    <div class="main_column">



                    <p>Designbetong är en cementbaserad beläggning som man lägger ut där man önskar ett snyggt betongutseende. Oavsett om ni önskar en ruff industrikänsla eller en slät elegans har vi anpassade koncept. Ni kan köpa materialet och lägga själva eller köpa det inlagt och klart av oss eller våra samarbetsparters runt om i landet.</p> 

                    <p>Beläggningen Designbetong består av en pulverdel där man har en kedja av sandsorter och naturlig cement, anpassade för att stå emot slitage på ett bra sätt. Härdaren som är vätskedelen innehåller en typ av limm vilket get ett bra fästa i underlaget och en sprickfri betong. </p>

                    <p>Vi har också tillsatt en “fördröjare” så att man har god tid på sig att skapa det utseende man vill ha. Även dagen efter är beläggningen fortfarande så mjuk att den går att slipa med vanligt sandpaper. </p>

                    <p>När man känner sig nöjd med slipningen läggs ytbehanding ut med en mopp. Den förseglar ytan mot smuts och är självpolerande.</p>

                    <p>Inga specialmaskiner, inga kurser! <br>
                    Alla kan lägga detta material.</p>

                    <p>Möblering av rummet kan ske efter 2 dagar.</p> 

                    </div>
                    <div class="secondary_column"> <div class="coltest">
                        <h3>Kontakta oss direkt:</h3>

                        <p><a href="tel:0706363800">070 63 63 800</a></p>
                            <p><a href="mailto:marcus@designgolv.com">marcus@designgolv.com</a></p>

                        <h3>Fördjupningar:</h3>
                        <p>Designgolv (mer om oss)</p>
                        <p>ROT-avdrag</p>
                        <p>Affärstillfälle</p></div>
                    </div>



                    <div class="clearClass"></div>

                    <div id="dbAlternativesHeader">
                        <h3>Välj den eller de lösningar som passar bäst in på dina önskemål för beskrivning och teknisk information.</h3>
                    </div>

            <div class="gallery">



              <ul>
                <li><a href="designbetong_orginal.html"><img src="img/db1.jpg" alt="designbetong orginal"><p>Designbetong Orginal</p></a></li>
                <li><a href="designbetong_industry.html"><img src="img/db_industry.jpg" alt="designbetong industry"><p>Designbetong Industry</p></a></li>
              </ul>
            </div>


                </section>
                     <nav>
                        <div class="main-nav">
                            <ul>
                                <li><div id="selected"><a href="index.html">VÄLKOMMEN</a></div></li>
                                <li><a href="designbetong.html">DESIGNBETONG</a></li>
                                <li><a href="designgjuteriet.html">DESIGNGJUTERIET</a></li>
                                <li><a href="galleri.html">GALLERI</a></li>
                                <li><a href="webbshop.html">WEBBSHOP</a></li>
                                <li><a href="kontakt.html">KONTAKT</a></li>
                            </ul>

                    </nav> 
                <footer>

                </footer>
            </div>
        </div>  
    </body>

</html>

/************************************
    Main CSS 
*************************************/

/************************************* 
    GENERAL 
*************************************/


@font-face {
  font-family: zygo;
  src: url(zygo.ttf);
}

p, h2, h3 {
    color: #e6e6e6;
    font-family: 'Open Sans', sans-serif;
}


a {
    text-decoration: none;
    color: #e6e6e6;
}



h3 {
    font-size: 1.25em;
    color: red;
}


img {
    width: 100%;
}


/************************************* 
    BODY 
*************************************/

body {
    background-image: center center fixed;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #111;
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;

}

/************************************* 
    CONTAINER 
*************************************/

#wrapper {

    max-width: 940px;
    margin: 0 auto;
    margin-bottom: 0;
    background-color: #999;
    min-height: 900px;
    padding: 0 15px 10px;
    /*-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;*/

}

#content {
    max-width: 718px;
    margin: 0 auto;
    display: block;

}


/************************************* 
    HEADER
*************************************/

#logo {

    width: 80%;
    display: block;
    margin: 0 auto;
    padding-top: 15px;
}

.home_header {
    max-width: 718px;
    height: auto;
    display: block;
    margin: 10px auto;
    padding-right: 0;
}

nav {
    text-align: center;
    max-width: 718px;

    margin: 0 auto;
    background-color: hsla(90, 100%, 100%, 0.3);
    border-top: 1px solid hsla(90, 100%, 100%, 0.5);
    border-left: none;
    border-right: none;
    border-bottom: 1px solid hsla(90, 100%, 100%, 0.5);
    padding-top: 0;
    padding-bottom: 0;

}

nav ul {
    padding-top: 0;
    padding-bottom: 0;
}

.main-nav ul li {
    display: inline-block;
    margin: .25em auto;
    vertical-align: center;
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0;


}

.main-nav ul li a {
    font-family: 'Open Sans', sans-serif;
    font-size: 0.75em;
    text-decoration: none;
    text-shadow: 1px 1px 3px #333;
    color: #ddd;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.main-nav ul li a:hover {
    color: red;


.main-nav ul li a:active {
    font-size: 2em;
    text-decoration: underline;
}

.contact-info {
    list-style: none;
    color: #e6e6e6;
}


/************************************* 
    CONTENT
*************************************/

.welcome {

    display: block;
    clear: both;
}

.main_column {
    max-width: 500px;
    display: block;
    float: left;

}

.secondary_column {
    max-width: 218px;
    font-size: 0.75em;
    display: inline;
    float: left;
    margin-left: 50px;
}

.clearClass {
    clear: both;
    margin-bottom: 20px;
    border: 1px solid #d6d6d6;
    border-bottom-style: solid;
    border-top-style: none;
}



/************************************* 
    DESIGNBETONG ALTERNATIVES GALLERY
*************************************/

.gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    color: #d6d6d6;
}



/************************************* 
    FOOTER 
*************************************/


/************************************* 
    MEDIA QUERIES
*************************************/

@media screen (max-width: 718px)

Welcome to the Treehouse Community

Looking to learn something new?

Martin Ahlström

Martin Ahlström

Why can't I add any new CSS rules to new classes or id´s that has any effect?

4 Answers

Sean T. Unwin

Sean T. Unwin

Martin Ahlström

Martin Ahlström

Sean T. Unwin

Sean T. Unwin

Martin Ahlström

Martin Ahlström

Martin Ahlström

Martin Ahlström

1: .gallery will not be styled at all, no matter what I do with the code.

2: I have to put the background-image, both for body and .wrapper, inline, as nothing happens when put in stylesheet.

3: I can't effect the a:active in nav, even when I've put it in an div for each active site. I could for a moment do a underline styling for the id="selected", but then even that stopped working.

Martin Ahlström

Martin Ahlström