CSSの基本文法1

HTML の要素に対して色・大きさ・配置などを指定、ページをデザインするための言語。
CSSは、HTMLとは別のファイルに記述する。
HTMLで用意した要素に対して、CSSを用いて「どこの」「何を」「どうする」かを指定することができる。

・文字の色を変える

h1{
  color:#ff0000;
}

h1要素の、color（色）をred（赤）にしています。
主要な色の場合redなどで指定できる。

・文字の大きさを変える

h1{
  color:#ff0000;
  font-size:10px;
}

大きさを指定するにはfont-sizeプロパティを要する。
font-sizeはpx(ピクセル）という単位を用いて指定。

・文字の種類を決める

h1{
  font-family:serif;
}
p{
  font-family:"Avenir Next"
}

font-familyを要すると、フォントの種類を指定できる。
font-family:フォント名とすることで、要素にフォントを適用できる。
フォント名にスペースがある場合は""で囲む。

・背景色を変える

h1{
  background-color:#ddd
}

背景色を変えるにはbackground-colorプロパティを用いる。 色の指定の方法はcolorプロパティと同じ。

・横幅、高さを変える

h1{
  width:500px
  height:80px
}

要素の横幅、高さを変更したいときには、それぞれwidthプロパティ、heightプロパティを用いる。
width(幅）とheight(高さ）はpxで指定。

・タグに名前をつける

要素にはclassを使って名前をつける。
classをつけることにより、それぞれの要素を識別し、別々のCSSを適用することができる。
class名でCSSを指定する場合、先頭にドット「.」が必要な点に注意する。

<index.html>                                              

<ul>  
  <li class="selected">HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<stylesheet.css>

.selected{
  color:red;
}

このコードの結果はHTMLだけが赤くなる。
同じclass名をつけると、selectedというclass名が付いている全てのHTML要素に同じCSSが適用される。
＊注意点
classの場合はドットが必要で、タグの場合は必要ない。