In CSS, there are three ways to apply styles to HTML elements: external, internal, and inline.
- External CSS:
External CSS is when you create a separate CSS file and link it to your HTML document. This way, you can apply styles to multiple pages by linking to the same external CSS file. To create an external CSS file, create a new file with the .css extension and save it in the same directory as your HTML file. Then, link to the CSS file from your HTML file using the <link> tag in the <head> section of your HTML document.
Example of linking to an external CSS file:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello, world!</h1> <p>This is a paragraph.</p> </body> </html>
- Internal CSS:
Internal CSS is when you include CSS styles in the <head> section of your HTML document using the <style> tag. This way, you can apply styles to specific pages without having to create a separate CSS file. Internal CSS is useful for small-scale projects where you only need to apply styles to a few elements.
Example of internal CSS:
<!DOCTYPE html> <html> <head> <style> h1 { color: blue; } p { font-size: 16px; } </style> </head> <body> <h1>Hello, world!</h1> <p>This is a paragraph.</p> </body> </html>
- Inline CSS:
Inline CSS is when you apply styles directly to individual HTML elements using the "style" attribute. This way, you can apply styles to specific elements without having to create a separate CSS file or include styles in the <head> section of your HTML document. Inline CSS is useful for making quick changes to specific elements, but it can be time-consuming and difficult to maintain on a larger scale.
Example of inline CSS:
<!DOCTYPE html> <html> <head> </head> <body> <h1 style="color: blue;">Hello, world!</h1> <p style="font-size: 16px;">This is a paragraph.</p> </body> </html>
Comments
Post a Comment