Apply CSS


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

    Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.



    More Tutorials:   SQL   PHP   HTML


    Copyright 2007-2009   1keydata.com   All Rights Reserved.   Privacy Policy  



  • CSS Tutorial
    CSS Syntax
    Apply CSS
    CSS Media Types
    CSS Cascade
    CSS Inheritance
    CSS Class ID
    CSS Div Span
    CSS Length Units

    CSS Box Model
    CSS Margin
    CSS Border
    CSS Padding
    CSS Background
      CSS Background-attachment
      CSS Background-color
      CSS Background-image
      CSS Background-position
      CSS Background-repeat
    CSS Color
    CSS Font
    CSS Link
    CSS List
    CSS Table
    CSS Position
      CSS Absolute
      CSS Relative
      CSS Fixed
      CSS Static
      CSS Top
      CSS Bottom
      CSS Left
      CSS Right
      CSS Overflow
      CSS Z-Index
    CSS Text
    CSS Float
    CSS Clear
    CSS Cursor
    CSS Wrap

    CSS Codes

    Resources

    CSS Tutorial German