Previous

HTML: Style

In HTML, you can apply styles to your elements using either inline styles, internal stylesheets, or external stylesheets. Here's a brief overview of each method:

Inline Styles: Inline styles are applied directly to individual HTML elements using the style attribute. This method is useful for applying specific styles to a single element.

Here's an example:

<p style="color: red; font-size: 18px;">This is a paragraph with inline styles.</p>

In this example, the color and font-size styles are applied directly to the <p> element using inline styles.

Internal Stylesheet: Internal stylesheets are defined within the <style> element in the <head> section of your HTML document. This method is useful for applying styles to multiple elements within the same HTML document.

Here's an example:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Internal Stylesheet Example</title>
 <style>
   body {
     font-family: Arial, sans-serif;
   }
   h1 {
     color: blue;
   }
   .highlight {
     background-color: yellow;
   }
 </style>
</head>
<body>
 <h1>Welcome to my website</h1>
 <p class="highlight">This paragraph has a yellow background.</p>
 <p>This paragraph has the default font family.</p>
</body>
</html>

In this example, styles for the <body>, <h1>, and .highlight class are defined within the <style> element.

External Stylesheet: External stylesheets are created in separate CSS files and linked to the HTML document using the <link> element in the <head> section. This method is useful for applying styles across multiple HTML documents.

Here's an example : styles.css

body {
 font-family: Arial, sans-serif;
}
h1 {
 color: blue;
}
.highlight {
 background-color: yellow;
}

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 Stylesheet Example</title>
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <h1>Welcome to my website</h1>
 <p class="highlight">This paragraph has a yellow background.</p>
 <p>This paragraph has the default font family.</p>
</body>
</html>

In this example, the styles are defined in an external CSS file named styles.css, and it's linked to the HTML document using <link rel="stylesheet" href="styles.css">.

Each of these methods has its advantages depending on the complexity and scope of your styling needs.

Previous