ヘッダーの文字の大きさを変えたいのですが

右上のヘッダーの大きさを上(LogoLOGO)と下(コスメです。)で変えたいです。
上を30px、下を12pxに変更したいです。

あとはLogoLOGOとコスメです。の距離を縮めるにはどのように書けばよろしいのでしょうか。

方法がわからず、とりあえず下記のようにしましたが、なんか表記がおかしい気がするので、どなたかご教授いただけましたらと思います。

.html

・・・

<header>
<div class="container1">
  <div class="navbar">
    <div class="logo">
      <p>LogoLOGO</p>
      <p2>コスメです。</p2>
    </div>

・・・

.css

・・・
.logo {
  color: white;
  font-size: 30px;
  padding-left: 2rem;
}
.logo p2{
  font-size: 12px;
}
・・・

m.ts10806

2020/03/01 21:35

質問は何度でも編集できるので（回答やコメントも編集できます）何かしら間違ったからって新たに投稿しなおす必要はありません。回答がついていないこちらの質問は削除依頼を出しておくと良いです

minokiti

2020/03/02 23:26

.logo { } を .logo p { } というふうにしてみたらどうでしょうかあと、p2というタグは存在しないはずですよ

行動規範の内容に同意します

回答1件

他の方のご指摘通り<p2>タグはありません。
同じPタグでもスタイルを変えたければ、idを振ってあげるといいと思います。

CSSのid指定：#id

CSSのclass指定：.class

余白関しては、marginやpaddingを指定してあげるのがいいと思います。

参考：余白について

ブラウザのF12ボタンを押して出る開発者ツールのElementsを見ると、スタイルがどう当たっているのか確認できます。

参考：ブラウザ開発者ツール

私なりに調整してみました↓↓いかがでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4    	<meta charset="UFT-8">
5    	<title>CSS</title>
6		<style>
7			body{
8				background-color: black;
9  				padding-left: 2rem;
10			}
11			div{
12			}
13			.logo {
14  				color: white;
15			}
16			#logo1{
17			 	font-size: 30px;
18				margin-bottom:1px
19			}
20			#logo2{
21			 	font-size: 12px;
22				margin-top:1px
23			}
24		</style>
25	</head>
26	<body>
27		<div class="container1">
28  			<div class="navbar">
29    			<div class="logo">
30      				<p id="logo1">LogoLOGO<p/>
31      				<p id="logo2">コスメです。</p>
32    			</div>
33    		</div>
34    	<div>
35	</body>	
36</html>