19 Aug How to use Stylesheet in HTML
On a web page, use the CSS Stylesheet to specify style properties, for example, changing font color, font size, background color, etc. Let us see how style property is set on an element. Here, for our example, we are setting style for <body> element:
As we can see above, each property has a name and a value, separated by a colon (:).
CSS styles can be added to a web page defining styles rules:
- Inline Stylesheet for defining style rules
- Internal Stylesheet for defining style rules
- External Stylesheet for defining style rules
Let us learn about the style rules one by one:
Inline Stylesheet for defining style rules
With the Inline StyleSheet, you can easily set the rules with a specific HTML element. The style attribute is used for this. For example:
|
1 2 3 |
<body style="color:blue"> |
Internal StyleSheet for defining style rules
With the Internal StyleSheet, the rules are set in the <head>…</head> of an HTML document. The <style> element is used as in the below example:
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <style> body { color: blue; } </style> </head> </html> |
External StyleSheet for defining style rules
External StyleSheet as the name suggests, allow you to create a separate CSS file and set the rules in it. This external file is to included in the HTML file, under the <head>…</head> like this with the <link> element:
|
1 2 3 4 5 |
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head> |
As you can see above, “style.css” is our external file, wherein we have set the style. Here’s our “style.css” file:
|
1 2 3 4 5 |
body { color: blue; } |
Note: It’s not a good practice to use Inline CSS. Avoid it. Consider using External Stylesheets to add all the CSS rules in a single file and include in your web page with <link>.
Now, we will create a web page and set font and background color with all other elements essential for an HTML document. We are using Interbal StyleSheet i.e. <style> element:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>HTML Document</title> <style> body { background-color: blue; color: white; } </style> </head> <body> <h2>Online Book Store</h2> <p>Following books are available:</p> <ul> <li>Invisible Man</li> <li>Beloved</li> <li>The Great Gatsby</li> <li>The Grapes of Wrath</li> <li>Their eyes were watching God</li> </ul> </body> </html> |
Output
No Comments