| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
Inline CSS
Definition:
Inline CSS is used to apply styles directly to a specific HTML element using the ‘style‘ attribute. This method is useful for applying unique styles to individual elements.
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; font-size: 24px;">Hello, World!</h1>
<p style="color: green; text-align: center;">This is an example of inline CSS.</p>
</body>
</html>
In this example, the ‘h1‘ element has a blue color and a font size of 24px, while the ‘p‘ element has a green color and centered text alignment.
Internal CSS
Definition:
Internal CSS is used to define styles within a ‘<style>‘ element in the ‘<head>‘ section of an HTML document. This method is useful for applying styles to a single HTML document.
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>
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of internal CSS.</p>
</body>
</html>
In this example, the CSS rules within the ‘<style>‘ tag apply to the ‘h1‘ and ‘p‘ elements in the document.
External CSS
Definition:
External CSS involves linking an external stylesheet file to an HTML document. This method is useful for applying styles to multiple HTML documents by linking them to a common stylesheet.
Example:
styles.css (external stylesheet):
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
text-align: center;
}
index.html:
<!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>Hello, World!</h1>
<p>This is an example of external CSS.</p>
</body>
</html>
In this example, the ‘h1‘ and ‘p‘ elements are styled using the CSS rules defined in the external ‘styles.css‘ file.
- Inline CSS is easy to use and apply to specific elements but can become repetitive and hard to maintain for large projects.
- Internal CSS allows for better organization than inline CSS and is useful for single-page styles but can still become unmanageable in large projects.
- External CSS promotes reusability and separation of concerns, making it the best practice for large projects. It allows multiple HTML files to share the same styles, simplifying maintenance and updates.
