Apply CSS

CSS Tutorial  >  Apply CSS

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

  • Inline
  • Embed
  • External Link
  • Import


    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.


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

      <style type="text/css">
        div {

        The background color is red

    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 <head> .. </head> 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.


    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(;

    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 © 2024   All Rights Reserved   Privacy Policy   About   Contact
  • AdBlock Detected!

    Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.