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

HTML

Posted by ab199
.a{fill-rule:evenodd;}techdegree
ab199
Full Stack JavaScript Techdegree Student 17,446 Points

How do you add custom styles for HTML iframes?

I'd like to know if it's, at all, possible to add custom styling to iframe content. I'm getting data from a site and I need to apply my own custom styling to make it look nice. Specifically, this is an MLS/IDX iframe from the real estate MLS service.

2 Answers

Gordon Reeder
Gordon Reeder
2,521 Points
Gordon Reeder
Gordon Reeder
2,521 Points

I used to be a Realtor so I can answer this. THe MLS sends regular updates to various 3rd party listing services which subscribe to the feed. I don't know what the format of the feed is. And, I'm pretty sure that the MLS makes it difficult to query their servers directly.

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,242 Points
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

As far as I understand, you can style the actual iframe element (like its margins and border colour and such), but you cannot style elements inside the iframe unless it comes from the same domain.

ab199
.a{fill-rule:evenodd;}techdegree
ab199
Full Stack JavaScript Techdegree Student 17,446 Points

Thank you for your reply. I've been having a hard time styling the content. It looks really ugly, so I got rid of the iframe. I heard that sites like Zillow, Trulia, and Redfin take their listings from the MLS. However, their content looks really nice and presentable. I would like nothing more than a website that looks professionally made. How do they do it?

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

They are likely using some sort of database or API (application programming interface) to request data, which is retrieved as JSON data and then served to their page as normal HTML elements and styled. You can try searching for "MLS API" and the country for which listings you want, and you might be able to find something. Other than that, you will not be able to draw data from other sites through iframes and present it with your own styling.