Learn how to use Microthemer’s HTML and CSS inspection tools, and pick up a bit of HTML and CSS knowledge along the way
00:11
Click the Inspect option at the bottom left
00:21
HTML inspection
1:08
Click any line of HTML to select an element
1:19
HTML lets us style pieces of content differently
1:36
How to understand the HTML
2:23
Pointing brackets define HTML elements
2:58
HTML element attributes (e.g. ids and classes)
3:25
CSS selectors
3:25
CSS selectors reference HTML tags or attributes
3:33
A dot (.) is used to reference a HTML class
3:39
A hash (#) is used to reference a HTML id
4:02
HTML elements often nest one inside the other
4:27
Space-separated CSS selectors reference a parent and child element
5:38
The page-id modifier set the context with a page-specific class
6:53
Choosing alternative selector suggestions
7:05
Selector suggestions can be customised
7:13
Favours classes or ids using the low/high specificity switch
8:15
An example of deciding which selector to choose
11:48
Computed and Styles panes
11:58
The Computed panel shows you the final computed CSS values
12:14
The Styles tab shows you the actual CSS rules in effect
13:24
Key information is shown for common values it's useful to know
HTML and CSS inspection
Learn how to use Microthemer’s HTML and CSS inspection tools, and pick up a bit of HTML and CSS knowledge along the way