Sunday, September 11, 2011

03 - What is Inline, Internal and External CSS?


   Applying CSS


There are Three ways to apply CSS to HTML.

   1) In-line


In-line styles are put straight into the HTML tags using the style attribute.
They look something like this:

<p style="color: red">text</p>


   2) Internal

 Embedded, or internal styles are used for the whole page. Inside the head tags, the style
 tags surround all of the styles for the page.

 This would look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
            p {
                        color: red;
            }
            a {
                        color: blue;
            }
</style>
</head>

   3) External

External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like:

 p {
                color: red;
   }

 a {
                color: blue;
   }
 If this file is saved as "web.css" then it can be linked to in the HTML like this:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
                <title>CSS Example</title>
                <link rel="stylesheet" type="text/css" href="web.css" />
...
 </head>


powered by multimediagyan ©

No comments:

Post a Comment