HTML/CSS is a very large subject matter, and the presumption is that you understand at least the bare essentials to take the certification exam, and there are plenty of places to learn HTML/CSS online. As such the notes for this section only cover some specific topics.
From w3schools.com - HTML5 Semantic Elements:
| Tag | Description |
|---|---|
<article> |
Defines an article |
<aside> |
Defines content aside from the page content |
<details> |
Defines additional details that the user can view or hide |
<figcaption> |
Defines a caption for a <figure> element |
<figure> |
Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
<footer> |
Defines a footer for a document or section |
<header> |
Specifies a header for a document or section |
<main> |
Specifies the main content of a document |
<mark> |
Defines marked/highlighted text |
<nav> |
Defines navigation links |
<section> |
Defines a section in a document |
<summary> |
Defines a visible heading for a <details> element |
<time> |
Defines a date/time |
From w3.org - Selectors Level 3:
A selector's specificity is calculated as follows:
count the number of ID selectors in the selector (= a) count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b) count the number of type selectors and pseudo-elements in the selector (= c) ignore the universal selector Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.
Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.
Examples:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
From developer.mozilla.org - Specificity:
When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it. Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.
Some rules of thumb:
- Always look for a way to use specificity before even considering !important
- Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
- Never use !important when you're writing a plugin/mashup.
- Never use !important on site-wide CSS.
From developer.mozilla.org - Source Order:
If multiple competing selectors have the same importance and specificity, the third factor that comes into play to help decide which rule wins is source order — later rules will win over earlier rules.
- w3schools.com - HTML5 Semantic Elements
- w3.org - Selectors Level 3
- developer.mozilla.org - Specificity
- developer.mozilla.org - Source Order