CSS series: How to introduce CSS in HTML

Source: Internet
Author: User

HTML and CSS are two different languages that work on a Web page, so you must link CSS with HTML. In HTML, there are 4 main ways to introduce CSS: inline, inline, import, and link-style.

1. In-line

Inline is the CSS style that is set in the tag's style property, which does not inherently reflect the benefits of CSS and is therefore not recommended.

In-line example:

<style= "font-size:12px; text-align:center;" > Inline methods for referencing CSS in HTML </div>

2. Embedded

Embedded in the page of the various elements of the settings set in the

Embedded Example:

<!DOCTYPE HTML><HTML><Head>    <Metaname= "Viewport"content= "Width=device-width" />    <title></title>    <styletype= "Text/css">Div{font-size:12px;text-align:Center;        }    </style></Head><Body>    <Div>Embedded methods for referencing CSS in HTML</Div></Body></HTML>

3. Import and Link-type

The purpose of importing and linking is to introduce a standalone CSS file into an HTML file, the difference being that the link uses HTML markup to introduce an external CSS file, whereas using an import is a rule that uses CSS to introduce an external CSS file.

Example of introducing an external CSS file using a linked style:

<href= "~/content/base.css"  rel= "stylesheet"  type = "Text/css" />

Example of introducing a CSS file using an import:

<type= "Text/css">    @import "/content/base.css"  </style>

The difference between the two-way display: When you use link, the CSS file is loaded before the body part of the page is loaded, so that the displayed page is styled from the beginning. When using the import, the whole page will load after the completion of the CSS file, for some browsers, in some cases, if the page file is larger, you will see a page with no style, flashing a bit after the effect of setting style. From the user experience, this is a flaw in using an import.

For some of the larger sites, for ease of maintenance, you might want to put all CSS styles in a few CSS files, so if you use the link, you need to import a few statements into the CSS file. If you want to adjust the classification of CSS files, you need to adjust the HTML file at the same time. This is a flaw in maintenance work. If you are using an import, you can introduce only one total CSS file, and then import the other standalone CSS files into this file.

If you only need to introduce a CSS file, the link is used, if you need to introduce more than one CSS file, the first link to the introduction of a "directory" CSS file, the "directory" CSS file used in the introduction of other CSS files.

However, if you want to dynamically decide which CSS file to introduce through JavaScript, you must use the link method to implement it.

CSS series: How to introduce CSS in HTML

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.