Explore how to call CSS

In front-end development, CSS is an integral part. CSS can help us add styles to web pages, make our pages more beautiful, and also make web pages more professional and easier for users to access. In this article, we will explore how to call CSS.

1. Inline style

CSS can be written in the tag of HTML. This type of CSS is called inline style. Inline styles are suitable for styling individual elements and have the highest priority.

// HTML code This is a div element

above In the example, we use inline styles to set the div's background color to red and the text color to white. It should be noted that inline styles should be used as little as possible, otherwise the HTML code will be lengthy and difficult to maintain.

2. Embedded style

CSS can also be written in the tag of the HTML document. This type of CSS is called embedded style. Inline styles are suitable for styling multiple elements and have medium priority.

// HTML code

div { background-color: blue; color: white; } p { font-size: 14px; }

这是一个 div 元素 这是一个 p 元素

In the above example, we use embedded styles to set the background color of the div to blue and the text color to white, while setting the font size of the p to 14px. It should be noted that embedded styles cannot be referenced externally, so they are not convenient for unified management.

3. External style sheet

The best way is to write CSS into an external style sheet, and then point to the external style sheet through a separate link. Doing so will not only make the HTML code more concise, but also better achieve unified management of styles.

// HTML code

这是一个 div 元素 这是一个 p 元素

// style.css code div {

background-color: green; color: white; } p {

font-size: 16px; }

In the above example, we will The CSS is written in a separate style.css file, which is then linked to the HTML document. It should be noted that external style sheets are suitable for styling the entire website and can be shared by multiple HTML documents.

Summary

Whether it is an inline style, an embedded style or an external style sheet, we can call CSS styles through them. However, we should choose different methods according to the actual situation.

Inline styles are suitable for styling individual elements; embedded styles are suitable for styling multiple elements; external style sheets are suitable for styling the entire website and can be used by multiple HTML documents Shared use.