Styles in HTML can enhance the appearance of your web pages. This tutorial covers three primary ways to apply styles: inline styles, embedded styles, and external stylesheets.
HTML Styles Tutorial
1. Inline Styles
Inline styles are applied directly to an HTML element using the style attribute. This method is useful for quick styling of individual elements.
<p style="color: blue; font-size: 20px;">This is a paragraph with inline styles.</p>
This example demonstrates how to set the text color to blue and the font size to 20 pixels.
2. Embedded Styles
Embedded styles are defined within a <style> tag in the <head> section of the HTML document. This method is useful for styling multiple elements on a single page.
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is a paragraph styled with embedded CSS.</p>
</body>
This example shows how to style all <p> elements on the page with green text and a font size of 18 pixels.
3. External Stylesheets
External stylesheets allow you to define styles in a separate CSS file, which can be linked to multiple HTML documents. This method promotes consistency and easier maintenance.
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p class="styled">This is a paragraph styled with an external stylesheet.</p>
</body>
In this example, the styles for the <p class="styled"> element would be defined in a separate file called styles.css.
4. Conclusion
Choosing the right method for applying styles depends on your needs. Inline styles are great for quick fixes, embedded styles are useful for single pages, and external stylesheets are best for maintaining a consistent look across multiple pages.
0 Interaction
2.5K Views
24 Likes
×
