タイトル中のcssをデザインするってのはちょっとおかしい気がしますが、今回はGoogle Chromeで表示してるページのcssを表示する方法で書いた要素の検証を使って簡単にcssをデザインする方法です。
cssのことをよく分かっていない私の様な人間がcssをいじろうとした時に最も難しいのは、セレクタと呼ばれるcssの影響する要素の指定に何を入れたらいいか分からんってことではないでしょうか？
#branding { ←赤字の部分がセレクタ
padding:88px 0 44px 0;
}
以下の説明の内容は環境により読み替えて頂く必要があります。
下の画像はタイトルThematicの上にカーソルを合わせて要素の検証をクリックした状態です。
要素の内容の左側には表示しているページのhtmlが表示され、タイトルに対応する部分が選択されます。右側には選択された部分に影響するcssの定義が表示されます。
影響するcssの定義は複数のファイルに分かれて定義されることがあり、また同一のファイル内でも複数定義することが可能です。同じプロパティ（例：marginやpadding）が複数ある場合は最後に読み込んだプロパティの値のみが有効になります。
このcssの定義は表示だけでなく編集することが出来ます。（編集した内容は一時的なものでページを更新すると元に戻ります。）
例えば黄色で囲った中のblackをクリックすると編集可能になりますのでredと書き換えて下さい。
タイトルの文字が赤色になったと思います。
次にtext-decoration:none;の下にある}（閉じ括弧）の右側をクリックして下さい。新たなプロパティと値が入力可能になりますのでプロパティにborder、値にsolidと入力して下さい。
タイトルが罫線に囲まれたと思います。
今度はtext-decoration:none;の上にカーソルを持ってきて下さい。（全ての）プロパティ名の左にチェックボックスが表示されます。text-decorationのチェックを外して下さい。
タイトルにアンダーラインが付いたと思います。どういうことかと言うと別の場所にもタイトルに影響するcssの定義があって、上のチェックを外すことにより別の場所の定義が有効になった為です。
（上記はブラウザ側にリンクにはアンダーラインを付けるという設定がある為の様です。）
ここまでは定義したcssがどの様に見た目に影響するかを確認する方法で、ここからは自分が見た目を変えたい場所に影響しているcssの探し方です。
下の画像は表示しているページのhtml中の<div id=”branding”>…</div>という部分を選択した状態です。ページの対応する部分の色が変わっていることが分かります。
marginは薄いオレンジ色、paddingは薄い緑色、そしてmarginとpaddingを除いた部分（ここではタイトルと説明が入るところ）は薄い青色で表示されます。
html中の選択部分をカーソルキーでどんどん変更してみて下さい。どんどん色が付く場所が変わっていくと思います。
そして見た目を変えたい場所に色が付いたらhtmlの右側の欄を見て下さい。Matched CSS Rulesに影響しているcssの定義が表示されます。
そしてここでようやくcssをデザインするのですが、上の画像の場合にpaddingの量を少なくしたいのであれば、Matched CSS Rulesの先頭のcss定義である
#branding {
padding:88px 0 44px 0;
}
を例えばThematic子テーマのstyle.cssに追加してpaddingの値を減らせば変更出来ます。
（ファイル名をクリックするとcss定義のコピーが簡単に出来ます。）
paddingの代わりに下記の定義を追加すると、paddingはそのままでタイトルの左に罫線が付きます。
#branding {
border-left:solid 1px;
}
セレクタさえ分かれば、あとはプロパティを調べて追加していくだけですね。
やたら長くなってしまいましたが、誰かの役に立てたらいいなぁ〜。