html:
<!DOCTYPE html>
<html>
<head>
<title>My webpage</title>
</head>
<body>
<div>
<h1>My first div</h1>
<p>This div uses inline CSS to style its content.</p>
<style>
h1 {
color: red
}
p {
font-size: 16px
text-align: center
}
</style>
</div>
<div>
<h1>My second div</h1>
<p>This div uses an external CSS file to style its content.</p>
<link rel="stylesheet" type="text/css" href="styles.css">
</div>
<div>
<h1>My third div</h1>
<p>This div uses an embedded style sheet to style its content.</p>
<style>
/* This is an embedded style sheet */
h1 {
color: blue
}
p {
font-size: 14px
text-align: left
}
</style>
</div>
</body>
</html>
style.css:
/* This is an external style sheet */
h1 {
color: green
}
p {
font-size: 18px
text-align: right
}
这段代码中，第一个div使用内联CSS来样式其内容，第二个div使用外部CSS文件来样式其内容，第三个div使用嵌入式样式表来样式其内容。
HTML代码和CSS代码有什么区别:第一种方法：通用方法
1、打开浏览器右键查看源码代码
2、打开一个网页，在该网页中点击左键，如图
3、点击查看源代码，如图，看到了吗，这一大堆字母就是你这个网页的源代码了。
4、上面那个太复杂了，点击工具，点击开发者工具，如图，
5、这样就可以见到更简截的源代码了，如图。
第二种方法：在IE浏览器中查看
1、
2、用IE浏览器打开一个页面，如图。点击网页，
3、点击查看源文件，如图
这样就看到了这个网页的源代码了，如图
4、这个太复杂了看不懂，同样可以看到简截的，点击工具，如图
点击开者工具，如图
5、在这里就看到了HTML代码和CSS代码，如图
