Internal CSS

样式 Styles（行间距、字间距、背景色、文字颜色、文字字体、文字对齐、文字大小等）

Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

HTML Background Color
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue.

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

HTML Text Color
The color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

HTML Fonts
The font-family property defines the font to be used for an HTML element:

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

HTML Text Size
The font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

CSS Border
The CSS border property defines a border around an HTML element:

p {
    border: 1px solid powderblue;
}

CSS Padding
The CSS padding property defines a padding (space) between the text and the border:

p {
    border: 1px solid powderblue;
    padding: 30px;
}

CSS Margin
The CSS margin property defines a margin (space) outside the border:

p {
    border: 1px solid powderblue;
    margin: 50px;
}

The id Attribute
To define a specific style for one special element, add an id attribute to the element:

<p id="p01">I am different</p>

then define a style for the element with the specific id:

#p01 {
   color: blue;
}

<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
    color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>

Note: The id of an element should be unique within a page, so the id selector is used to select one unique element!

The class Attribute
To define a style for a special type of elements, add a class attribute to the element:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

p.error {
    color: red;
}

<!DOCTYPE html>
<html>
<head>
<style>
p.error {
    color: red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>

Summary

Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
The id Attribute
The class Attribute

Internal CSS

样式 Styles（行间距、字间距、背景色、文字颜色、文字字体、文字对齐、文字大小等）

推荐阅读更多精彩内容