<h1 style="color:purple">CSS is awesome</h1>
Inline styling in CSS enables applying styles directly to individual HTML elements using the style attribute. This approach is useful for quick, one-off styling changes without the need for external or internal stylesheets. For example, <p style="color: blue; font-size: 16px;">Hello, World!</p> applies blue text color and a font size of 16 pixels to a paragraph. While inline styling is convenient for small adjustments, it is generally discouraged for larger projects because it mixes content with presentation, making the code harder to maintain and less reusable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website</title>
</head>
<style>
h1 {
color: lightblue;
}
</style>
<body>
<h1>CSS Internal styling is awesome!</h1>
</body>
</html>
Internal styling in CSS involves embedding styles within a <style> block in the <head> section of an HTML document. This approach allows developers to define styles for multiple elements in one place, making it easier to manage and reuse styles across the document. Internal styling is more efficient than inline styling for larger projects, as it separates content from presentation and avoids repetitive code. However, it is still limited to the specific HTML document in which it is defined.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>External stylesheet is awesome!</h1>
</body>
</html>
CSS (style.css)
h1 {
color: crimson;
}
External CSS styling involves linking an external stylesheet to an HTML document using the <link> element in the <head> section. This approach enables defining styles in a separate .css file, which can be reused across multiple HTML pages, promoting consistency and maintainability. For example, <link rel="stylesheet" href="styles.css"> links an external stylesheet named styles.css to the HTML document. External styling is highly efficient for large projects, as it centralizes all styles in one place, making it easier to update and manage. It also separates content (HTML) from presentation (CSS).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 style="color:crimson">Cascading stylesheets</h1>
</body>
</html>
CSS
h1 {
color: blue;
}
Cascading Style Sheets (CSS) follow a cascading mechanism, where multiple styles can be applied to the same element, and the browser determines which style takes precedence based on specificity, importance, and source order. The cascade refers to the process of combining styles from different sources (inline, internal, external) and resolving conflicts to determine the final appearance of an element. Precedence in CSS is governed by the following rules:
style attribute) have the highest specificity.#id) have higher specificity than classes (.class) and attributes.p, div, etc.).*) and inherited styles have the lowest specificity.!important declaration overrides other styles, regardless of specificity. For example, color: red !important; will take precedence over other color declarations.