Modifying the CSS
CSS allows us to “dress up” the content on our page.
Tour the Existing CSS
- CSS allows us to target types of elements (ex:
body
,p
) and specific elements based on class name (ex:card-title
) - Once we’ve targeted an element, we can write rules for that element to follow. Rules can be things like “the font-size of this element should be 20px” or “the maximum width of this element should be 70% of the width of the page”
Explore to Learn
After you complete each task, click Run
and observe the changes in the browser. If you like the change, keep it!
- On line 2 of the
style.css
file, change#db8a74
togoldenrod
- On line 8, change
#fac9b8
towhite
- What is the difference between the color and background properties?
- On line 12, change
70%
to40%
- On line 18, change
30px
to50px
You may be wondering, “how does one know all these special properties to create these rules?”. Great question! With time and practice, and the use of documentation like MDN and CSS Tricks, developers slowly build their toolkit. Even the most experienced developers need to continually research and use Google to find the tool they need.
Add a New CSS Rule
When the page loads, we probably don’t want the definitions to be visible yet. To change this, add display: none;
to the last line of the .card-text
rules. Now, when we run our code, we can no longer see the definitions!
The previous change made the definitions for our terms disappear, but we sometimes want them to show on the screen. To do this, we can create another CSS rule to show the text and rotate the button. We will only add that class to the element when we want it to show! Add this code block at the very bottom of your CSS file. It won’t do anything yet, but after we write some JavaScript, you will see how it works.
.show-text .card-text {
display: block;
}
.show-text .card-btn {
transform: rotate(180deg);
}
If you want to check that you are on the right track, you can compare your code with this replit.
Breakouts: Modify the Existing Code
Now that we can see how CSS impacts the visual elements of a webpage, let's continue in this process of "making it our own".
- Play around with sizes or colors until you are satisfied with your page.
- If you're looking for a challenge, you can change up the layout of your cards using Flexbox. To get started, add
display: flex;
andflex-flow: row wrap;
to your.container
CSS rules.
CSS Summary
- CSS allows us to target an element and write specific rules for it to follow.
- Based on the type of rule, CSS will expect different values (ex:
goldenrod
or a hex code for a color and10px
or50%
for a measurement). - There are many types of rules we can write; with practice, we become familiar with more but don’t need to memorize them all.