Introduction:
- Using HTML, we can create only plain web pages.
- We use CSS to apply styles to HTML pages such as text-colors, background-colors, borders, alignments and many more.
We can apply styles to HTML elements in 3 ways
- Using style attribute
- Using <style> tag in head location
- Using external CSS file
Using Style Attribute: To apply different styles to different elements in single HTML document.
| <html> <head> <title> Headings </title> </head> <body> <h1 style=”color:red”> Web Technologies </h1> <h2 style=”color:blue”> HTML </h2> <h2 style=”color:blue”> CSS </h2> <p style=”color:green”> CSS is used to apply styles </p> </body> </html> |
Using <style> tag in head location: When we want to apply same styles to multiple HTML elements in Single page.
| <html> <head> <title> Headings </title> <style> h1{ color:red; } h2{ color:blue; } p{ color:green; } </style> </head> <body> <h1 style=”color:red”> Web Technologies </h1> <h2 style=”color:blue”> HTML </h2> <h2 style=”color:blue”> CSS </h2> <p style=”color:green”> CSS is used to apply styles </p> </body> </html> |
External CSS files: When we want to apply same styles to all elements in different web pages. This process is called “Code centralization”
CSS file:
- Write CSS code into text file.
- Save with .css extension.
- Connect CSS file from HTML using <link> tag in head location
Mystyle.css:
| h1{ color:red; } h2{ color:blue; } p{ color:green; } |
Web.html:
| <!doctype html> <html> <head> <link rel=”stylesheet” href=”Mystyle.css”/> </head> <body> <h1 style=”color:red”> Web Technologies </h1> <h2 style=”color:blue”> HTML </h2> <h2 style=”color:blue”> CSS </h2> <p style=”color:green”> CSS is used to apply styles </p> </body> </html> |