CSS Introduction:
- CSS stands for Cascading Style Sheets.
- CSS is used to apply styles to HTML elements
- 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.
| <!doctype html> <html> <body> <p style=”color:red”> First Paragraph </p> <p style=”color:blue”> Second Paragraph </p> <p style=”font-size:50px”> Third Paragraph </p> </body> </html> |
2. Using <style> tag in head location: When we want to apply same styles to multiple HTML elements in Single page.
| <!doctype html> <html> <head> <style> p{ color : red ; } h1{ color : blue ; } </style> </head> <body> <p> First Paragraph </p> <p> Second Paragraph </p> <h1> First Heading </h1> <h1> Second Heading </h1> </body> </html> |
3. 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
| p{ color : blue ; } h1{ color : red ; } |
Web.html:
| <!doctype html> <html> <head> <link rel=”stylesheet” href=”Mystyle.css”/> </head> <body> <p> First Paragraph </p> <p> Second Paragraph </p> <p> Third Paragraph </p> <h1> First Heading </h1> <h1> Second Heading </h1> <h1> Third Heading </h1> </body> </html> |