简体   繁体   中英

Why are some items in my HTML & CSS not linking?

Below is my 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>

My CSS is below. My image in my code, for example, is not changing size. Items that should be italicized are not...

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;
}

Sorry, completely new to this. Its my first post. I believe I actually go the two to link properly after putting them in a separate folder on my desktop.

To change image size,

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

To change font size for your class label,

.label {
    font-size: 30px;
}

To change your text italic, for your class label,

.label {
    font-style: italic;
}

If you used these and still doesn't show in your webpage, it may be because, you are using css in separate file, styles.css . So, may be your browser doesn't sync latest css data and still using old caches. (recommened to use firefox browser or press ctrl+F5 to refresh the page in chrome)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM