Apply CSS

SQL     Data Warehousing     CSS     PHP     HTML     Database Normalization


CSS Tutorial  >  Apply CSS

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).

    Next: CSS Media Types




    Copyright © 2014   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact