Saturday, May 5, 2012

CSS Beginner tutorial 2 : Applying CSS to HTML


There are three way, to apply CSS to HTML tags, These are
  1. In-line
  2. Internal
  3. External
In-line :
In-line styles are plonked straight into the HTML tags using the style attribute. For example, they look something similar as follow.
<p style="color : blue"> This is some text. </p>
This will make text color blue inside that paragraph .


Internal :
Internal (or embedded) styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. For example, It look like as follow.


<head>
          <style type="text/css">


          p { color : blue };


          div { text-align : left }


          </style>
</head>
This will make all the paragraphs in the page blue and text inside all div element start from left side.


External :
External styles are used for the whole, multiple-page website. There is a separate CSS file. which has file extension ".css" e.g  mystyle.css , which looks like as follow>




p { color : blue };

div { text-align : left }

This external CSS file must linked to each HTML page. We link CSS file to HTML page  by using <link> tag as follow.

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

No comments:

Post a Comment