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

CSS

Posted by Wenqian Guo
Wenqian Guo
2,612 Points

<style> tags in html vs CSS

Hello, I just started watching the web dev track videos, in the first few videos the instructor used the <style> background-color: lightblue</style> to change the background color of the website. I thought CSS is for styling the webpage. I'm just wondering when exactly do we use CSS for styling and when do we use html. Thank you! :]

3 Answers

Steve Linn
Steve Linn
11,841 Points
Steve Linn
Steve Linn
11,841 Points

I think you mean "when should I use an external style sheet" and "when should I just style my stuff in-line on the HTML page"

If this is what you are asking here's my 2 cents

Try to use CSS external style sheets as much as possible. It makes it so much easier to make changes down the road. It's also a better way to construct a website.

I use in-line styles when I just need to change the style of one element and i know I will absolutely not need to do it again anywhere else.

I also use in-line styles for testing purposes. Things like changing background colors in-line can help me see how something will look when it's done

Kyle Brooks
Kyle Brooks
6,753 Points
Kyle Brooks
Kyle Brooks
6,753 Points

CSS stands for cascading style sheets. It is the piece that allows you to modify the HTML, or hypertext markup language. The HTML is basically the text and content, while the CSS is the design side.

The style tag is CSS, but it is called "in-line" when it is used inside of the html document. Generally, you would use a CSS style sheet to create all of your design and then link it into your html document. Example of link below: 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Smells Like Bakin' Cupcake Company</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
</head>

Hope that helps!

Wenqian Guo
Wenqian Guo
2,612 Points
Wenqian Guo
Wenqian Guo
2,612 Points

Yes, Thank you! That's exactly what I mean but I didn't know it's called "external style sheet" vs " in-line", your response makes me feel more comfortable :]