How to add CSS in HTML Documents
§ CSS can be add as a separate document or embedded in the HTML document itself.
§ There
are three ways of including CSS in an HTML document:
1. By
using inline CSS.
2. By
Using internal CSS
3. By
using external CSS.
Inline Styles Sheet
§ Inline
CSS can be applied by using the style attribute in the HTML start tag where it
is used on page.
§ In the given example Here we use inline CSS for
heading tag the example shows how to change the color and the font-size of a
heading
§ Example of inline css for<h1> tag
Internal Style Sheet
§ An internal style sheet should be used when a style sheet is a specific to single document.
 |
| Internal Style Sheet |
§ To
include internal styles sheet html provides <style></style> tag to
define CSS rules.
§ Internal styles sheet is defined in the head section of an HTML page, by using the <style> tag, like below:
External Style Sheet
§ Whenever
you want to apply same CSS style sheet into multiple html page then it is not recommended
to embedded same style sheet into multiple pages by using internal style sheet.
In this case we should go for external style sheet.
What is an external style sheet?
§ External
style sheet means maintaing a separate CSS file and attach that CSS file into
multiple pages in which required. Where each page must link to the style sheet
using the <link> tag. This tag goes inside the head section:
§ In the <head> section of your HTML sheet, add a reference to your external .css file .
Output:
Advantages of External CSS:
§ Using external CSS we cam maintain separation of CSS code and HTML and using it your HTML files will have a cleaner structure and are smaller in size.
§ You can use the same. CSS file for multiple pages.
§ With an external style sheet, we can change the look of an entire Web site by changing one file.
Author Name
Author Description!
Post a Comment