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

JavaScript JavaScript Loops, Arrays and Objects Tracking Data Using Objects Accessing Object Properties

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

So the text the html inserts inherits the formatting from the page and where it is place in it?

However, when they're added to the document, the browser converts it to 3:57 HTML and applies any formatting at that other paragraph's on the page receive.

1 Answer

Adrien Contee
Adrien Contee
4,875 Points

Yes. That is correct. The reason Dave's text on the screen doesn't look like default formatting is because its inheriting formatting from his linked CSS document.

Here's an example:

CSS:

p {
    font-size: 1.5em;
    font-family: sans-serif;
    color: tomato;
}

/*Here's some paragraph formatting that I've placed in a file named "cool-styles.css"*/

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link type="text/css" rel="stylesheet" href="cool-styles.css">
        <!-- Here's my linked stylesheet -->

        <title>Cool Website Name Here</title>
    </head>

    <body>
        <div id="someDIV"></div>
    <body>
</html>

JS:

function print(message){
    var output = document.getElementById("someDiv");
    output.innerHTML = message;
}

var html = "";
html += "<p>Look Ma, dyna,ic html from a javascript document</p>"; //Although JS just sees this as random characters.
html += "<p>What's cool is how I inherit the same styles as they do</p>";
print(html);

//When added to the html document, the document sees those angle brackets and converts whatevers inside to html. Regardless of where it came from! And since all the html document sees is html, it also gives them styling from the linked css file

Hope this helps. Good Luck!

How about an upvote for all this typing. ;)