Where write style code in HTML web page?

V

Vivek

Places To Write Style Code on Webpage

In an HTML web page, we have three major options for where to write the style code first one is "Inline Style", Internal Style, and External Style.

  1. Inline Style
  2. Internal Style
  3. External Style

1. Inline Styles

In Inline style, you can apply styles directly to individual HTML elements using the style attribute that will only affect that specific element, for example:

Syntax Example

<!DOCTYPE html>

<html>

<head>

  <title>Web Page</title>

</head>

<body>

  <h1 style="color: blue;">Hello, World!</h1>

</body>

</html>

2. Internal styles

In Internal style, you can define CSS styles in the <style> element within the <head> section of the HTML document which allows you to write multiple styles that apply to various elements on the page, for example:

Syntax Example

<!DOCTYPE html>

<html>

<head>

  <title>Web Page</title>

  <style>

    body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; }

    h1 { color: #0066cc; }

  </style>

</head>

<body>

  <h1>Hello, World!</h1>

</body>

</html>

3. External Styles

And in External style, You can create a separate CSS file with all your styles and link it to your HTML document using the <link> element, this mostly uses in larger projects that keep HTML and CSS code separated and make it easier to maintain and reuse styles across multiple pages, for example:

Syntax Example

/* styles.css */

body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; }

h1 { color: #0066cc; }

/* HTML code */

<!DOCTYPE html>

<html>

<head>

  <title>Web Page</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>

  <h1>Hello, World!</h1>

</body>

</html>

1 votes

Your Answer

Email Us: advertise@gdatamart.com

Donate Us: Support to GDATAMART

LifeStyle & Fun

© 2024 GDATAMART.COM (All Rights Reserved)