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.
From developer.mozilla.org - Combinators and groups of selectors:
Using one selector at a time is useful, but can be inefficient in some situations. CSS selectors become even more useful when you start combining them to perform fine-grained selections. CSS has several ways to select elements based on how they are related to one another. Those relationships are expressed with combinators as follows (A and B represent any selector seen above):
| Name | Syntax | Selects |
|---|---|---|
| Group of selectors | A, B | Any element matching A and/or B (see Group of selectors on one rule, below - Group of Selectors is not considered to be a combinator). |
| Descendant selector | A B | Any element matching B that is a descendant of an element matching A (that is, a child, or a child of a child, etc.). |
| Child selector | A > B | Any element matching B that is a direct child of an element matching A. |
| Adjacent sibling selector | A + B | Any element matching B that is the next sibling of an element matching A (that is, the next child of the same parent). |
| General sibling selector | A ~ B | Any element matching B that is one of the next siblings of an element matching A (that is, one of the next children of the same parent). |
- w3schools.com - HTML5 Semantic Elements
- w3.org - Selectors Level 3
- developer.mozilla.org - Specificity
- developer.mozilla.org - Source Order
- developer.mozilla.org - Combinators and groups of selectors