Insert CSS in HTML Four Types of Methods

Insert CSS in HTML Four Types of Methods here.This post is about adding more than one way of Cascading Style Sheet (CSS) in HTML documents. I will share with you the strengths and weaknesses of the including types of style sheets.

1. Include external style sheet in your HTML Page

Most of people use the standard way of adding external style sheet in an html page. This embed method will include and reflect in your html. All CSS rules which are saved in your external style sheet will be applied on your html content.

You have to check your path which is inside href=”. If you set wrong path it will not reflect on the page. If your CSS file and html page exists in the same folder parallel to each other, then you do not need to add complete file path only have to write the filename itself as shown in the example above but if your CSS path is different, you will have to set the correct path.

2. Embedding Cascading Style Sheet Insert CSS in HTML

You can also write the CSS code in the page under head tag. You need to the follow the below example:

You can use the same CSS rules like external Style Sheet

3. Adding inline CSS to html elements

All the style property can be added directly in line with html tag. To do this simply add the style and write the same as above detailed rules. Find below example to write the inline style.

This is a sample heading

Generally we do not use the inline style in our page. But you can use the same if you do not have any other option to add it. Similarly, if you show/hide any element or text by simply adding display:none and display:block can be replaced by JavaScript / JQuery code to avoid it. You should have to avoid the inline style because this does not look pretty and is a lengthy code.

4. Import CSS files into single CSS file

This is another way to include all CSS files into one single CSS file. if you have more CSS files then there are two options to include one is to include all files into in your page and other way is to import all CSS file into one master CSS and only master CSS file should be included into your page.

October 14, 2017 by admin

Add a Comment

Your email address will not be published. Required fields are marked *