Follow by Email

HTML5 Adding styles

In order to place/position html element we use CSS (cascading style sheets). 
Three different ways to add style in html:

 Using Inline CSS:

 It is used to apply CSS to a single HTML element using the style attribute of an HTML element.




    <div style="float: left;">
This is a Blue Heading</div>

Using Internal CSS:

It mainly used to define a CSS for an entire HTML page, or included html under same body. It can be included in the <head> or <body> tab, it is mostly preferred to use the CSS in <head> so that the styles are loaded first before the element is created.




    <html>
   <head>
      <style>
      body {background-color: grey;}
      div   {align-text: center;}
      p    {background-color: yellow;}
      </style>
   </head>
   <body>
   Example for Internal CSS<br />

   <div>
Main div content</div>
</body>
   </html>

or

     <html>
     <head>
     </head>
     <body>
     Example for Internal CSS<br />

     <div>
Main div content</div>
<style>
       body {background-color: grey;}
       div   {align-text: center;}
       p    {background-color: yellow;}
     </style>
    </body>
    </html>


Using External CSS:

It is mainly used to include external CSS file in the html page. This is the most preferred way for adding style to html, as it is included in the common CSS file it resolves lot of issue related to style overwriting and the html code becomes more maintainable. It is included with a <style> tag inside the <head> or <body> tag.





   <link href="vendor/bootstrap/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css"></link>