Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Krystel Hagan
Krystel Hagan
4,731 Points
Posted by Krystel Hagan
Krystel Hagan
4,731 Points

CSS/HTML/jQuery Question

I am beginning to write my code for my css and I have my Jquery in my head tag of my HTML.

My first question is where would I call for the CSS document (before or after the jQuery)?

Also, would I need to call the CSS doc a certain way if I have the jQuery in place or if this code I am creating (for a calculator) will be used on a static HTML page for a company in the near future?

CodePen: http://codepen.io/anon/pen/EAqzJ

7 Answers

austenpayan
austenpayan
10,218 Points
austenpayan
austenpayan
10,218 Points

Hey Krystel,

Usually, the css files are included before the javascript files. You can include it the normal way, as CSS and Javascript don't necessarily depend on each other for anything. Hope this helps!

Krystel Hagan
Krystel Hagan
4,731 Points
Krystel Hagan
Krystel Hagan
4,731 Points

I have been using: <link rel="stylesheet" href="calculatordocs/calculator-framework.css"> in my HTML to call the CSS file and it isn't showing changes made in CSS when I pull it up in the browser. Am I doing something wrong?

austenpayan
austenpayan
10,218 Points

Can you post your header code in a reply?

Krystel Hagan
Krystel Hagan
4,731 Points
Krystel Hagan
Krystel Hagan
4,731 Points 
      <link rel="stylesheet" href="calculatordocs/calculator-framework.css"> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript">

        function calculate() {
            var hoursValue = $("#hoursValue").val()*1;
            $("#hoursResult").val(hoursValue.toFixed(2));

            var costValue = $("#costValue").val()*1;
            $("#costResult").val(costValue.toFixed(2));


            var totalresult = hoursValue * costValue;
            $("#totalResult").val(totalresult.toFixed(2));

            var totalvalue = totalresult.toFixed(2);

            if(isNaN(hoursValue)) {
              alert("Your response for the number of Hours contains a non-numeric character. Please re-enter your response.");
            }
            if(isNaN(costValue)) {
              alert("Your response for Cost contains a non-numeric character. Please re-enter your response.");
            }

          }
      </script>
    </head>  ```
austenpayan
austenpayan
10,218 Points

hmm it seems the top half of the code is missing. Can you please post the entire head tag from beginning to end?

Krystel Hagan
Krystel Hagan
4,731 Points
Krystel Hagan
Krystel Hagan
4,731 Points

<head> <link rel="stylesheet" href="calculatordocs/calculator-framework.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript">

-this is whats before the function.

austenpayan
austenpayan
10,218 Points

Everything looks good to me. You might want to check your file path to see if it is matching up correctly.

Krystel Hagan
Krystel Hagan
4,731 Points
Krystel Hagan
Krystel Hagan
4,731 Points

I have and it matches up, it just is not pulling anything from the css doc :(

Steven Chin
Steven Chin
2,001 Points
Steven Chin
Steven Chin
2,001 Points

Try to add the jquery at the end of the body tag, I do this so that everything is loaded (HTML and CSS) in the DOM before the scripts are loaded.

Also your style tag is missing an arg:

you have this: link rel="stylesheet" href="calculatordocs/calculator-framework.css"

Try this: link rel="stylesheet" type="text/css" href="calculatordocs/calculator-framework.css"