CSS Usage
CSS Usage （CSS用法）
There are 3 ways to add CSS styles to the HTML document. （有3种方法可以将CSS样式添加到HTML文档。）
Inline style - giving a style attribute to HTML elements （-内联样式-为HTML元素提供样式属性）
Internal style - using the <style> element in the <head> section
External style - creating an external CSS file （-外部样式-创建外部CSS文件）
Inline Style
Inline Style （内联样式）
For defining style rules, you can use a style attribute of any HTML element . You can apply these rules only to that element. The style attribute can contain any CSS property. （要定义样式规则，可以使用任何HTML元素的样式属性。您只能将这些规则应用于该元素。style属性可以包含任何CSS属性。）
Example of creating an inline style for an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 style="color:#1c87c9">Some heading</h2>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
</body>
</html>
Result
Now let’s explain the above mentioned example where we have used the Inline style. Inside <h2> tag we have written style=“color: #1c87c9”, which means that our title (heading) should be #1c87c9.
The same we have done with <p> tag. We have written color: #8ebf42; font-size: 15px inside our tag, which means that information between the opened <p> and closed </p> tag will be #8ebf42, and text size will be 15px.
Internal Style
Internal Style （内部样式）
With internal style, each HTML file contains the CSS code needed for styling a page. You simply put the CSS code within the <head> </head> tags of each HTML file you want to style. The example below illustrates this.
The changes you make will affect only one page. If you need to style more pages, you should make changes to them one by one. （您所做的更改只会影响一个页面。如果您需要设置更多页面的样式，则应逐一进行更改。）
The example below shows that the paragraph will be in white, and the page will be #1c87c9.
Example of creating an internal style for an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
p {
color: white;
}
</style>
</head>
<body>
<p>Some information</p>
</body>
</html>
External Style
External Style （外部样式）
External style is widely used to apply general styles to the entire website. It refers to creating an external CSS file that includes all style information. You can create such kind of file with any text or HTML editor such as “Notepad” or “Sublime text”. （外部风格被广泛用于将常规风格应用于整个网站。它指的是创建一个包含所有样式信息的外部CSS文件。您可以使用任何文本或HTML编辑器（如“记事本”或“崇高文本” ）创建此类文件。）
A CSS file contains only CSS, and you just save it with the .css file extension. To link an external stylesheet to a web page you should use <link> tag inside the <head> section of HTML document. Each web page should be linked to the stylesheet.
When using an external style sheet, all HTML files are linked to one CSS file resulting in a consistent look and feel. If you want to alter the style of the web pages, you only need to make corresponding changes in one .css file.
Example of creating an external style for an HTML document:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>