have a navigation area whose buttons become bold and the border bolder when the
ID: 3716082 • Letter: H
Question
have a navigation area whose buttons become bold and the border bolder when the mouse hovers over them. You can make the border bolder by changing its width from 1px to 3px. They have 4px of padding and margin of 5px. The color of the buttons, the horizontal line, and the headings is #273294. This is done using javascript.
How can I incorporate this into my HTML:
<html>
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Additional Cases
Case 1
Filename: young.htm
Supporting files: student1.jpg - student5.jpg, ynlogo.jpg, ystyles.css
-->
<title>Young Notes</title>
<link href="ystyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContent">
<h1 id="head">
<img src="ynlogo.jpg" alt="Young Notes" />
</h1>
<ul id="links">
<li><a href="young.htm">Home</a><a/></li>
<li><a href="lessons.htm">Lessons</a><a/></li>
<li><a href="staff.htm">Our Staff</a></a></li>
<li><a href="events.htm">Upcoming Events</a></li>
<li><a href="application.htm">Application</a></li>
</ul>
<div id="main">
<h2>The Young Notes Mission Statement</h2>
<img src="student1.jpg" alt=" " />
<img src="student2.jpg" alt=" " />
<img src="student3.jpg" alt=" " />
<img src="student4.jpg" alt=" " />
<img src="student5.jpg" alt=" " />
<p>
Young Notes is dedicated to the idea that everyone has the ability
to perform and appreciate music and that a life begun with the gift
of music will grow in joy.</p>
<h2>Our Philosophy</h2>
<p>There are few things as rewarding as being able to play a role in
the growth of a student's musical talent. New doors open when a student
discovers a composer, attends a concert, learns a new piece, or performs
for an appreciative audience. We want our students to have a positive
experience, establish good practice habits, and have fun. We accept
the responsibility of providing the finest instruction for each of our
students, of continuing to study and practice our musical art, and
of being active members of the community, fully engaged in bringing music
to our neighbors.</p>
<h2>Why Choose Young Notes?</h2>
<p>The Young Notes music program is so much more than music lessons. We strive
to give our students the best music education possible. Here are a few things
that set us apart:</p>
<ul>
<li><strong>Family Friendly</strong> We have programs for everyone in your family!
With instruction for just about every instrument, we can arrange lessons
for the whole family at one convenient time.</li>
<li><strong>Highly Qualified Instructors</strong> Young Notes has some of the
area's best teachers. Take a look at our instructor bios.</li>
<li><strong>Orientation Interviews</strong> Finding a good student/teacher match
is essential to a student's success. We offer "get to know you"
complementary lessons to match each student to the right teacher.</li>
<li><strong>Performance</strong> With an ongoing schedule of recitals, music
festivals, and contests (competitive and non-competitive), students have a
chance to hone their performance skills in a friendly, supportive
environment.</li>
<li><strong>Open Rooms</strong> During specified hours you can come in and practice!
Call our office to schedule a time.</li>
</ul>
<p>We look forward to seeing you soon at Young Notes!</p>
</div>
<address id="footer">
Young Notes ·
175 South Avenue ·
Brownwood, TX 76801 ·
(325) 555 - 0155 ·
info@youngnotesschool.com
</address>
</div>
</body>
</html>
Explanation / Answer
Assumption: by 'buttons become bold' you mean, the text in the button becomes bold.
So here is the solution for making button-text and borders bold using css styling.
<html>
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Additional Cases
Case 1
Filename: young.htm
Supporting files: student1.jpg - student5.jpg, ynlogo.jpg, ystyles.css
-->
<title>Young Notes</title>
<link href="ystyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#links button:hover{
font-weight: 700; /* for bold text */
border-width: 3px;
}
#links button{
font-weight: 500; /* for normal text */
border-color: black;
border-width: 1px;
padding: 4px;
margin: 5px;
color: #273294;
}
#links li{
display: flex;
float: left;
}
#links{
display: inline-block;
}
</style>
</head>
<body>
<div id="pageContent">
<h1 id="head">
<img src="ynlogo.jpg" alt="Young Notes" />
</h1>
<ul id="links">
<li><button><a href="young.htm">Home</a></button></li>
<li><button><a href="lessons.htm">Lessons</a></button></li>
<li><button><a href="staff.htm">Our Staff</a></button></li>
<li><button><a href="events.htm">Upcoming Events</a></button></li>
<li><button><a href="application.htm">Application</a></button></li>
</ul>
<div id="main">
<h2>The Young Notes Mission Statement</h2>
<img src="student1.jpg" alt=" " />
<img src="student2.jpg" alt=" " />
<img src="student3.jpg" alt=" " />
<img src="student4.jpg" alt=" " />
<img src="student5.jpg" alt=" " />
<p>
Young Notes is dedicated to the idea that everyone has the ability
to perform and appreciate music and that a life begun with the gift
of music will grow in joy.</p>
<h2>Our Philosophy</h2>
<p>There are few things as rewarding as being able to play a role in
the growth of a student's musical talent. New doors open when a student
discovers a composer, attends a concert, learns a new piece, or performs
for an appreciative audience. We want our students to have a positive
experience, establish good practice habits, and have fun. We accept
the responsibility of providing the finest instruction for each of our
students, of continuing to study and practice our musical art, and
of being active members of the community, fully engaged in bringing music
to our neighbors.</p>
<h2>Why Choose Young Notes?</h2>
<p>The Young Notes music program is so much more than music lessons. We strive
to give our students the best music education possible. Here are a few things
that set us apart:</p>
<ul>
<li><strong>Family Friendly</strong> We have programs for everyone in your family!
With instruction for just about every instrument, we can arrange lessons
for the whole family at one convenient time.</li>
<li><strong>Highly Qualified Instructors</strong> Young Notes has some of the
area's best teachers. Take a look at our instructor bios.</li>
<li><strong>Orientation Interviews</strong> Finding a good student/teacher match
is essential to a student's success. We offer "get to know you"
complementary lessons to match each student to the right teacher.</li>
<li><strong>Performance</strong> With an ongoing schedule of recitals, music
festivals, and contests (competitive and non-competitive), students have a
chance to hone their performance skills in a friendly, supportive
environment.</li>
<li><strong>Open Rooms</strong> During specified hours you can come in and practice!
Call our office to schedule a time.</li>
</ul>
<p>We look forward to seeing you soon at Young Notes!</p>
</div>
<address id="footer">
Young Notes ·
175 South Avenue ·
Brownwood, TX 76801 ·
(325) 555 - 0155 ·
info@youngnotesschool.com
</address>
</div>
</body>
</html>
Here the <style> ... </style> part have been added, which represents the css script and the navigation bar now contains buttons, for which the <button> tag is used.
The button color is #273294. If you want any other object to be colored with the same color, add css in the <style> section.
e.g. Adding color to div with id="main":
// add the following script to before </style>
#main{
color: #273294;
background-color: #aaaaaa;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.