search

Home >Web Front-end >CSS Tutorial >How to include CSS in HTML pages

How to include CSS in HTML pages

WBOY
WBOYforward
2023-09-19 18:57:02831browse

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*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

Example

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

Inline CSS

Live Demonstration

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:mistyrose; height: 50px;"></div>
<p style="letter-spacing: 16px; font-size: 1.3em;">
<u>Demo text here</u>
</p>
</body>
</html>

Output

This gives the following output-

如何在 HTML 页面中包含 CSS

Example

Internal Link

Live Demonstration

<!DOCTYPE html>
<html>
<head>
<style>
table, table *{
   border: 5px double green;
   margin: auto;
   padding: 20px;
}
tr {
   box-shadow: 0 0 0 3px red;
}
td {
   border-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Output

This gives the following output-

如何在 HTML 页面中包含 CSS

Example

External link

HTML file

Live demo

<!DOCTYPE html>
<html>
<head>
<link rel=&rdquo;stylesheet&rdquo; type=&rdquo;text/css&rdquo; href=&rdquo;style.css&rdquo;>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

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;
}

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!

css html 重构
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to make a div element appear inline using CSS?Next article：How to make a div element appear inline using CSS?

Related articles

See more