Jump to content

Do references to classes .item2, .item3, etc. in first try-it example under "Grid Lines" have any effect?


phunsoft
 Share

Recommended Posts

Hi,

Learning CSS with the help of W3Schools's great tutorials and exercices. I'm a bit confused about the first try-it example in topic "Grid Lines", which looks as follows:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

In the style part, attributes of only one item class, ".item1", are defined, but the HTML code refers to classes "item1", "item2", "item3", and so forth. As threre is no "item" class, except from "item1", all other references don't have any effect, right? What is the purpose of all thoe other "item" class references in this example?

 

Thanks

Peter

Link to comment
Share on other sites

The class names were probably given so that you can change the code and try styling the other elements for practice.

Even if that weren't the case, it's good to treat all of the elements equally because you don't know if you'll want to style different elements in the future when redesigning your website.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...