divはブロックレベル要素
pもブロックレベル要素
spanはインライン要素であります

ブロック要素には前後に改行が入り、反対にインライン要素には改行が入りません

使い方を簡単に説明します
HTML<要素 属性="キーワード"></要素>
CSS #または.  { }
キーワードは好きな文字
という感じで記述します
要素や属性は下記の表でわかります

要素 属性
p 
div
span
id
class

ピンとこない方のために実際に記述したページのスクショを載せておきます
今回は<div>でやらせていただきました
<div>はブロック要素ですので前後に改行が入ります
以下 書き方と見本です

記述後のページ


HTMLの記述

id=キーワード
キーワードのkarineと書かれているところは自由に変更可

CSSの記述
id入力なので#キーワード{ }
先頭に必ず「#」を入れること
karineと書かれているところは変更可
ただし、HTMLで記述したキーワードと同じにする

そして前後に改行(ブロック)が嫌な場合は<span>で入力することにより解消されます