HTML Tutorial - HTML Style

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.

Example

The following code gives an example of the style element in use.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a  {<!-- w w w.  j  a v  a2 s  .c o m-->
    background-color: grey;
    color: white;
    padding:  0.5em;
}
</style>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

The code above created a new style for the a element. It displays the link with a grey background, white text, and some padding.

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.

The following code gives an example of how you can use this attribute.

<!DOCTYPE HTML>
<html>
<head>
<style  media="screen" type="text/css">
a  {<!--from   w ww . j  a va 2s .  c  o m-->
    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://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

The code above defined two style elements with different media value.

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.

First, you can specify the device. Possible values are listed in the following table.

Device	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.

The following code adds specificity to a style Element.

<!DOCTYPE HTML>
<html>
<head>
<style  media="screen AND  (max-width:500px)" type="text/css">
a  {<!--from   w ww  . j  ava 2 s  .  c o  m-->
    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>
    <p>This is a test.</p>
    <a href="http://java2s.com">Visit  java2s.com</a>
</body>
</html>

Click to view the demo

The code above used the width feature to differentiate between two styles. The first will be used when the browser window is narrower than 500 pixels, and the second when the window is wider than 500 pixels.

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.

The available features, along with their modifiers, are listed in the following table.

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