CSS Style Element

Ratings:
(4)
Views:0
Banner-Img
  • Share this blog:

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    

You liked the article?

Like : 0

Vote for difficulty

Current difficulty (Avg): Medium

Recommended Courses

1/15

About Author
Authorlogo
Name
TekSlate
Author Bio

TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.


Stay Updated


Get stories of change makers and innovators from the startup ecosystem in your inbox