Ues Style With HTML Element

CSS Property apply in html element by 3 method

1 : Inline CSS

2 : Internal CSS

3 : External CSS

Inline CSS

Inline css property use within the html tag

Inline css property are more effective than internal css and external css property

Inline css syntax is style attribute

Example

<html>
  <body>
    <h1 style="color:blue"> Inline css property </h1>
  </body>
</html>

In output heading color is blue

The good experience to use css is external css file or internal css

Internal CSS

Internal css code write in same file . Internal css write within a style tag

syntax of internal css

Example

Internal css code example

<html>
  <head>
    <title> Internal css </title>
    <style>
      h1{
        color:green;
        background-color:whitesmoke;
      }
      p{
        border:1px solid red;
        font-family:"Open-Sans";
        font-size:22px;
      }
    </style>
  </head>
  <body>
    <h1> Internal CSS </h1>
    <p> Internal css code write within style tag </p> 
  </body>
</html>

When use inetrnal css the CSS code readability is much better

External css

External css that mean all css code written in a separate file . File extention is .css

Maximum Web Developer use a external css file . it more better to modify and reusability

HTML file name is index.html

<html>
  <body>
    <div class="mydiv">
      <h1> External css file use for style </h1>
      <p> External css file help to improve your css code , readability and          reusability </p>
    </div>
  </body>
</html>

External css file name is style.css

External css no need to use style tag

.mydiv{
    width:320px;
    height:200px;
    border:1px soldi red;
}
.mydiv h1{
   color:blue;
  }
.mydiv p{
    color:green;
    font-size:22px;
}

One more time . I recomended to use external css

Related Articals

HTML

CSS

jQuery