Mobile-Web-App: Include CSS in HTML

Monday, December 26, 2011

Include CSS in HTML

Basically there are 4 ways to include CSS style in HTML:

Embed CSS inside <style type="text/css"></style> in-between <head> and </head>

<html>
  <head>
    <title>CSS - 1</title>
    <style>
body { 
 margin-left: 20px; 
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
h1{font: bold 2em helvetica}
p { font-size: 20px; }    
    </style>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p>Embed CSS inside <style type="text/css"></style> in-between <head> and </head></p>  
  
  </body>
</html>

Include <link> element to link to external CSS file.

<html>
  <head>
    <title>CSS - 2</title>
    <link rel="stylesheet" type"text/css" href="myCSS.css"/>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p><link rel="stylesheet" type"text/css" href="myCSS.css"/></p>  

  </body>
</html>

With external CSS file, myCSS.css

body { 
 margin-left: 20px; 
 margin-right: 20px;
 background-image: url("http://goo.gl/ZTEx7");
 background-repeat: no-repeat;
 background-position: bottom right;
 background-color: #e0e0e0 }
 
h1{font: bold 2em helvetica}

p { font-size: 20px; }

Using <style type="text/css"> @import url(myCSS.css); </style> to import from external CSS file.

<html>
  <head>
    <title>CSS - 3</title>
    <style type="text/css">
     @import url(myCSS.css);
    </style>
  </head>
  <body>
  
<h1>Mobile-Web-App</h1>
<p>    
  <style type="text/css">
  @import url(myCSS.css);  
  </style>
</p>  

  </body>
</html>

Using HTML attribute style

<html>
  <head>
    <title>CSS - 4</title>
  </head>
  <body 
  style="
  margin-left:20px;
  margin-right:20px;
  background-image:url(http://goo.gl/ZTEx7);
  background-repeat:no-repeat;
  background-position:bottom right;
  background-color:#e0e0e0;
  ">

<h1 style="font: bold 2em helvetica">Mobile-Web-App</h1>
<p style="font: 20px sans-serif;">Using HTML attribute style</p>  
  
  </body>
</html>

Mobile-Web-App

Monday, December 26, 2011

Include CSS in HTML

No comments:

Post a Comment