- [Narrator] Now in this challenge,…I asked you to make this HTML page on the left…look like this one on the right…using some basic CSS properties…that we've already gone over.…Let's go ahead, and I'll show you how I did it.…Now, the first mission was to set this wrapper at 70%,…and this wrapper holds all of our HTML content.…So I did that by using the wrapper class, right here,…and setting it to a width of 70%.…Next, we wanted to apply the same styles…to both the header and the footer.…
So instead of defining those styles separately,…I have combined these two selectors into a single statement.…So here, I've got my header class comma,…and footer class.…And here I've got my CSS setting my background color…to purple, my text color to white,…and applying a universal padding of 30 pixels to all sides.…Finally, we've got some styles…for this content section here.…The first thing I asked you to do was set a border.…Make it one pixel, solid, and black.…
Next, I asked you to set a padding of 30 pixels…to all sides in this content.…
- What is CSS?
- Understanding how CSS works with HTML
- Applying fonts
- Understanding the classic box model
- Setting margins and padding
- Positioning elements
- Basic CSS layout concepts
- Media types and media queries
- Working with CSS frameworks and CSS grids
- Creating responsive layouts
- Tools that help you write and maintain CSS
Skill Level Beginner
1. CSS Basics
2. CSS Specifications
3. Common CSS Concepts
4. CSS Layouts
5. Working with CSS
6. Responsive CSS
7. Going Further with CSS
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.