This course will be retired on July 31, 2024. We recommend "Introduction to HTML and CSS" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
In this lesson, we learn more about how classes can be used to style multiple elements on the page with just one style rule. We'll also learn more about how we achieve creative layouts with essential CSS attributes such as padding and margin.
In this lesson, we practiced using classes to style multiple elements at a time. Classes allow us apply custom styles to a whole range of elements in one go - regardless of their tag or element type - so long as they all share the same class name! They're the secret weapon in the web developer's toolkit, and help us apply consistent styles to content every time.
Take these paragraphs of text written by Jamie and Rahmad, for example:
<p class="jamie"> I like studying on the weekend. <p>
<p class="rahmad"> I prefer studying on Sunday and Monday. </p>
<p class="jamie"> Oh, you study on Sundays? We should study together sometime! </p>
If we only applied a style to the <p>
tags, all the text would look the same. However, if we apply custom styles to each of the jamie
and rahmad
classes...
.jamie {
color: green;
}
.rahmad {
color: red;
}
...then we'd see that the first and third paragraphs would be green, and only the second paragraph would be red! With this kind of flexibility, we can create and associated custom styles to go with our classes, and have a lot more control over how we design our web content!
Undo edits in Workspaces
Operating System | Keyboard Shortcut |
---|---|
Mac OSX | Command ā + Z |
Windows | Ctrl + Zā |
New Terms:
- Padding - refers to the space between an element's content and its border.
- Margin - refers to the additional space or area around or outside an element.
Further Reading:
If you're eager to learn more and want to start developing a deeper understanding of how padding and margin work together in web design, you may want to read more about the box model:
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up