Methods for Applying CSS Styles to HTML Documents
The Role of CSS in Web Development
HTML provides the structural foundation of a web page, defining the elements and their arrangement. However, HTML alone produces a basic, unstyled layout. CSS (Cascading Style Sheets) is used to enhance and style these HTML elements, controlling their visual presentation including colors, fonts, spacing, and positioning. This separation of content (HTML) from presentation (CSS) imrpoves code maintainability and reduces coupling.
The Relationship Between HTML and CSS
HTML is the primary technology for creating the page structure and content. CSS is then applied to style and format that existing HTML structure. The two technologies are complementary and work in tandem.
Understanding CSS Terminology
CSS stands for Cascading Style Sheets.
- Cascading: Refers to the way multiple style rules can apply to the same element, with specific rules overriding more general ones.
- Style Sheets: Collections of style rules that define how elements should be displayed.
Three Methods for Applying CSS
1. Inline Styles
Inline styles are applied directly to an individual HTML element using the style attribute. Multiple style declarations are separated by semicolons.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inline Style Example</title>
</head>
<body>
<h1 style="color: crimson; font-family: 'Arial', sans-serif;">This is a styled heading</h1>
</body>
</html>
2. Internal Styles (Embedded Styles)
Internal styles are defined within a <style> element placed inside the document's <head> section. Rules target elements using selectors.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Internal Style Example</title>
<style>
.page-heading {
color: navy;
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1 class="page-heading">This heading uses internal styles</h1>
</body>
</html>
3. External Styles
This method involves creating a separate file with a .css extension to hold all style rules. The CSS file is then linked to the HTML document using the <link> element.
external-styles.css
.main-title {
color: darkgreen;
font-family: 'Verdana', Geneva, sans-serif;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>External Style Example</title>
<link rel="stylesheet" type="text/css" href="external-styles.css">
</head>
<body>
<h1 class="main-title">This heading uses an external stylesheet</h1>
</body>
</html>
Recommended Practice and Priority
In professional develompent, External Styles are the most commonly used and recommended approach. They fully achieve the separation of concerns, making styles reusable across multiple pages and easier to manage.
When multiple styles from different methods target the same element, CSS follows the cascading order and specificity rules. Generally, styles declared "closer" to the element take precedence in a conflict, often summarized as "inline > internal > external," but specificity is the formal rule.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Style Priority Example</title>
<style>
h1 { color: goldenrod; }
</style>
<link rel="stylesheet" href="styles.css"> <!--假设此文件定义 h1 { color: blue; }-->
</head>
<body>
<!-- The inline style has the highest specificity here -->
<h1 style="color: firebrick;">This text will be firebrick red</h1>
</body>
</html>
