10 Jul Adding CSS
For website development, we need to work on the design and layout of the website. We need to add CSS to our website. Here, we will see two ways widely followed for adding CSS to the website.
Internal Styles
Use the internal stylesheet, if you need to add a specific style to a page. Define the rules inside the <style> element and it should be placed inside the <head> section. Here’s an example,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<head> <style> body { background-color: #d4e6f1; } p { color: #900C3F ; font-family: "Times New Roman"; font-weight: bold; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Output
External Styles
For adding an external stylesheet, you need to create one first. Take a new text file with a .css extension. Define the rules that you want and then save them. To add it to your web page, just use the <link> element.
Below you can see our external stylesheet name is style.css. You can name it whatever you like and define the styles inside it. To link it, use <link> element as shown below,
|
1 2 3 |
<link rel = "stylesheet" href="style.css"/> |
Here are our styles defined under,
style.css
|
1 2 3 4 5 6 7 8 9 10 11 |
body { background-color: #d4e6f1; } p { color: #900C3F ; font-family: "Times New Roman"; font-weight: bold; } |
No Comments