Embeding CSS in your Webpage
After knowing the basics of CSS, and knowing what effects it adds to your document. Now it’s time to understand the ways you can add CSS to your document. Basically, CSS can be categorized in three categories based on how we can attach style sheets in the document namely, Inline CSS, Internal CSS and External CSS. When a browser downloads requested HTML document it automatically read out the CSS rules defined in that document. Each and every type has its own significance of use in the document. Which type and where to use is the secret question. We will explain all this step by step.
Inline CSS is the styling sheet that is embedded into the document by using “style” attribute with any HTML tag as it is a global attribute. Normally, we use it with heading tags (<h1>-<h6>), paragraph (<p>), div tag (<div>), and many more to add style to that section of the document.
<h2 style=”color : blue;”> The printed text is in blue color </h2>
<p style=”color : red;”> This printed text will be displayed in a paragraph with red color. </p>
However, we should avoid using Inline style of adding CSS to our document as it is very complex way for the designing websites. It is efficient only for only small documents. Normally we avoid using Inline style as it becomes very difficult to manage, if we need to make any updates in the document in the future. The alternative to this are the other two styles to embed CSS in the document.