style nested within elements, CSS rules added inside style
Classified as: metadata content, flow content if scoped attribute present
Parents, style
Children, style
Examples: style parents, style children
1 2 3 4 5 6 7 8 9 10 11 12 | <!doctype html> <> <> <>...<⁄> <> ⁄* CSS rules go here *⁄ <⁄> <⁄> <> <⁄> <⁄> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!doctype html> <> <> <>...<⁄> <⁄> <> <> < scoped> ⁄* CSS rules go here *⁄ <⁄> <⁄> <⁄> <⁄> |
Syntax 1: Valid → style element nested inside head element
Syntax 2: Valid → style element can be nested inside section element if scoped attribute is present
Video demonstration nesting style ⁄ CSS rules inside
HTML5 nesting style ⁄ CSS rules inside Tutorial
min | video details |
---|---|
00:07 | the video tutorial presents the style element placed both in head and body sections |
00:14 | style element can be added in both sections: head, body |
00:14 | style inside head section |
00:14 | when added in head section, the styling rules apply to the whole document |
00:24 | style inside body section |
00:24 | when added in body section, the style element must have the scoped attribute present |
00:31 | and the styling rules in this case apply locally and not to the whole document: "locally" means that the style will apply to the p element which is the parent of the style element, and to its children (the children of that p element) |