In the last article, we learned about CSS selectors which select elements in HTML document so that we can apply CSS properties to them.
Now it's time to actually see the effect of CSS by applying it to HTML documents. Let's see how to do it...
Ways to Insert CSS
There are three ways to of inserting CSS(Cascading Style Sheet) in HTML document.
- External style sheet
- Internal style sheet
- Inline sheet
External Style Sheet
In this case, you have separate CSS and HTML files. You attach them by mentioning the reference to CSS file inside HTML file.
This is most commonly used the method to apply CSS because it simplifies the process. Every time you want to change the Styling of the page, you will have to change only CSS file keeping HTML constant.
To link CSS to HTML you will use the following syntax:
The external CSS file should not contain any HTML tags and will have syntax same as we seen in CSS examples.
Here is our "mycssfile.css"...
p {
background-color: yellow;
color: green;
}
h1 {
color: red;
}
Internal Style Sheet
In this case, CSS is inside HTML file. Yes, you don't have to create the separate file for CSS. Although on first look. you may think that it is easier and better than External style sheets, it makes your code messy.
It is useful only when, say you have the same styling for 10 pages written in one common CSS file and you want to make the slight change in style of any particular page, it is better to do it in that HTML file.
Here is how you will write it...
body {
background-color: gray;
}
h1 {
font-family: Verdana;
padding: 10px;
}
Inline Styles
This is what we have already done. Yes. do you remember use of style tags in HTML? To use this type of styling we just mention style attribute inside starting tag of element and mention CSS properties as its value.
Here is an example of Inline styling...
This is sample heading.
In the most of the examples, you will use separate CSS as it makes easy to change styling later on in development.
That's all for today. In the next part, we will study the effect of applying multiple styling to the same element by different methods.
Till the #keepCoding and #HappyNewYear
