html class attribute
The class attribute on the html element:
- allows you to apply a CSS class on an HTML tag
- is a global attribute → can be applied on all html elements;
- when applied on the root element <html>, its value is inherited by all other html elements
Important Note: using the class attribute on the html tag together with conditional statements allows you to ensure the cross browser compatibility to your website!
Examples
| <html | attribute | = | "value(s)" | > | ... | <⁄html> | example |
|---|---|---|---|---|---|---|---|
| 2. | class | = | class name | < class="ie"> ... <⁄> "ie" = the name of a defined CSS class inside an internal ⁄ external style sheet |
Video demonstration html class attribute
HTML5 html class attribute Tutorial
| min | video details |
|---|---|
| 00:01 | launch Mozilla Firefox |
| 00:05 | launch Internet Explorer |
| 00:01 | launch Mozilla Firefox |
| 00:09 | open "class.php" file in Mozilla Firefox web browser (drag and drop) |
| 00:12 | open the same file "class.php" in Internet Explorer web browser (drag and drop) |
| 00:15 | please note the difference: text colored differently function of the web browser |
| 00:17 | the text displays in Red in Internet Explorer |
| 00:22 | the text displays in Blue in Firefox |
| 00:29 | we manage to display different colors for text function of the web browser by using classes together with conditional statements |
| 00:33 | open the HTML file in Notepad++ |
| 00:41 | in green, commented, displays the conditional statements: 1st conditional statement: [if IE] = if the browser is Internet Explorer, then <html class="ie"> = apply the defined CSS class "ie" to the whole document <![endif]> |
| 00:49 | we defined 1 rule (referring to text color) for the CSS class "ie" inside the HTML style element |
| 01:08 | the 2nd conditional statement: [if !IE] = if the browser is NOT Internet Explorer, then <html> = no CSS class applied, but we defined a CSS rule (referring to color) on the html selector inside the HTML style element <![endif]>, below |