Teach with us

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

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>
Updated on 30-Jan-2020 08:03:17

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements