Include css stylesheet HTML page
css style sheet can be added to html pages using below three ways:
- Inline style sheet: This style sheet applied to single tag only and will be specific to the tag.
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Sample html page</title> </head> <body> <h2 style="font-family: sans-serif;color: green;background-color: yellowgreen;">Sample HTML page</h2> </body> </html>
Output:
- Internal style sheet: This style use in single document which its own style and this can be define in the head section of the page as below:
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Sample html page</title> </script> <style type="text/css"> h2{ font-family: sans-serif; color: green; background-color: yellowgreen; } </style> </head> <body> <h2>Sample HTML page</h2> </body> </html>
Output:
- External style sheet: When you want to apply css style to multiple file then external file is ideal where you can change look of the entire web site using one single file. Sample shown below:
Html page:
<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Sample html page</title> <link rel="stylesheet" type="text/css" href="css/sample.css"> </head> <body> <h2>Sample HTML page</h2> </body> </html>
- css file inside css folder:
h2{ font-family: sans-serif;color: green;background-color: yellowgreen; }
Output:
