W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

style ... ⁄style

Share it

style intro style optional style browser display style parents - CSS rules style ELEMENT vs style ATTRIBUTE style syntaxstyle media attributestyle type attributestyle scoped attributestyle title attribute

HTML5 style element

The style element allows you to add CSS rules in order to style your web page. »video

About style

Display & support style

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children style

Attributes style

Observation: scoped attribute currently supported in Firefox only.

style ELEMENT vs. style ATTRIBUTE

The difference between the style element and the style attribute »video

Syntax style

1<style> ... </style> »video

Attributes and Values style (comma separated)

<styleattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.media=all, braille, embossed, handheld
print, projection, screen, speech
tty, tv
»video<style media="screen"> CSS rules <⁄style>
2.type=MIME type»video<style type="text/css"> CSS rules <⁄style>
3.scoped="",  , scoped»video<style scoped> CSS rules <⁄style>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img
2.class=class name»html »img
3.contenteditable="",  , true, false »html
4.contextmenu=menu id value»html
5.data-*= value -
6.dir=ltr, rtl, auto»html
7.draggable= true,  , false»img
8.dropzone= copy, move, link, string:, file: -
9.hidden= "",  , hidden»html »img
10.id=id name»html »img
11.itemid= URL -
12.itemprop= string »link »a
13.itemref= string -
14.itemscope= "",  , itemscope-
15.itemtype= absolute URL -
16.lang=language code »html »head»title »img
17.spellcheck="",  , true, false»html
18.style=CSS property:value»html »img
19.tabindex= integer »img
20.title=text»html »link»style »abbr»dfn
»img »meter
<style title="Lighter"> CSS rules </style>
21.translate="", yes, no»html »img
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration style element

HTML5 style element: style your web page

min video details
00:07 video tutorial: style element, adding CSS rules
purpose: styling a web page
00:18 start by adding the start tag: <style>
00:24 add the end tag: <⁄style>
00:34 adding CSS rules between the start tag, <style>,and the end tag<⁄style>
00:39 adding css rules:
00:39 1. a color for the background
00:51 test result: ok, background's color is now blue
00:55 let's center this paragraph
01:00 2. center a paragraph:
01:10 test result: ok, the paragraph is now centered
01:13 let's make the hyperlink white
01:16 a new color for the hyperlink
01:23test result: ok, the hyperlink is now white
01:26 - one way of styling a web page is through style element
- the css rules are added between the start tag and the end tag
- style element placed inside head section creates an internal style sheet

For more information about the style element, please see the specs: W3CWHATWG