To add CSS to your HTML document, there are a few different methods you can use:
Inline CSS: Inline styles are added directly to the HTML elements using the style attribute. Here's an example:
html
<p style="color: blue;">This is a paragraph with blue text color.</p>
Internal CSS: Internal styles are added within the <style> tags in the <head> section of your HTML document. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph with blue text color.</p>
</body>
</html>
External CSS: External styles are defined in a separate CSS file and linked to your HTML document using the <link> tag. The CSS file should have a .css extension. Here's an example:
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph with blue text color.</p>
</body>
</html>
styles.css:
p {
color: blue;
}
When using an external CSS file, make sure that the CSS file (styles.css in this example) is in the same directory as your HTML file, or provide the correct path to the CSS file if it's in a different location.
Using external CSS files is generally the preferred method as it allows for better organization, reuse of styles across multiple pages, and easier maintenance of styles.
Remember that the CSS rules you define will be applied to the corresponding HTML elements based on the selectors you use. By adding CSS to your HTML document, you can control the visual presentation and styling of your web page.