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

00:00 Start of video
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
1:52 A HTML tag
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