CSS Inclusion - How To Add CSS?

Previous
Quiz
Next

You need to include the CSS file in your HTML document before using it. There are multiple ways to include CSS in an HTML file, such as writing inline CSS, internal CSS, or including a CSS file.

Styles can be associated with your HTML document in different ways, such as:

  • Inline CSS − The CSS styling is placed inside an HTML element tag, which has an effect only on that element.
  • Internal CSS − The CSS styling is placed inside the <style> tag, under the <head> tag.
  • External CSS − The CSS styling is placed in an external file (.css extension) inside the <link> tag, under the <head> tag.

Embedded / Inline CSS - <style> Attribute

You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only.

Syntax

Here is the generic syntax −

   <element style = "...style rules....">

The value of style attribute is a combination of style declarations separated by semicolon (;).

Example

The following example demonstrates the use of inline css styling:

Open Compiler
<html>
<head>
</head>   
<body>
   <div style = "border: 5px inset gold; background-color: black; width: 300px; text-align: center;">
      <h1 style = "color:#36C;">Hello World !!!</h1>
      <p style = "font-size: 1.5em; color: white;">This is a sample CSS code.</p>
   </div>
</body>
</html>

Internal CSS - <style> Element

You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>...</head> tag. Rules defined using this syntax will be applied to all the elements available in the document.

Syntax

Here is the generic syntax −

<head>
   <style type = "text/css">
      h1 {
         color: #36CFFF; 
      }

      p {
         font-size: 1.5em;
         color: white;
      }

      div {
         border: 5px inset gold;
         background-color: black;
         width: 300px;
         text-align: center;
      }
   </style>
</head>

Example

The same style is applied in the following example:

Open Compiler
<html>
<head>
   <style type = "text/css">
      h1 {
         color: #36CFFF; 
      }

      p {
         font-size: 1.5em;
         color: white;
      }

      div {
         border: 5px inset gold;
         background-color: black;
         width: 300px;
         text-align: center;
      }
   </style>
</head>   
<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>This is a sample CSS code.</p>
   </div>
</body>
</html>

Attributes associated with <style> elements are −

Attribute Possible Values Description
type text/css Specifies the style sheet language as a content-type (MIME type). This is a required attribute.
media

screen

tty

tv

projection

handheld

print

braille

aural

all

 Specifies the device the document will be displayed on. Default value is all. This is an optional attribute.

External CSS - <link> Element

The <link> element can be used to include an external stylesheet file in your HTML document.

An external style sheet is a separate text file with .css extension. You can define all the style rules in this text file and include this file in any HTML document using the <link> element.

Syntax

Here is the generic syntax of including external CSS file −

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Attributes associated with <style> elements are −

Attribute Possible Values Description
type text css Specifies the style sheet language as a content-type (MIME type). This attribute is required.
href URL Specifies the style sheet file having style rules. This attribute is required.
media

screen

tty

tv

projection

handheld

print

braille

aural

all

 Specifies the device the document will be displayed on. Default value is all. This is an optional attribute.

Create a style sheet file with a name ext_style.css having the following rules −

   h1 {
      color: #36CFFF; 
   }

   p {
      font-size: 1.5em;
      color: white;
   }

   div {
      border: 5px inset gold;
      background-color: black;
      width: 300px;
      text-align: center;
   }

Example

Now you can include this file ext_style.css in any HTML document as follows −

<head>
   <link type = "text/css" href = "ext_style.css"/>
</head>

Following example demonstrates how to include an external css file in an HTML file:

Open Compiler
<html>
<head>
   <link type = "text/css" href = "ext_style.css"/>
</head>   
<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>This is a sample CSS code.</p>
   </div>
</body>
</html>

Imported CSS - @import Rule

The @import is used to import an external stylesheet in a manner similar to the <link> element. The only key point to remember is, the @import rule must be declared on top of the document. Here is the generic syntax of @import rule.

Syntax

Refer the following two css files − style.css and demostyle.css

style.css

body {
   background-color: peachpuff;
}

demostyle.css

@import url("style.css");

h1 {
      color: #36CFFF; 
   }

p {
      font-size: 1.5em;
      color: white
}

div {
      border: 5px inset gold;
      background-color: black;
      width: 300px;
      text-align: center
}

You just need to include the stylesheet, that has @import rule defined, in the <link> tag in the HTML document as follows −

<head>
   <link type = "text/css" href = "demostyle.css">
</head>

Example

Following example demonstrates the use of @import rule, where one stylesheet can be imported into another stylesheet:

Open Compiler
<html>
<head>
   <link type = "text/css" href = "demostyle.css">
</head>   
<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>This is a sample CSS code.</p>
   </div>
</body>
</html>

CSS Rules Overriding

We have discussed different ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule.

  • Any inline style sheet takes highest priority. So, it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.
  • Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.
  • Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.

CSS Comments Inclusion

Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simple put your comments inside /*.....this is a comment in style sheet.....*/.

You can use /* ....*/ to comment multi-line blocks.

Example

Open Compiler
<html>
<head>
   <style>
      h1 {
         color: #36CFFF; 
      }

      p {
         font-size: 1.5em;
         color: red;
         /* This is a single-line comment */
         text-align: center;
      }
      
      div {
         border: 5px inset gold;
         /* This is a multi-line comment
         background-color: black;
         width: 300px;
         text-align: center;
         */
      }
   </style>
</head>

<body>
   <div>
      <h1>Hello World !!!</h1>
      <p>This is a sample CSS code.</p>
   </div>
</body>
</html>
Print Page
Previous
Next
Advertisements