how to css in html code example

Example 1: connext html file to css

<link rel="stylesheet" type="text/css" href="style.css">

Example 2: CSS IN HTML

<!-- Styles can be inserted in html using <style></style> element -->
<style>
	body {
    	background-color: cyan/*Color*/; 
  	}
</style>

<!--CSS can also be linked using link tag in html 
-the link tag is a self-closing tag-->

<link rel="stylesheet" type="text/css" href="filename.css"/>

Example 3: jquery in html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Example 4: css in html

<!-- EXAMPLE -->
<div class="your_class" style="display:none">

<!--[SYNTAX: style="<CSS-code>"] -->

Example 5: CSS IN HTML

<!-- There are 3 ways to do this-->

<!-- #1: Inline CSS-->
<h1 style="color: red;">Red Heading</h1>

<!-- #2 Element CSS-->
<style>
  h1 {
    color: red;
  }
</style>
<h1>Red Heading</h1>

<!-- #3 Stylesheet CSS-->
<link rel="stylesheet" href="[stylesheet link]">

Example 6: !important in css

/*
Applying css property to an element is like latest or last added css file styling will override all the design of HTML element.
for e.g.
added three css file in html document line by line
<link rel="" href="stylesheet1.css">
<link rel="" href="stylesheet2.css">
<link rel="" href="stylesheet3.css">

so from above file adding stylesheet3.css will override all duplicate styling.

and if you want to more priorities your css then add inline css.

But in critical sitution like if we don't want override any sytling of an specific element.
then we use !important in css property value.

!important is always on highest priority it works like styling that sticks to any element and never going to removed unless you remove !important from css property value.
*/

Syntax:
div {
 width: 100% !important;
}

/*
I hope that above description about !important in css will help you.
Namaste
*/