Sunday, October 31, 2010

Apply CSS

1:49 PM  Vasu  No comments

There are four ways to apply a CSS stylesheet to an HTML document:
  • Inline

  • Embed

  • External Link

  • Import

    Inline

    Styles can be declared within the HTML document. For example,

    <p style='font-family:verdana; font-size:16;'>This is font size 16.</p>

    The above HTML code renders the following:
    This is font size 16.

    Embed

    Styles can be embedded within the HTML (usually within the <head> tag). For example,

    <head>
      <style type="text/css">
        div {
          background-color:#FF0000;
        }
      </style>
    </head>
    <body>
      <div>
        The background color is red
      </div>
    </body>

    The above HTML code renders the following:

    The background color is red

    External link

    In this case, all CSS declarations are stored in a file external to the HTML document. That file typically has an extension of .css. Within the <header> .. </header> tags of the HTML document, you include the following declaration:
    <link rel=stylesheet type="text/css" href="external-stylesheet.css">
    This will apply the CSS declarations stored in 'external-stylesheet.css' into the HTML document.

    Import

    External CSS declarations can also be imported into an HTML document. To do so, use the @Import command. The syntax is:
    <STYLE TYPE="text/css">
    <!--
      @import url(http://www.mysite.com/style.css);
    -->
    </STYLE>
    The @import command was initially used to serve up different stylesheets to different browsers. However, this is no longer applicable today. Nowadays, @import is typically used as a way to include additional CSS stylesheets. If multiple CSS files are called by @import, the stylesheets that are imported later have a higher priority when there is a conflict (please see the CSS Cascade page for more details).

    • Dont Miss Another Post Connect With Us !

    Enter your email address:
    Posted in:

    0 comments:

    Post a Comment