How to include CSS in HTML pages

WBOY
Release: 2023-09-19 18:57:02
forward
716 people have browsed it

We can include CSS in HTML pages in three ways. They are -

  • Inline

    Here we specify the CSS style in the style attribute of the element. However, it is recommended to modularize files via internal or external linking of CSS.

  • Inside

    We can include our CSS spec inside the

  • ExternalWe can use

    links to .css file tags that can be placed locally or on the server. By refactoring the file using its external links, we can have a common CSS file that can be used on multiple web pages.

Syntax

The syntax to include a CSS file in HTML is as follows

/*inline*/  /*internal*/   
/*external*/
Copy after login

Example

The following example illustrates how to include a CSS file In HTML Page

Inline CSS

Live Demonstration

   

Demo text here

Copy after login

Output

This gives the following output-

如何在 HTML 页面中包含 CSS

Example

Internal Link

Live Demonstration

    
Copy after login

Output

This gives the following output-

如何在 HTML 页面中包含 CSS

Example

External link

HTML file

Live demo

    
Copy after login

CSS file

div { margin: auto; padding: 15px; width: 33%; border: 2px solid; border-radius: 50%; } div > div { border-color: green; } div > div > div { border-color: red; }
Copy after login
Output

This gives the following output-

如何在 HTML 页面中包含 CSS

The above is the detailed content of How to include CSS in HTML pages. For more information, please follow other related articles on the PHP Chinese website!

source:tutorialspoint.com
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 admin@php.cn
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!