How to embed css into html?-CSS Tutorial-php.cn

There are three main ways to embed CSS styles into html:

1. Set the tag's attribute, called inline style;

2. Use the tag in the tag of HTML, called embedded style;

3. Create and Linking external CSS files, called external style sheets.

Basic style sheets usually modify the appearance of HTML tags such as and . When using CSS files or stylesheets in header files, we can also define style classes and apply them to any element using the class="?" attribute, but this is beyond the scope of this simple guide.

Inline style

Features:

1) Inline style is placed in the HTML element in the code.

2) When using inline styles, the styles will only affect the elements you select.

3), inline styles have no selectors

Note: Inline styles defined in HTML only apply to the tags they are added to.

Some red text

Copy after login Advantages:

1. Very useful if you want to test and preview changes.

2. Very useful for quick repair.

3. Reduce HTTP requests.

Disadvantages:

Inline CSS must be applied to every element.

Embedded style

Features:

1), placed in the style tag &lt ;/ style> written in the head section of the web page.

2), the style written will be used only for the web page you use it on.

3), embedded styles are also called "internal styles"

The styles defined in the header will be applied to the entire page. The example below will make all h1 tags in the page display the title in red.

h1 { color: red; } Copy after login Advantages:

1. The style sheet only affects one page.

2. Internal style sheets can use classes and IDs.

3. No need to upload multiple files. HTML and CSS can be in the same file.

Disadvantages:

1. Increase page loading time.

2. It only affects one page - useless if you want to use the same CSS on multiple documents.

External Style Sheets

Like HTML files, CSS files are plain text and usually have a .css file extension; they can be linked via specific tags into the HTML file.

Features:

1), written in a separate document and then attached to various Web documents

2), modifying it can affect all pages you call

3), easy to modify

For example, the content of the style.css file can be as follows:

body { background-color: beige; color: #000080;} h1 { color: red;} Copy after login Then you can use The header is introduced to take effect.

Copy after login Advantages:

1. The size of the HTML page is smaller and the structure is clearer.

2. Faster loading speed.

3. The same .css file can be used on multiple pages.

Disadvantages:

The page may not render correctly until external CSS is loaded.