一，效果图。
二，代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html css</title>
<!--html使用样式-->
<style type="text/css">
h1 {
color: red;
}
p {
color: blue;
}
</style>
<!--链接到一个外部样式表-->
<link rel="stylesheet" type="text/css" href="styles.css">
<!--内部样式表-->
<style type="text/css">
body {
background-color: yellow;
}
p {
color: blue;
}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body style="">
<h1>This is heading</h1>
<p>This is paragraph</p>
<!--style属性制作一个没有下划线的链接-->
<a href="http://www.baidu.com" style="text-decoration:none">百度</a>
<h1>I am formatted with an external style sheet</h1>
<p>Me too</p>
<!--内联样式-->
<p style="color:blue;margin-left=20px;">this is a paragraph</p>
<!--背景颜色-->
<h2 style="">this is a heading</h2>
<p style="">this is a paragraph.</p>
<!--字体，字体颜色，字体大小-->
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
<!--文本对齐方式-->
<h1 style="text-align:center;">Center-aligned heading</h1>
<p> this is a paragraph</p>
</body>
</html>
参考资料：《菜鸟教程》