DEV Community

Cover image for how to use inline, internal, and external CSS in HTML
Sudhanshu Gaikwad
Sudhanshu Gaikwad

Posted on

how to use inline, internal, and external CSS in HTML

#programming #beginners #html #css

1.Inline CSS:
Inline CSS is applied directly to HTML elements using the styleattribute.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudhanshu Developer</title> </head> <body> <h1 style="color: blue; text-transform: uppercase;">Sudhanshu Developer</h1> <p style="font-size: 16px; color: gray;">This is an example of inline CSS.</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

2.Internal CSS:
Internal CSS is defined within a <style> tag inside the <head> section of the HTML file 📂.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudhanshu Developer</title> <style> h1 { color: green; text-transform: uppercase; } p { font-size: 18px; color: darkgray; } </style> </head> <body> <h1>Sudhanshu Developer</h1> <p>This is an example of internal CSS.</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

3.External CSS:
First Create the style.css file write the required CSS code in this file and link the <link rel="stylesheet" href="styles.css"> file in the index.html document By Using the <link> tag.

/* styles.css */ h1 { color: red; text-transform: uppercase; } p { font-size: 20px; color: darkblue; }
Enter fullscreen mode Exit fullscreen mode

index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudhanshu Developer</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Sudhanshu Developer</h1> <p>This is an example of external CSS.</p> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)