Students Empire
About Us Contact Donate

HTML Style Tag

The style element lets you define CSS styles inline in your HTML document.


style element has the local Attributes: type, media, scoped.


The scoped attribute has been added in HTML5.


           <!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {
  background-color: grey;
  color: white;
  padding:  0.5em;
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <a href="http://www.studentsempire.com">click</a>
</body>
</html>

You can use the style element throughout an HTML document, and a single document can contain multiple style elements.


type


The type attribute from style element lets you tell the browser what kind of style you are going to define; however, the only style mechanism that browsers support is CSS, so the value of this attribute will always be text/css.


style Media


The media attribute from style element lets you specify when a style should be applied to the document.


           <!DOCTYPE HTML>
<html>
<head>
<style  media="screen" type="text/css">
a  {
  background-color: grey;
  color: white;
  padding:  0.5em;
}
</style>
<style  media="print">
a{
  color:Red;
  font-weight:bold;
  font-style:italic
}
</style>
</head>
<body>
  <p>This is a test.</p>
  <a href="http://www.studentsempire.com">click</a>
</body>
</html>

The browser will apply the first style when the HTML is displayed onscreen, and the second style when the page is printed.


Condition


You can create very specific conditions for a style.


Name Description
all Apply this style to any device (this is the default).
aural Apply this style to speech synthesizers.
braille Apply this style to Braille devices.
handheld Apply this style to handheld devices.
projection Apply this style to projectors.
print Apply this style in print preview and when the page is printed.
screen Apply this style when the content is shown on a computer screen.
tty Apply this style to fixed-width devices, such as teletypes.
tv Apply this style to televisions.

Feature


Using the media features allows you to be even more specific.


         <!DOCTYPE HTML>
<html>
<head>
<style  media="screen AND  (max-width:500px)" type="text/css">
a  {
    background-color: grey;
    color: white;
    padding:  0.5em;
}
</style>
<style  media="screen AND  (min-width:500px)" type="text/css">
a  {
   color:Red; 
   font-style:italic;
}
</style>
</head>
<body>
    <a href="http://www.studentsempire.com">click</a>
</body>
</html>

You can used AND to combine a device with a feature.


In addition to AND, you can also use NOT, or a comma (,) to represent OR. This allows you to create complex and quite specific conditions in which to apply a style.


Unless otherwise noted, you can modify these features with min- or max- to create thresholds rather than specific values.


  • width specifies the width of the browser window. Units are expressed as px for pixels. Example:width:200px
  • height Specifies the height of the browser window. Units are expressed as px for pixels. Example:height:200px
  • device-width Specifies the width of the entire device and not just the browser window. Units are expressed as px for pixels. Example:min-device-width:200px
  • device-height Specifies the height of the entire device and not just the browser window. Units are expressed as px for pixels. Example:min-device-height:200px
  • resolution Specifies the pixel density of the device. Units are dpi (dots per inch) or dpcm (dots per centimeter). Example:max-resolution:600dpi
  • orientation Specifies the orientation of the device. The supported values are portrait and landscape. There are no modifiers for this feature. Example:orientation:portrait
  • aspect-ratio Specifies the pixel ratio of the browser window device. Values are expressed as the number of width pixels over the number of height pixels. Example:aspect-ratio:16/9
  • device-aspect-ratio Specifies the pixel ratio of the browser window or the entire device. Values are expressed as the number of width pixels over the number of height pixels. Example:min-aspect-ratio:16/9
  • color monochrome Specifies the number of bits per pixel of color or monochrome devices. Example:min-monochrome:2
  • color-index Specifies the number of colors that the display can show. max-color-index:256
  • scan Specifies the scanning mode of a TV. The supported values are progressive and interlace. There are no modifiers for this feature. Example:scan:interlace
  • grid Specifies the type of device. Grid devices use fixed grids to display content; for example, character-based terminals and one-line pager displays. The supported values are 0 and 1, where 1 is a grid device. There are no modifiers for this feature. Example:grid:0



© 2016-2020 Students Empire