Style Tag Problem

Discussion in 'HTML and CSS' started by newbie1500, May 16, 2020.

  1. newbie1500

    newbie1500

    Joined:
    Apr 21, 2020
    Messages:
    3
    Likes Received:
    0
    Dear Colleagues,

    I am trying to make the headings 'Track & Field' and 'Rugby' appear orange in color and the headings 'The First Programmer' and 'The First Compiler' appear green in color, but they all appear black when the code is tested ( also some of my coding appears just below 'GIANTS & HEROES', which should not be happening ). Any help is appreciated in targeting a group using html and css . My coding is:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Lesson 2 Challenge 4</title>
    <style>
    #heading{
    font-family: Arial;
    background-color: red;
    color: white;
    }

    #uppercase {
    text-transform: uppercase;
    }


    </style>
    </head>
    <body>

    <div id="heading">
    <h1> Sporting History</h1>
    <p id='uppercase'>
    Giants & Heroes
    </p>
    </div>
    .sports-history{
    color:eek:range;

    .computing-history{
    color:green;


    <h3 class="sports-history"> Track & Field</h3>
    <p>
    Some sporting feats ridicule expectations, fewer violate logic but the rarest of all added a defying of gravity to a hat-trick of achievements. At 3.45pm on 18 October 1968 in Mexico City’s Estadio Olímpico Universitario Bob Beamon accomplished all three.
    </p>

    <h3 class="sports-history">Rugby</h3>
    <p>
    With the game locked at 10 – 10 with thirty minutes on the clock, a Munster scrum just outside the Biarritz line enabled Peter Stringer to do the unexpected and break on the blindside for an unforgettable try. A moment of sheer brilliance by the Munster and Ireland scrumhalf. The try proved to be crucial as Munster won by 23 – 19 to lift the European Cup in Cardiff.
    </p>

    <h3 class="computing history">The first Programmer</h3>
    <p>
    Ada Lovelace was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published the first algorithm intended to be carried out by such a machine. As a result, she is sometimes regarded as the first to recognise the full potential of a "computing machine" and the first computer programmer.
    </p>

    <h3 class="computing-history">The first Compiler</h3>
    <p>
    Grace Hopper was an American computer scientist and United States Navy rear admiral. One of the first programmers of the Harvard Mark I computer, she was a pioneer of computer programming who invented one of the first compiler related tools.
    </p>

    </body>
    </html>
     
    newbie1500, May 16, 2020
    #1
    1. Advertisements

  2. newbie1500

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    115
    Likes Received:
    16
    You are correct in using classes and then setting the class to the needed color. BUT the rules must be place between <style> tags and those placed in the header.
    I see you started the code in the body just before the
    <h3 class="sports-history"> Track & Field</h3>
    So move that code into the CSS section and end each selector with a }
    Only one error to correct - <h3 class="computing history">The first Programmer</h3> needs a - between words in the class.
    computing-history

    Before I let you go. I understand the <h3>, but the next header should be <h2> and you should scale the font size down in the CSS. Using <h3> looks like your using headers to set the size.

    Code (Text):

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Lesson 2 Challenge 4</title>
    <style>
    #heading {
        font-family: Arial;
        background-color: red;
        color: white;
    }
    #uppercase {
        text-transform: uppercase;
    }
    .sports-history{
        color: orange;
    }
    .computing-history{
        color: green;
    }
    </style>
    </head>

    <body>
    <div id="heading">
        <h1> Sporting History</h1>
        <p id='uppercase'>
            Giants & Heroes
        </p>
    </div>
    <h3 class="sports-history"> Track & Field</h3>
    <p>
        Some sporting feats ridicule expectations, fewer violate logic but the rarest of all added a defying of gravity
        to a hat-trick of achievements. At 3.45pm on 18 October 1968 in Mexico City’s Estadio Olímpico Universitario Bob
        Beamon accomplished all three.
    </p>
    <h3 class="sports-history">Rugby</h3>
    <p>
        With the game locked at 10 – 10 with thirty minutes on the clock, a Munster scrum just outside the Biarritz line
        enabled Peter Stringer to do the unexpected and break on the blindside for an unforgettable try. A moment of
        sheer brilliance by the Munster and Ireland scrumhalf. The try proved to be crucial as Munster won by 23 – 19 to
        lift the European Cup in Cardiff.
    </p>
    <h3 class="computing-history">The first Programmer</h3>
    <p>
        Ada Lovelace was an English mathematician and writer, chiefly known for her work on Charles Babbage's proposed
        mechanical general-purpose computer, the Analytical Engine. She was the first to recognise that the machine had
        applications beyond pure calculation, and published the first algorithm intended to be carried out by such a
        machine. As a result, she is sometimes regarded as the first to recognise the full potential of a "computing
        machine" and the first computer programmer.
    </p>
    <h3 class="computing-history">The first Compiler</h3>
    <p>
        Grace Hopper was an American computer scientist and United States Navy rear admiral. One of the first
        programmers of the Harvard Mark I computer, she was a pioneer of computer programming who invented one of the
        first compiler related tools.
    </p>
    </body>
    </html>
     
     
    sunfighter, May 27, 2020
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads
There are no similar threads yet.
Loading...