• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

CSS Style Element

Embedded CSS –The <style> Element

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

 

Screenshot_18

 

Attributes

Attributes associated with <style> elements are:

Attribute Value Description
type text/css Specifies the style sheet language as a content –type (MIME type).This is required attribute.
media screen tty tv projection handheldprint braileaural all Specifies the device the document will be displayed on. Default value is all. This is optional attribute.

 

Example

Following is the example of embed CSS based on above syntax:

 

Screenshot_19

 

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:

 

Screenshot_20

 

Example

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

 

Screenshot_21

 

External CSS- The <link> Element:

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 with in 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:

Screenshot_22

 

Attributes

Attributes associated with <style> elements are:

 

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 handheldprint braile

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 my style.css having the following rules:

 

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

Screenshot_24

 

 

Summary
Review Date
Reviewed Item
CSS Style Element
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Style Element"

Leave a Message

Your email address will not be published. Required fields are marked *

Site Disclaimer, Copyright © 2016 - All Rights Reserved.