when doing a lesson, there is a part where I have to select a tag (h5) to change color purple on CSS. but I put another color on an h5 using the class (.publish-time) on gray. Why did it still changed to purple even though I have a class, meaning that the element is more specific than the tag?
and the class is applying the color just fine. Please provide code when asking such questions, given otherwise its really difficult to replicate and solve the problem
Notice please in both images how I put class=“publish-time” on h6 and on CSS I put .publish-time in color red and it still does not change. Am I doing something wrong?
<!DOCTYPE html>
<html>
<head>
<link href="style.css"type="text/css" rel="stylesheet">
<title>Vacation World</title>
</head>
<body>
<h1 class="title cursive capitalize">Top Vacation Spots</h1>
<h5>By: Stacy Gray</h5>
<h6 class="publish-time">Published: 2 Days Ago</h6>
<p>The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>
<h2 class="destination">1. Florence, Italy</h2>
<div class="description">A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical pastDante, Michelangelo, Galileo, Machiavelliare some of the most resonant of the medieval age.
<h5>Top Attractions</h5>
<ul>
<li>Museums</li>
<li>Bike Tours</li>
<li>Historical Monuments</li>
</ul>
</div>
<h2 class="destination">2. Beijing, China</h2>
<div class="description">A city in the midst of reinventing itself and continuing to build on the success of the 2008 Summer Olympics, Beijing is a place of frenzied construction. New housing, new roads, and new sports venues seem to spring up overnight. At the same time, the capital of the Peoples Republic of China remains an epicenter of tradition, with the treasures of nearly 2,000 years as the imperial capital still on viewing the famed Forbidden City and in the luxuriant pavilions and gardens of the Summer Palace.
<h5>Top Attractions</h5>
<ul>
<li>Biking</li>
<li>Historical Sites</li>
<li>Restaurants and Dining</li>
</ul>
</div>
<h2 class="destination">3. Seoul, South Korea</h2>
<div class="description">The Korean capital is a city of contrasts. Fourteenth-century city gates squat in the shadow of 21st-century skyscrapers, while the broad Han River is back-dropped by granite mountains rising in the city centercomplete with alpine highways speeding around their contours and temples nestling among their crags. Fashionable, gadget-laden youths battle for sidewalk space with fortune-tellers and peddlers, while tiny neighborhoods of traditional cottages contrast with endless ranks of identical apartments.
<h5>Top Attractions</h5>
<ul>
<li>Parasailing</li>
<li>Segway Tours</li>
<li>Spas and Resorts</li>
</ul>
</div>
<h2> More Desinations </h2>
<ul>
<li><h4 class="destination">Jackson Hole, Wyoming</h4></li>
<li><h4 class="destination">Cape Town, South Africa</h4></li>
<li><h4 class="destination">La Paz, Bolivia</h4></li>
</ul>
<p>—Best of luck with your travels, and be sure to send pictures and stories. We"d love to hear them!</p>
</body>
</html>
Seems all fine? Css uses a point system to resolve conflicting css property. A element (h5 for examle) is worth 1 point, a class 10 points, an id 100 points and inilne style 1000 points.
which (chained) css selectors is the property that is getting applied. If there are an even number of points, the last property gets applied
its actually really nice that classes overrule elements.
I’m trying to run .publish-time in color red o CSS. Since I specify that on CSS I don’t know why shows up. Does my code have an even number of points? How can I know how many points I have to see if the specific code I want applies?
.uppercase {
text-transform:uppercase;
}
} // what is this one for?
see comment. You simple have a } too many
points are only relevant when having conflicting css properties, which you do not have
you can’t see, you have to know how much each selector is worth. You can find this on the internet. But this is totally not relevant to your problem at the moment