CSS – Methods

Introduction

There are Three Types of Methods :-

  1. Internal Methods
  2. Inline Methods
  3. External Methods

Embedded CSS –

The <style> Element

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

Here is the generic syntax −

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
   </body>
</html>

Attributes

Attributes associated with <style> elements are −

AttributeValueDescription
typetext/cssSpecifies the style sheet language as a content-type MIMEtypeMIMEtype. This is required attribute.
mediascreen
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.

Inline CSS –

The style Attribute

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

Here is the generic syntax −

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

Attributes

AttributeValueDescription
stylestyle rulesThe value of style attribute is a combination of style declarations separated by semicolon ;;.

Example

Following is the example of inline CSS based on the above syntax −

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         This is inline CSS 
      </h1>
   </body>
</html>

External CSS –

The <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 define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

Here is the generic syntax of including external CSS file −

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

Attributes

Attributes associated with <style> elements are −

AttributeValueDescription
typetext cssSpecifies the style sheet language as a content-type MIMEtypeMIMEtype. This attribute is required.
hrefURLSpecifies the style sheet file having Style rules. This attribute is a required.
mediascreen
tty
tv
projection
handheld
print
braille aural
all
Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

Example

Consider a simple style sheet file with a name mystyle.css having the following rules −

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

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

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

Imported CSS –

@import Rule

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of the @import rule.

<head>
   <@import "URL";
</head>

Here URL is the URL of the style sheet file having style rules. You can use another syntax as well −

<head>
   <@import url("URL");
</head>

Example

Following is the example showing you how to import a style sheet file into HTML document −

<head>
   @import "mystyle.css";
</head>

Leave a Comment