How to use CSS in HTML
CSS (Cascading Style Sheets) is used in HTML to control the presentation, layout, and styling of web pages. CSS allows you to separate the content of a webpage (HTML) from its visual design, making it easier to maintain and update.
There are three primary ways to use CSS in HTML:
1. Inline CSS
Inline CSS is applied directly to an HTML element using the style attribute. This method is useful for quick styling or when you need to apply a unique style to a single element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Welcome to My Website</h1>
<p style="font-size: 16px; color: gray;">This is an example of inline CSS.</p>
</body>
</html>
2. Internal CSS
Internal CSS is placed within a <style> element in the <head> section of the HTML document. This method is useful when you want to apply styles to a single HTML page.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: gray;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of internal CSS.</p>
</body>
</html>
3. External CSS
External CSS is written in a separate .css file and linked to the HTML document using the <link> element in the <head> section. This method is the most efficient way to style multiple HTML pages consistently.
Example
1. Create a CSS file (styles.css):
/* styles.css */
body {
background-color: lightgray;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 16px;
color: gray;
}
2. Link the CSS file in the HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of external CSS.</p>
</body>
</html>
Advantages of Each Method
Inline CSS:
- Quick and easy for small, unique style changes.
- Ideal for testing or applying styles to a single element.
Internal CSS:
- Useful for styling a single page with consistent styles.
- Keeps styles in one place, making it easier to manage than inline styles.
External CSS:
- Ideal for larger websites with multiple pages.
- Allows for a consistent look across all pages.
- Makes the HTML cleaner and separates content from design.
Combining CSS Methods
You can combine these methods, but be aware that they follow a specific order of precedence:
- Inline CSS has the highest priority.
- Internal CSS (within a
<style>tag) comes next. - External CSS (linked via
<link>) has the lowest priority.
If a style is defined in multiple places, the one with the highest priority will be applied.
Example of Combining Methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combining CSS Methods</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<h1 style="color: green;">Welcome to My Website</h1>
<p>This paragraph is styled using multiple CSS methods.</p>
</body>
</html>