コードをすっきりしたい

下のコードでsample.cssをsample2.cssのように変更したいのですが、
古い参考書でHTML&css3を復習しています。1度と通ったコードをHTML5 &css3に沿って書き直しているるんですが、sample.cssのclass=sample1,sample2,sample3のsample2.cssのclass=sample1,sample2,sample3のように書き換えたいのですが、pでclassの共通部分をまとめることができますか。参考書のコードはHTMLのheadに設定してあります。
どこが間違っているか教えてください。お願いいたします。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>Herb Kitchen</title>
6　　<link rel="stylesheet" href="css/sample.css">
7</head>
8
9<body>
10<p class="sample1">solid</p>
11<p class="sample2">double</p>
12<p class="sample">groove</p>
13
14</body>
15</html>

css
1//sample.css  
2@charset="utf-8"
3.sample1 {
4    text-align: center;
5    padding: 20px;
6    height: 50px;
7    width: 300px;
8    border-style: solid;
9}
10.sample2 {
11    text-align: center;
12    padding: 20px;
13    height: 50px;
14    width: 300px;
15    border-style: double;
16}
17.sample3 {
18    text-align: center;
19    padding: 20px;
20    height: 50px;
21    width: 300px;
22    border-style: dotted;
23 }
24

css
1
2//sample2.css
3@charset="utf-8"
4p {
5    text-align: center;
6    padding: 20px;
7    height: 50px;
8    width: 300px;
9    float:left
10}
11
12.sample1 {
13    border-style: solid;
14}
15.sample2 {
16    border-style: double;
17}
18.sample3 {
19    border-style: dotted;
20}
21

m.ts10806

2019/03/04 07:43

意味不明です。 >sample.cssをsample2.cssのように変更したいしたらいいんじゃないですか？何を持って「合っている」「間違っている」なのか質問者さんしか知りませんよ。これで答えろというほうが難しいです。

azuapricot

2019/03/04 07:59

（・・・まぁ今回ばっかりは合っている間違っているの違いは明確なんですがねぇ）

m.ts10806

2019/03/04 08:15

ＴＨＭＬではなくHTML 名前が決まっているものは正確に書かないとそもそも文章内容の正当性が失われます。 >azuapricotさんまあそこは質問の仕方と言う観点で。今後同じようなレベルで質問されても困るわけですし。

退会済みユーザー

2019/03/04 08:15

みなさんすみませんでした。あっていました。

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

回答1件

ベストアンサー

CSS
1@charset="utf-8"
2.sample1 {
3    text-align: center;
4    padding: 20px;
5    height: 50px;
6    width: 300px;
7
8    border-style: solid; /*違うのはこのボーダースタイルだけ*/
9}
10.sample2 {
11    text-align: center;
12    padding: 20px;
13    height: 50px;
14    width: 300px;
15
16    border-style: double; /*違うのはこのボーダースタイルだけ*/
17}
18.sample3 {
19    text-align: center;
20    padding: 20px;
21    height: 50px;
22    width: 300px;
23
24    border-style: dotted; /*違うのはこのボーダースタイルだけ*/
25 }

簡単なお話で、
・text-align:center;
・padding: 20px;
・height: 50px;
・width: 300px;

は3箇所全てに書かれていますよね。

無駄なんです。こんなにいりません。まとめてかけばいいんです。

CSS
1
2/*Pタグ全てに共通するCSSをまとめる*/
3p { 
4    text-align: center;
5    padding: 20px;
6    height: 50px;
7    width: 300px;
8    float:left
9}
10
11/*あとはそれぞれ固有のCSSをクラス名を使って書くだけ*/
12.sample1 {
13    border-style: solid;　
14}
15.sample2 {
16    border-style: double;
17}
18.sample3 {
19    border-style: dotted;
20}