How to call css in html-Front-end Q&A-php.cn

How to call css in html

WBOY

Release： 2023-05-05 22:11:05

Original

2699 people have browsed it

HTML (HyperText Markup Language) is the markup language of web pages, while CSS (Cascading Style Sheets) is the language used to define the style and layout of web pages. In web development, both HTML and CSS play important roles. HTML is responsible for the definition of web page structure and elements, while CSS is used to control the style of elements. This article will introduce how HTML calls CSS styles.

1. Internal Style

In HTML, CSS can be defined by using the <style> tag in the <head> tag style, this is called "internal style". The specific steps are as follows:

Add the <style> tag in the <head> tag.
Define CSS styles in <style> tags.
Use the style attribute in HTML elements to call CSS styles.

For example, the following code defines a red title and applies it to the <h1> tag:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1 style="color: red;">Hello, World!</h1>
</body>
</html>

Copy after login

External style

In addition to internal styles, CSS files can also be used externally. External styles place all CSS style definitions in a separate file and then reference that file using links in the HTML. The specific steps are as follows:

Create a CSS file and define the style.
Use the <link> tag in HTML to link CSS files.

For example, we can save the CSS style in the above example in a file named style.css, and then use <link&gt in the HTML file The ; tag links them as follows:

index.html File:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Copy after login

style.css File:

h1 {
  color: red;
}

Copy after login

Inline Style

Inline styles are also a way to call CSS styles, but unlike internal styles, inline styles are CSS styles that are applied directly to the style attribute of the HTML element. This means that individual styles can be defined in HTML tags without the need to define styles in the <head> tag or use an external CSS file. However, inline styles are not recommended because they increase the size of the HTML file and reduce readability, and are difficult to maintain.

For example, the following code defines a red title and applies it to the <h1> tag:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 style="color: red;">Hello, World!</h1>
</body>
</html>

Copy after login

Summary

In In HTML, CSS styles can be called in three ways: internal styles, external styles, and inline styles. Among them, internal styles apply to a single page or application, external styles can be used by multiple pages or applications, and inline styles apply to specific styles on a single element. In actual applications, the appropriate way to call CSS styles should be selected according to needs and situations to optimize performance and improve development efficiency.

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