Home > Article > Web Front-end > How to embed css into html?

How to embed css into html?

青灯夜游Original: 2019-05-18 16:38:107666browse

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

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

2. Use the c9ccee2e6ea535a969eb3f532ad9fe89 tag in the 93f0f5c25f18dab9d176bd4f6de5d30e 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 6c04bd5ca3fcae76e30b72ad730ca86d and e388a4556c0f65e1904146cc1a846bee. 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.

<p style="color:red;">Some red text</p>

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 tag687c2c06e5a4995392a66a2c50c231d2 < ;/ 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.

<head>
   <style type="text/css"> 
       h1 { color: red; }
   </style>
</head>

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;}

Then you can use be98b57125ed9b2d8fbe917c785e8d94 The header is introduced to take effect.

<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style">
</head>

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.

The above is the detailed content of How to embed css into html?. For more information, please follow other related articles on the PHP Chinese website!

css html class 选择器样式表 http

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does css right mean?Next article：What does css right mean?

See more

How to embed css into html?

Related articles