Styling Your Component#

Add style sheet#

To add a style sheet, we import the CSS file:

import "./App.css";

Exercise#

Style the component so that the dot on each item is removed and the question is underlined.

Solution

App.css

1.faq-item {
2  list-style-type: none;
3}
4
5.question {
6  text-decoration: underline;
7}

App.js

 1import "./App.css";
 2
 3function App() {
 4  return (
 5    <ul>
 6      <li className="faq-item">
 7        <h2 className="question">What does the Plone Foundation do?</h2>
 8        <p>
 9          The mission of the Plone Foundation is to protect and promote Plone.
10          The Foundation provides marketing assistance, awareness, and
11          evangelism assistance to the Plone community. The Foundation also
12          assists with development funding and coordination of funding for large
13          feature implementations. In this way, our role is similar to the role
14          of the Apache Software Foundation and its relationship with the Apache
15          Project.
16        </p>
17      </li>
18      <li className="faq-item">
19        <h2 className="question">Why does Plone need a Foundation?</h2>
20        <p>
21          Plone has reached critical mass, with enterprise implementations and
22          worldwide usage. The Foundation is able to speak for Plone, and
23          provide strong and consistent advocacy for both the project and the
24          community. The Plone Foundation also helps ensure a level playing
25          field, to preserve what is good about Plone as new participants
26          arrive.
27        </p>
28      </li>
29    </ul>
30  );
31}
32
33export default App;

--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,10 @@
+import "./App.css";
+
 function App() {
   return (
     <ul>
-      <li>
-        <h2>What does the Plone Foundation do?</h2>
+      <li className="faq-item">
+        <h2 className="question">What does the Plone Foundation do?</h2>
         <p>
           The mission of the Plone Foundation is to protect and promote Plone.
           The Foundation provides marketing assistance, awareness, and
@@ -13,8 +15,8 @@ function App() {
           Project.
         </p>
       </li>
-      <li>
-        <h2>Why does Plone need a Foundation?</h2>
+      <li className="faq-item">
+        <h2 className="question">Why does Plone need a Foundation?</h2>
         <p>
           Plone has reached critical mass, with enterprise implementations and
           worldwide usage. The Foundation is able to speak for Plone, and