Почему некоторые элементы в моем HTML & CSS не связаны?

Question

Ниже мое HTML:

<meta charset="utf-8">

<title>Animal Trading Cards</title>

<link rel="stylesheet" href="styles.css">

<div id="card">

    <h1 class="title">Tiger</h1>

    <img class="picture" src="tiger.jpg" alt="Tiger">

    <div id="card-info">

        <p class="fact">The tiger is the largest cat species.</p>

        <ul class="list">

            <li><span class="label">Scientific Name</span>: Panthera tigris</li>

            <li><span class="label">Average Weight</span>: 485 pounds</li>

            <li><span class="label">Average Lifespan</span>: 10-15 years</li>

            <li><span class="label">Habitat</span>: Forests, grasslands, swamps, and woodlands</li>

        </ul>

        <p> A Tiger is a powerful carnivore, a hunter with sharp teeth, strong jaws, and a very agile body. They are the largest naturally occurring species of cat, of which the Siberian tiger is the largest, weighing up to 800 pounds and measuring up to 11 feet head to tail.</p>

    </div>

</div>

Мой CSS ниже. Например, мое изображение в моем коде не меняет размер. Пункты, которые должны быть выделены курсивом, не являются ...

html {
  font-family: Arial, Helvetica, sans-serif;
}

#card {
width: 300px;
padding: 10px;
border: 1px solid #cccccc;
box-shadow: 5px 5px
}

.title {
font-weight: bold;
}

.picture {
  width: 300px;
  height: 200px;
}

#card-info {
margin: 0px;
padding: 10px;
border: 1px solid #cccccc;
}

.fact {
font-style: italic;
}

.list {
  list-style: none;
  padding: 0px;
}

.label {
 font-weight: bold;
}

Извините, совершенно новичок в этом. Это мой первый пост! Я полагаю, что на самом деле go два, чтобы связать правильно после помещения их в отдельную папку на моем рабочем столе.

Answer 1

Чтобы изменить размер изображения,

img {
    width: 200px;
    height: 200px;
}

Чтобы изменить размер шрифта для метки вашего класса,

.label {
    font-size: 30px;
}

Чтобы изменить свой текст itali c, для метки вашего класса,

.label {
    font-style: italic;
}

Если вы использовали их и до сих пор не видите на своей веб-странице, это может быть потому, что вы используя css в отдельном файле, styles.css. Возможно, ваш браузер не синхронизирует c последние css данные и все еще использует старые кэши. (рекомендуется использовать firefox браузер или нажать Ctrl + F5, чтобы обновить sh страницу в chrome)