HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

You will learn more about CSS later in this tutorial.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

This is a heading

This is a paragraph.

Example

Set background color for two different elements:

This is a heading

This is a paragraph.

Text Color

The CSS color property defines the text color for an HTML element:

Example

This is a heading

This is a paragraph.

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

This is a heading

This is a paragraph.

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

This is a heading

This is a paragraph.

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

Centered Heading

Centered paragraph.

Chapter Summary

• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment

HTML Exercises

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Set Style to an HTML element using JavaScript

An HTML element’s style is determined by the CSS applied to the element.

Cascading Style Sheets (CSS) are used to design the layout of a webpage.

You can set an element’s style either in the HTML document itself, by adding an external CSS file, or by using JavaScript.

Setting style with CSS

There are three ways CSS can be applied to an HTML document:

1. Inline – by using the style attribute inside the HTML elements to be styled
2. Internal – by using a element in the document’s
3. External – by using a element which links to an external CSS file

All three are explored below.

Set inline style

To set the inline style, simply set the style attribute on the HTML element as follows:

In the example above, the element’s text will appear blue on the user’s screen.

Note: Inline CSS is the most specific, and thus has precedence over the other two approaches. Inline CSS overrides most other CSS declarations.

Set internal style

To set an internal style that applies to elements in the entire HTML document, you can add a element to the document’s element, as follows:

  .example  
I'm blue
 

In the example above, every HTML element that has the class “example” will appear blue on the user’s screen.

Note: It is possible to use elements like under the tag as well.

Set external style

You can also set the document’s CSS by linking to an external stylesheet. To do so, include a link to the CSS file in the document’s element, as follows:

The href attribute should contain the name and location of the CSS file you wish to add to the document. This CSS file contains information on the styles to be applied to your document – below is an example:

Setting style with JavaScript

There are a few ways to set an HTML element’s style with JavaScript.

The most direct method is by using the style property, as follows:

// Enlarge font size of an element largeFonts(); function largeFonts()

The above code applies a style that makes the

element’s text appear larger on the user’s screen.

Below is the syntax for manipulating the style property on an HTML element using JavaScript:

Element.style.CSSproperty = value

Element: An HTML element

CSSproperty: a valid CSS property (e.g. color).

Note: While using the style property, CSS properties are written in camelCase and not with the more standard snake-case.

value: the value must be a string that contains information that matches the expected CSS property requirements.

Note: You can only use the style property on single elements. The document.querySelector() method returns the first element that matches the selector (e.g. p). The return value from this function will always be a single element or, if no matching element is found, null.

Note: Using the style property in this way adds inline styling to the element.

There are two other ways to set style using JavaScript. The first is to use the setAttribute() method. The second is by adding a class using the add() method of the classList property. The class you add can then be handled using external CSS styling.

Related Articles

Источник

How to Add Styles to an Element

Summary: in this tutorial, you’ll learn how to add styles to an element using JavaScript DOM methods.

Suppose that you have a element as follows:

div class="note">JavaScript CSS div>Code language: HTML, XML (xml)

And you want to add styles to this element. By using the JavaScript DOM methods, you can add the inline styles or global styles to the element.

Inline styles

To add inline styles to an element, you follow these steps:

• First, select the element by using DOM methods such as document.querySelector() . The selected element has the style property that allows you to set the various styles to the element.
• Then, set the values of the properties of the style object.

The following code changes the background color and color of the element above:

const note = document.querySelector('.note'); note.style.backgroundColor = 'yellow'; note.style.color = 'red';Code language: JavaScript (javascript)

1) Using cssText property

Adding individual style is quite verbose. Fortunately, you can add set multiple styles at once by using the cssText property:

note.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)

In this example, we used the += operator to append new styles to the existing ones. If you use the = operator, the existing style will be removed, like this:

note.style.cssText = 'color:red;background-color:yellow';Code language: JavaScript (javascript)

2) Using a helper function

The following helper function accepts an element and a style object. It add all styles from the style object to the style property of the element :

function css(element, style) < for (const property in style) element.style[property] = style[property]; >Code language: JavaScript (javascript)

And you can use this css() helper function to set the styles for the element as follows:

const note = document.querySelector('.note'); css(note, < 'background-color': 'yellow', color: 'red' >);Code language: JavaScript (javascript)

Global Styles

To add the global styles to an element, you create the style element, fill it with the CSS rules, and append the style element to the DOM tree, like this:

const style = document.createElement('style'); style.innerHTML = ` .note < background-color: yellow; color:red; >`; document.head.appendChild(style);Code language: JavaScript (javascript)

Источник

JavaScript Style

Summary: in this tutorial, you will learn how to use the style property to manipulate the inline style of the HTML elements.

Setting inline styles

To set the inline style of an element, you use the style property of that element:

element.styleCode language: CSS (css)

The style property returns the read-only CSSStyleDeclaration object that contains a list of CSS properties. For example, to set the color of an element to red , you use the following code:

element.style.color = 'red';Code language: JavaScript (javascript)

If the CSS property contains hyphens ( — ) for example -webkit-text-stroke you can use the array-like notation ( [] ) to access the property:

element.style.['-webkit-text-stock'] = 'unset';Code language: JavaScript (javascript)

The following table shows the common CSS properties:

CSS	JavaScript
background	background
background-attachment	backgroundAttachment
background-color	backgroundColor
background-image	backgroundImage
background-position	backgroundPosition
background-repeat	backgroundRepeat
border	border
border-bottom	borderBottom
border-bottom-color	borderBottomColor
border-bottom-style	borderBottomStyle
border-bottom-width	borderBottomWidth
border-color	borderColor
border-left	borderLeft
border-left-color	borderLeftColor
border-left-style	borderLeftStyle
border-left-width	borderLeftWidth
border-right	borderRight
border-right-color	borderRightColor
border-right-style	borderRightStyle
border-right-width	borderRightWidth
border-style	borderStyle
border-top	borderTop
border-top-color	borderTopColor
border-top-style	borderTopStyle
border-top-width	borderTopWidth
border-width	borderWidth
clear	clear
clip	clip
color	color
cursor	cursor
display	display
filter	filter
float	cssFloat
font	font
font-family	fontFamily
font-size	fontSize
font-variant	fontVariant
font-weight	fontWeight
height	height
left	left
letter-spacing	letterSpacing
line-height	lineHeight
list-style	listStyle
list-style-image	listStyleImage
list-style-position	listStylePosition
list-style-type	listStyleType
margin	margin
margin-bottom	marginBottom
margin-left	marginLeft
margin-right	marginRight
margin-top	marginTop
overflow	overflow
padding	padding
padding-bottom	paddingBottom
padding-left	paddingLeft
padding-right	paddingRight
padding-top	paddingTop
page-break-after	pageBreakAfter
page-break-before	pageBreakBefore
position	position
stroke-dasharray	strokeDasharray
stroke-dashoffset	strokeDashoffset
stroke-width	strokeWidth
text-align	textAlign
text-decoration	textDecoration
text-indent	textIndent
text-transform	textTransform
top	top
vertical-align	verticalAlign
visibility	visibility
width	width
z-index	zIndex

To completely override the existing inline style, you set the cssText property of the style object. For example:

element.style.cssText = 'color:red;background-color:yellow'; Code language: JavaScript (javascript)

Or you can use the setAttribute() method:

element.setAttribute('style','color:red;background-color:yellow');Code language: JavaScript (javascript)

Once setting the inline style, you can modify one or more CSS properties:

element.style.color = 'blue';Code language: JavaScript (javascript)

If you do not want to completely overwrite the existing CSS properties, you can concatenate the new CSS property to the cssText as follows:

element.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)

In this case, the += operator appends the new style string to the existing one.

The following css() helper function is used to set multiple styles for an element from an object of key-value pairs:

function css(e, styles) < for (const property in styles) e.style[property] = styles[property]; >Code language: JavaScript (javascript)

You can use this css() function to set multiple styles for an element with the id #content as follows:

let content = document.querySelector('#content'); css(content, < background: 'yellow', border: 'solid 1px red'>);Code language: JavaScript (javascript)

The following example uses the style object to set the CSS properties of a paragraph with the id content :

html> html> head> meta charset="utf-8"> title>JS Style Demo title> head> body> p id="content">JavaScript Setting Style Demo! p> script> let p = document.querySelector('#content'); p.style.color = 'red'; p.style.fontWeight = 'bold'; script> body> html>Code language: HTML, XML (xml)

• First, select the paragraph element whose id is content by using the querySelector() method.
• Then, set the color and font-weight properties of the paragraph by setting the color and fontWeight properties of the style object.

Getting inline styles

The style property returns the inline styles of an element. It is not very useful in practice because the style property doesn’t return the rules that come from elsewhere e.g., styles from an external style sheet.

To get all styles applied to an element, you should use the window.getComputedStyle() method.

Summary

• Use the properties of element.style object to set the inline CSS properties for the HTML element.

Источник