w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



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

Valid Syntax 1
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html>
<head>
<title>...<⁄title>
<style>
⁄* CSS rules go here *⁄
<⁄style>
<⁄head>
<body>

<⁄body>
<⁄html>
Valid Syntax 2
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<title>...<⁄title>
<⁄head>
<body>
<section>
<style scoped>
⁄* CSS rules go here *⁄
<⁄style>
<⁄section>
<⁄body>
<⁄html>

Syntax 1: Validstyle element nested inside head element
Syntax 2: Validstyle 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)
style intro style optional style browser display style ELEMENT vs style ATTRIBUTE style syntaxstyle media attributestyle type attributestyle scoped attributestyle title attribute