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.
- Inline Style
- Internal Style
- 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>