CSS Master

Markup in HTML Panel May Differ from Original

Themarkupyou’llseeintheHTMLpanelisarepresentationoftheDOM.It’s

generatedwhenthebrowserfinishesparsingthedocumentandmaydifferfrom

youroriginalmarkup.

Using the Styles Panel

Sometimesanelementdoesn’tbehaveasexpected.Maybeatypographicalchange
failedtotakeorthere’slesspaddingaroundaparagraphthanyouwanted.Youcan
determinewhichrulesareaffectinganelementbyusingtheStylespaneloftheWeb
Inspector.

BrowsersarefairlyconsistentinhowtheyorganizetheStylespanel,seeninFig-
ure3.5.Inlinestyles,ifany,aretypicallylistedfirst.Thesearestylessetusingthe
styleattributeofHTML,whetherbytheCSSauthororprogrammaticallyvia
scripting.

Figure 3.5. Inspecting styles in Safari

Inline styles are followed by a list of style rules applied via author stylesheets―those
written by you or your colleagues. Styles in this list may be grouped by media query
and/or filename.

Debugging and Optimization 99