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.

<strong style="color:White; background:black"> Your Text  </strong>

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.

 Your Text

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.

        css" href="customstylesheet.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.

@import "mynewstylesheet.css";

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.