ブラウザ付属の検証ツールでは、実際のソースコードに変更を加えず、自分のブラウザ内だけでHTMLやCSSを一時的に変えてみることが出来ます。
変えたコードはブラウザをリロード（再読み込み）すると消え、元に戻ります。
ElementsでHTMLを変更
もう一度、ヘッダーのメニュー部分をクリックして選択します。
<li>の部分をダブルクリックしてみましょう。
するとダグルクリックした箇所が浮き上がったような表示になり、文字を打ち込める状態になります。
<li>タグを<span>に打ち換えてみましょう。
閉じタグは自動的に変えてくれます。
表示部分を見ると、
リストグループの一員ではなくなってしまった「HOME」が
float: left;に押されて右端へ押し出されました。
<h1>タグに打ち換えてみると、今度は「#header h1」のスタイル（東京ビートルズ、というタイトルに使っているもの）が適用されました。
文字が大きくなりmargin-bottomが10px加えられていますね。
Stylesでcssを変更
次にStylesのパネル内でcssを変えてみましょう。 選択モードで「東京ビートルズ」の文字をクリックします。
Stylesを確認すると<h1>に対してstyle.cssで設定されているのはmarginだけ、
文字サイズなどはuser agent stylesheet＝ブラウザが自動的に設定している事が分かります。
<h1>タグの文字サイズを変えてみましょう。
「#header h1」と書かれているボックス内をクリックします。
新しい行が追加され、テキストカーソルが点滅して文字を入力できる状態になります。
font-sizeと打ち込もうとすると入力アシストが表示されます。
そのまま打ち込んでも良いですし、選択肢の中から選んでも良いです。
試しにフォントサイズを50pxで入れてみました。
「東京ビートルズ」の文字がかなり大きく表示されるようになっています。
次にメニューの「News」を囲っている<li>タグ部分を選択してください。
今度はstyleパネルの一番上にある
element.style {
となっているボックスをクリックしてみましょう。
先ほどと同じように文字が打ち込める状態になります。
分かりやすいように、また「font-size: 50px;」と入力してみます。
「News」の文字だけだ大きくなりました。
element.style { }部分に入力したcssが、Elements（HTML部分）に追加されていますね。
ちなみに下の「
#header li { }」部分のfont-sizeに打ち消し線が入ったのは
もっと強い（優先順位の高い）css指定があり打ち消されている、という意味です。
検証ツールで入力したcssは、 セレクタの左側にカーソルを重ねると表示されるチェックボックスをクリックすることでON/OFFを気に変えることができます。
element.style { }部分のフォントサイズのチェックを外すと、
#header li { }部分のフォントサイズ指定の打ち消しが消えて有効になります。
次はelement.style { }内の設定をOFFの状態で
#header li { }部分のfont-sizeを50px;に変更してみます。
もうお分かりなのではないでしょうか。
element.style { }は選択した要素のみにcssを追加するための枠です。
その下の#header li { }は通常のcssセレクタと同じく
headerというidが付けられている要素の中にある<li>タグ全て
に設定が反映されるのでヘッダーメニューの文字が全て大きくなったのです。
ElementsやStyles部分はコピーすることも出来ます。 エディターで保存してブラウザでリロードして……と行ったり来たりするのは大変。 なので、ブラウザ（検証ツール）上でコードを直して、作成中のhtml/cssファイルに張り付ける…という方法で修正することもありますよ。
検証ツール上で変更したコードはブラウザをリロード（再読み込み）すると消え、元に戻ります。 修正途中でリロードしてしまうと消えてしまうので、そこだけ注意して下さい。