w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

style ... ⁄style vs element style

style ELEMENT vs. style ATTRIBUTE

The difference between: the style element and the style attribute
<style> ... <⁄style><element style> ... <⁄element>
1. Utility:
creates an internal style sheetcreates an inline style (the rules defined within the inline style are more powerful than those defined inside the internal style sheet, can override them )
2. Syntax:
has a start tag: <style> and an end tag <⁄style> added only on the start tag of an HTML element
3. Place in page:
can be add both inside head and body section; when added in body, scoped attribute is required is a global attribute → can be added to any HTML element
4. Semantics:
can define style for an element in page, for multiple elements or for the whole page can define style only for the element on which is added
5. Occurrences:
multiple style elements allowed per HTML document only 1 style attribute is allowed per element, multiple style attributes per page per multiple elements
6. Browser display:
depends on the CSS rules defined depends on the CSS rules defined

Video demonstration style element versus style attribute

HTML5 style element vs style attribute Tutorial

min video details
00:09 this video presents the difference between the:
style element and the style attribute
00:15 style element
00:15 style element has a:
- start tag, <style>
- and an end tag, <style⁄>
00:22 style attribute
00:22 style attribute is applied ONLY on the start tag of an html element, e.g. h1
00:31 style element: value
00:31 the CSS rules added inside the style element (head section) applies to all html document
the italic font-style is applied to both h1 elements on page
00:37 both headers are in italic
00:47 style attribute: value
00:47the CSS rules added to the style attribute applies ONLY to that html element and can override the style defined within the style element
00:56 the style of the second header in page has been overridden through style attribute
01:03 style element creates an internal style sheet
01:06 style attribute creates an inline style
style intro style optional style browser display style parents - CSS rules style syntaxstyle media attributestyle type attributestyle scoped attributestyle title attribute