Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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. ;)