What are the ways to include style sheet rules in an HTML document

Javascript Web Development Front End Scripts

To include stylesheet rules, use the <style> element or style attribute or even external stylesheet using <link>.

The <link> element can be used to include an external style sheet 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 syntax of including external CSS file:

<head>
   <link href = "..." media = "..." />
</head>

The following are the attributes of a <link> element:

Attribute	Value	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 a required.
media	screen tty tv projection handheld print braille aural all	Specifies the device the document will be displayed on. The default value is all. This is an optional attribute

Let us say the style is new.css:

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

Now you can include this file new.css in any HTML document as follows:

<head>
   <link new = "mystyle.css" media = " all" />
</head>

Seetha

Published on 13-Apr-2018 07:46:14

Previous Page Print Page