CSSの入力方法について教えてください

質問

CSSの入力方法について教えてください
私はプラグインを使用してtableを制作したのですがHTMLコードの最上段に下記のような表示がされてありました。

全体の指示がされてあると思うのですが、自分なりにCSSで入力してもうまく表示できないでいます。すみませんがおわかりの方がおられましたら教えていただければと思います。どうぞよろしくお願いいたします。

<table class="aligncenter" style="border-color: #2d89ef; background-color: #ffffff;" border="2px" cellpadding="10px">

補足補足させていただきます
私はHTMLに CSSを直接記述する方法で<style type="text/css">の下に下記のように入力しました。

■ここから下が自分が入力してみたCSSの記入ヶ所です

.whole{
align: center;
border-color: #2d89ef;
background-color: #ffffff;
border: 2px;
cellpadding: 10px;
}

■HTMLの一番上に下記のように入力しました
<table class="whole">

■結果
自分が入力すると外枠の罫線の色と幅が反映されていません。

■元のHTMLのcode
<table class="aligncenter" style="border-color: #2d89ef; background-color: #ffffff;" border="2px" cellpadding="10px">
の時は希望通りに表示されていました

以上の点を参考にしていただければと思います。長い文章ですみませんがよろしくお願いいたします。

回答No.1

tracer · ベストアンサー

cssは、書き方や書く場所や書く順序によって反映される優先順位が変わってきます。

<table class="aligncenter" style="border-color: #2d89ef; background-color: #ffffff;" border="2px" cellpadding="10px">

上記をインラインcssと呼びます。
htmlタグに直接指定するこの書き方は、「cssの記述場所」としては、もっとも優先順位が高い場所で、<style type="text/css">での指定よりも優先に扱われるため、<style type="text/css">での指定が無効になっていると思われます。

解決策としては、以下の方法が考えられます。

1.インラインcssの記述を削除し、<style type="text/css">の中だけにcssを記述する。

2.<style type="text/css">には記述せずに、インラインcssの値を書き換える。

3.上記のようにインラインcssでの記述を変更できない場合は、最終手段として<style type="text/css">の中で!important宣言をして優先順位を変更します。

お礼

tracerさんの回答が教科書のように大変わかりやすくとても勉強になりました。
!important宣言など初めて聞くコードもありましたがアドバイスを踏まえてそれらも応用できるように試行錯誤しながら制作してみたいと思います。大変為になりましたありがとうございました。