CSS9 〜背景スタイル〜

下記のWebページを内部スタイルシート形式で作成してください。
事前準備
ヒント
こたえ
- ソースコード

下記のWebページを内部スタイルシート形式で作成してください。

事前準備

デスクトップ上にフォルダ「webst8」を作成します(すでに作成済みの場合は不要です)。

「webst8」フォルダの中に「css-lesson9」フォルダを作成して、Atomで「lesson9.html」を新規作成します。

背景画像は下記を利用してください。

以下は背景設定に関するCSS無しのHTMLファイルです。下記のHTMLコードを利用して「lesson9.html」に内部スタイルシート形式でCSSを記述していってください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSS</title>
    <style media="screen">
      body{
        ？？？？？
      }
      h1{
        text-align:center;
        ？？？？？:#336699;
        color:white;
        padding:10px;
        margin:0;        
      }
    </style>
  </head>
  <body>
    <h1>CSS超入門セミナーのご案内</h1>
    <p>
      CSS超入門セミナーは下記の通り開催しますので奮ってご参加ください。
    </p>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>はじめてのCSS</title>

body{

？？？？？

}

h1{

text-align:center;

？？？？？:#336699;

color:white;

padding:10px;

margin:0;

}

</style>

</head>

<body>

<h1>CSS超入門セミナーのご案内</h1>

<p>

CSS超入門セミナーは下記の通り開催しますので奮ってご参加ください。

</p>

</body>

</html>

一通り記述できたら上書き保存して「lesson9.html」をダブルクリックして開きます。課題にあった画面通り表示されていれば、完成です。

ヒント

背景に関するスタイル | 初心者がはじめに覚えておきたい CSS の基本とプロパティ一覧

こたえ

作り方を下記に載せました。

css-lesson9

ソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>はじめてのCSS</title>
    <style media="screen">
      body{
        background:url(images/bg-sample1.png);
      }
      h1{
        text-align:center;
        background:#336699;
        color:white;
        padding:10px;
        margin:0;        
      }
    </style>
  </head>
  <body>
    <h1>CSS超入門セミナーのご案内</h1>
    <p>
      CSS超入門セミナーは下記の通り開催しますので奮ってご参加ください。
    </p>
  </body>
</html>