How to add custom CSS in HTML

I have already given the introduction to CSS and advantages.Now, there are few ways to use your custom CSS in your site/blog/wordpress.

  • Using style tag with HTML elements.
  • Using Style element inside HTML page
  • Linking external CSS file in your pages
  • Importing CSS file inside another CSS file

1. Using Style tag in HTML element:

You can simply use style tag like below to apply styling to your element.


See the Pen olJkD by ianoop (@ianoop) on CodePen

2. Using Style element in your page

Add a style element in your Head element and define your css classes.

 

See the Pen IeBwH by ianoop (@ianoop) on CodePen

 

 

3.  Linking a external css file in page

Add a link to your css file and those classes will be applied to your elements. This is best approach to have clean code and managing your CSS.

 4. Import a CSS file inside another CSS file

Use following format to import a CSS file. Remember following import tag should first line in your file.

Note: For point 3 and 4 location of your css file is relative to current file. If you are using direct name.css that means CSS file and HTML/CSS file both are in same directory.

Leave a Reply

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