/

HTML / CSS / JavaScript Tutorial

HTML Element: <style>

[this page | pdf | back links]

The HTML <style> element indicates style information for a document. HTML documents can contain multiple <style> elements. See CSS Tutorial for further details.

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

media

Specifies media / device linked document is optimised for

Here

scoped

Indicates styles only apply to the element’s parent element and that element’s child elements

Here

type

Type of element

Here

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object (typically the style property of an element) supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above. It also supports the following additional properties, see also CSS Properties:

 

DOM Property Name

Corresponding CSS Property Name

More

alignContent

align-content

Here

alignItems

align-items

Here

alignSelf

align-self

Here

animation

animation

Here

animationDelay

animation-delay

Here

animationDirection

animation-direction

Here

animationDuration

animation-duration

Here

animationFillMode

animation-fill-mode

Here

animationIterationCount

animation-iteration-count

Here

animationName

animationName

Here

animationPlayState

animationPlayState

Here

animationTimingFunction

animationTimingFunction

Here

backfaceVisibility

backface-visibility

Here

background

background

Here

backgroundAttachment

background-attachment

Here

backgroundClip

background-clip

Here

backgroundColor

background-color

Here

backgroundImage

background-image

Here

backgroundOrigin

background-origin

Here

backgroundPosition

background-position

Here

backgroundRepeat

background-repeat

Here

backgroundSize

background-size

Here

border

border

Here

borderBottom

border-bottom

Here

borderBottomColor

border-bottom-color

Here

borderBottomLeftRadius

border-bottom-left-radius

Here

borderBottomRightRadius

border-bottom-right-radius

Here

borderBottomStyle

border-bottom-style

Here

borderBottomWidth

border-bottom-width

Here

borderCollapse

border-collapse

Here

borderColor

border-color

Here

borderImage

border-image

Here

borderImageOutset

border-image-outset

Here

borderImageRepeat

border-image-repeat

Here

borderImageSlice

border-image-slice

Here

borderImageSource

border-image-source

Here

borderImageWidth

border-image-width

Here

borderLeft

border-left

Here

borderLeftColor

border-left-color

Here

borderLeftStyle

border-left-style

Here

borderLeftWidth

border-left-width

Here

borderRadius

border-radius

Here

borderRight

border-right

Here

borderRightColor

border-right-color

Here

borderRightStyle

border-right-style

Here

borderRightWidth

border-right-width

Here

borderSpacing

border-spacing

Here

borderStyle

border-style

Here

borderTop

border-top

Here

borderTopColor

border-top-color

Here

borderTopLeftRadius

border-top-left-radius

Here

borderTopRightRadius

border-top-right-radius

Here

borderTopStyle

border-top-style

Here

borderTopWidth

border-top-width

Here

borderWidth

border-width

Here

bottom

bottom

Here

boxShadow

box-shadow

Here

boxSizing

box-sizing

Here

captionSide

caption-side

Here

clear

clear

Here

clip

clip

Here

color

color

Here

columnCount

column-count

Here

columnFill

column-fill

Here

columnGap

column-gap

Here

columnRule

column-rule

Here

columnRuleColor

column-rule-color

Here

columnRuleStyle

column-rule-style

Here

columnRuleWidth

column-rule-width

Here

columnSpan

column-span

Here

columnWidth

column-width

Here

columns

columns

Here

content

content

Here

counterIncrement

counter-increment

Here

counterReset

counter-reset

Here

cursor

cursor

Here

direction

direction

Here

display

display

Here

emptyCells

empty-cells

Here

filter

filter

Here

flex

flex

Here

flexBasis

flex-basis

Here

flexDirection

flex-direction

Here

flexFlow

flex-flow

Here

flexGrow

flex-grow

Here

flexShrink

flex-shrink

Here

flexWrap

flex-wrap

Here

cssFloat

float

Here

font

font

Here

fontFamily

font-family

Here

fontSize

font-size

Here

fontSizeAdjust

font-size-adjust

Here

fontStretch

font-stretch

Here

fontStyle

font-style

Here

fontVariant

font-variant

Here

fontWeight

font-weight

Here

hangingPunctuation

hanging-punctuation

Here

height

height

Here

justifyContent

justify-content

Here

left

left

Here

letterSpacing

letter-spacing

Here

lineHeight

line-height

Here

listStyle

list-style

Here

listStyleImage

list-style-image

Here

listStylePosition

list-style-position

Here

listStyleType

list-style-type

Here

margin

margin

Here

marginBottom

margin-bottom

Here

marginLeft

margin-left

Here

marginRight

margin-right

Here

marginTop

margin-top

Here

maxHeight

max-height

Here

maxWidth

max-width

Here

minHeight

min-height

Here

minWidth

min-width

Here

navDown

nav-down

Here

navIndex

nav-index

Here

navLeft

nav-left

Here

navRight

nav-right

Here

navUp

nav-up

Here

opacity

opacity

Here

order

order

Here

orphans

orphans

Here

outline

outline

Here

outlineColor

outline-color

Here

outlineOffset

outline-offset

Here

outlineStyle

outline-style

Here

outlineWidth

outline-width

Here

overflow

overflow

Here

overflowX

overflow-x

Here

overflowY

overflow-y

Here

Padding

padding

Here

paddingBottom

padding-bottom

Here

paddingLeft

padding-left

Here

paddingRight

padding-right

Here

paddingTop

padding-top

Here

pageBreakAfter

page-break-after

Here

pageBreakBefore

page-break-before

Here

pageBreakInside

page-break-inside

Here

perspective

perspective

Here

perspectiveOrigin

perspective-origin

Here

position

position

Here

quotes

quotes

Here

resize

resize

Here

right

right

Here

tabSize

tab-size

Here

tableLayout

table-layout

Here

textAlign

text-align

Here

textAlignLast

text-align-last

Here

textDecoration

text-decoration

Here

textDecorationColor

text-decoration-color

Here

textDecorationLine

text-decoration-line

Here

textDecorationStyle

text-decoration-style

Here

textIndent

text-indent

Here

textJustify

text-justify

Here

textOverflow

text-overflow

Here

textShadow

text-shadow

Here

textTransform

text-transform

Here

top

top

Here

transform

transform

Here

transformOrigin

transform-origin

Here

transformStyle

transform-style

Here

transition

transition

Here

transitionDelay

transition-delay

Here

transitionDuration

transition-duration

Here

transitionProperty

transition-property

Here

transitionTimingFunction

transition-timing-function

Here

unicodeBidi

unicode-bidi

Here

userSelect

user-select

Here

verticalAlign

vertical-align

Here

visibility

visibility

Here

whiteSpace

white-space

Here

widows

widows

Here

width

width

Here

wordBreak

word-break

Here

wordSpacing

word-spacing

Here

wordWrap

word-wrap

Here

zIndex

z-index

Here

 

The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head>
<style>em.class1 {font-family: monospace; font-size: smaller;}</style>
</head>
<body>
Created using HTML:<br>
<em class="class1">italic text with font-family and font-size overridden</em>

<br><br>Manipulated using JavaScript:<br>
<span id="element"></span>

<script>
var x = document.createElement("EM");
x.style.fontFamily = "monospace";
x.style.fontSize = "smaller";
x.textContent = "italic text with font-family and font-size overridden";
document.getElementById("element").appendChild(x);
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile