You can use CSS in three ways in your HTML document:
- External Style Sheet: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
- Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style> tag.
- Inline Style Sheet: Define style sheet rules directly along-with the HTML elements using style attribute.
- External Style Sheet: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
- Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style> tag.
- Inline Style Sheet: Define style sheet rules directly along-with the HTML elements using style attribute.
External Style Sheet
If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.
Example
Consider we define a style sheet file style.css which has following rules −
.red { color: red; } .thick { font-size:20px; } .green { color:green; }
Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document −
<!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <link rel = "stylesheet" type = "text/css" href = "/html/style.css"> </head> <body> <p class = "red">This is red</p> <p class = "thick">This is thick</p> <p class = "green">This is green</p> <p class = "thick green">This is thick and green</p> </body> </html>
This will produce the following result −
If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example
Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag −
<!DOCTYPE html> <html> <head> <title>HTML Internal CSS</title> <style type = "text/css"> .red { color: red; } .thick{ font-size:20px; } .green { color:green; } </style> </head> <body> <p class = "red">This is red</p> <p class = "thick">This is thick</p> <p class = "green">This is green</p> <p class = "thick green">This is thick and green</p> </body> </html>This will produce the following result −
Inline Style Sheet
You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only.
Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element.
Example
Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.
<!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <p style = "color:red;">This is red</p> <p style = "font-size:20px;">This is thick</p> <p style = "color:green;">This is green</p> <p style = "color:green;font-size:20px;">This is thick and green</p> </body> </html>This will produce the following result −
No comments:
Post a Comment