Home > Common Problem > body text

How to add css style to html

百草
Release: 2023-11-01 10:27:32
Original
1316 people have browsed it

htmlThe ways to add css styles include inline styles, internal style sheets and external style sheets. Detailed introduction: 1. Inline styles are written directly inside HTML elements and defined through the style attribute. This method is suitable for style definition of a single element. It is not recommended for widespread use in large projects because it will make the HTML code confusing. , difficult to maintain; 2. The internal style sheet is placed in the "" tag of the HTML document and defined using the "

这是一段红色的文本。

Copy after login

External style sheet:

The external style sheet is an independent CSS file that is referenced in the HTML file through the tag. This is the most recommended method because it keeps style and content separated, improving code maintainability. At the same time, external style sheets can be referenced in multiple HTML files to achieve code reuse.

Suppose we have a CSS file named styles.css with the following content:

p {  
  color: red;  
}
Copy after login

The code to reference the CSS file in the HTML file is as follows:

  
  
  
    

这是一段红色的文本。

Copy after login

In the above In the code, the href attribute specifies the path to the CSS file. If the CSS file and HTML file are in the same directory, you can use the file name directly. If they are not in the same directory, you need to provide a relative path or an absolute path.

In addition to the above three methods, you can also use the @import statement to reference CSS styles. The @import statement can be used anywhere in an HTML document, but it is usually placed within the tag. When using the @import statement, you need to specify the path of the CSS file to be imported.

Sample code:

  
  
  
    

这是一段红色的文本。

Copy after login

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

Related labels:
source:php.cn
Statement of this Website
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 [email protected]
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!