To use CSS (Cascading Style Sheets) in HTML documents, you can follow these methods:
Inline CSS: Apply styles directly to HTML elements using the style attribute.
Example:
<p style="color: red; font-size: 20px;">This is a red text with a font size of 20 pixels.</p>
Internal CSS: Include a <style> element within the <head> section of your HTML document to define styles for the entire page.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>This is a blue text with a font size of 16 pixels.</p>
</body>
</html>
External CSS: Create a separate CSS file (e.g., styles.css) and link it to your HTML document using the <link> element within the <head> section.
Example (styles.css):
p {
color: green;
font-size: 18px;
}
Example (index.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a green text with a font size of 18 pixels.</p>
</body>
</html>
For hosting and serving your CSS files efficiently, especially in a dynamic web application context, consider leveraging cloud services like Tencent Cloud's Object Storage (COS), which offers high-speed, secure, and reliable storage for your static files, including CSS, JavaScript, and images.