2.1 External Stylesheets
Connecting CSS (Cascading Style Sheets) to an HTML document lets you style web pages, making them look better and easier to use. There are several ways to connect CSS to HTML, each with its own benefits and suited for different situations.
Ways to connect CSS:
- External Stylesheets
- Internal Stylesheets
- Inline Styles
External Stylesheets
External Stylesheets are separate CSS files linked to the HTML document using the <link> tag. This method lets you separate styles from document structure, simplifying style management and CSS file reuse across multiple pages.
Benefits:
- Convenient style management
- Reuse styles on multiple pages
- Improved caching and performance
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of External Stylesheet</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Header</h1>
<p>Text</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of External Stylesheet</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Header</h1>
<p>Text</p>
</body>
</html>
Example of CSS file(styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 Internal Stylesheets
Internal Stylesheets are placed within the same HTML document in the <head> section using the <style> tag. This method is handy when styles are needed for just one page or when an external file is unavailable.
Benefits:
- Easy to use for one page
- No need for an extra file
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Internal Stylesheet</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>Header</h1>
<p>Text</p>
</body>
</html>
2.3 Inline Styles
Inline Styles are applied directly to HTML elements using the style attribute. This method is useful for quick testing or when you need to change the style of a specific element.
Benefits:
- Quick and targeted style application
- Great for dynamic changes via JavaScript
Drawbacks:
- Hard to manage styles with many elements
- Hard to reuse styles
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Inline Styles</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">Header</h1>
<p style="color: #666; background-color: #f4f4f4;">Text</p>
</body>
</html>
Example of using all methods on one page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of All CSS Connection Methods</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">Header</h1>
<p style="color: #666;">This text is styled using inline styles.</p>
</body>
</html>
2.4 Order of Style Priority
When styles are connected in different ways, their priority is determined like this:
- Inline Styles have the highest priority
- Internal Stylesheets are next in priority
- External Stylesheets have the lowest priority
If multiple styles with the same priority are applied to an element, the priority is determined by the specificity of the selector and the order of declaration.
Example of style priority:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Style Priority</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* Internal style */
}
</style>
</head>
<body>
<p style="color: red;">This text will be red due to the priority of inline style.</p>
</body>
</html>
GO TO FULL VERSION