How do i insert a CSS style sheet

We know the syntax of CSS before, but in order to display the effect in the browser, we should let the browser recognize and call. When the browser reads the style sheet, read it in text format, here are four ways to insert a style sheet on a page: link to an external style sheet, an internal style sheet, import a foreign style sheet, and an inline style.

1. Link to external style sheet

The link to an external style sheet is to save the stylesheet as a style sheet file, and then link the style sheet file with the <link> tag in the page, which must be placed in the

……
<link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
……


The above example indicates that the browser reads the defined style sheet in document format from the Mystyle.css file. Rel= "stylesheet" refers to the use of this external style sheet in a page. Type= "Text/css" means that the type of the file is the style sheet text. Href= "Mystyle.css" is where the file is located. Media is the choice of medium type, these media include: screen, paper, Speech synthesis equipment, Braille reading equipment.

An external style sheet file can be applied to multiple pages. When you change the style sheet file, the style of all the pages changes. It is useful when making lots of web sites with the same style pages, not only reducing the amount of repetitive work, but also being helpful for later revisions, edits, and less repetitive downloading of code when browsing.

The style sheet file can be opened and edited with any text editor (for example, Notepad), and the general style sheet file extension is. css. The content is a defined style sheet and contains no HTML tags, mystyle.css the contents of this file are as follows:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
/*定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件*/

2. Internal style sheet

The internal style sheet is where the stylesheet is placed in the

……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……


Note: Some of the lower versions of browsers do not recognize the style tag, which means that a lower version of the browser ignores the contents of the style tag and displays the contents of the style tag directly to the page as text. To avoid this, we use HTML annotations (<!--annotation-->) to hide content without displaying it:

……
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
……