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

How to add css to html

PHPz

Release： 2023-04-24 09:53:52

Original

3096 people have browsed it

In web development, HTML is the language responsible for web content, while CSS is the language responsible for web style. HTML and CSS are interdependent, and CSS adds better style and layout effects to web pages. So, how to add CSS to HTML? The following article will introduce in detail the following aspects:

Inline style
Internal style sheet
External style sheet
Import style sheet

1. Inline style

Inline style is to place the CSS style sheet directly within the HTML element, and set the CSS style through the style attribute of the HTML tag. For example:

<p style="color: red;">这是一个段落</p>

Copy after login

In the above code, we set the red font to the paragraph tag p through the style attribute.

However, the use of inline styles is limited because it can only be applied to specific HTML elements alone. Of course, it is not conducive to the maintenance and management of large websites. Therefore, we generally do not recommend the use of inline styles. .

2. Internal style sheet

The internal style sheet places the style code in the style tag in the head tag. The style is only valid on the current page and cannot be used on other pages. Can be used to set the style for a specific page or pages.

The example is as follows:

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
         }
      </style>
   </head>
   <body>
      <p>这是一个段落</p>
   </body>
</html>

Copy after login

In the above code, we put the style inside the head tag and set the font color of element p to red (#FF0000), thereby changing the font in the paragraph color.

3. External style sheet

External style sheet stores CSS code in an external CSS file, and then links it to the HTML file through the link tag. This method allows you to define the style rules in a separate style sheet and then apply them to multiple HTML pages.

The sample code is as follows:

CSS file (style.css):

p {
   color: red;
}

Copy after login

HTML code:

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <p>这是一个段落。</p>
   </body>
</html>

Copy after login

Through the above code, we can go to "style .css" file, so we can use the same style code on multiple pages.

4. Import style sheet

The function of imported style sheet is roughly the same as that of external style sheet, but it imports CSS files through @import tag. The sample code is as follows:

<!DOCTYPE html>
<html>
   <head>
      <style>
         @import url(style.css);
      </style>
   </head>
   <body>
      <p>这是一个段落。</p>
   </body>
</html>

Copy after login

The above code is similar to the external style sheet method. It places the style code in an external CSS file (such as "style.css"), but uses the @import tag to import the CSS file. into the HTML file.

Summary:

For web design and development, CSS and HTML are both very important languages, and they are interdependent. In HTML, we can add CSS styles in four ways: inline styles, internal style sheets, external style sheets, and imported style sheets. Different methods have different advantages and disadvantages in different situations. Developers need to make choices based on actual conditions.

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