Styling a page layout often happens by building the page in parts. Learn how to apply the float property to style the header of your projects.
- [Instructor] In this exercise,…we'll focus on styling the header.…Currently, this is what your header area should look like…in your projects…and this is what we're trying to get to.…So the first thing we're going to focus on…is the profile image.…Something to note, images can be resized with CSS,…but it's best to crop the file to the size…that you need it to be.…There are many image editing tools you can use…such as Photoshop or Sketch,…or if you're looking for a free option,…there is this online tool called Pixlr.…
The larger the image, the more bandwidth…the browser will use to load it.…So it doesn't make sense to load a large image…just to make it smaller with CSS.…So it's okay if you're adjusting the size a little bit,…but if you can, crop your images before you use them.…On the flip side, if you have a small image…and make it larger with CSS,…it will looked pixelated and blurry.…Let's go back to our sample project.…In the the CSS, let's set the width and height…of our profile image to 300 pixels.…
If you have an image that is around 600 or even 800 pixels,…
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property
Skill Level Beginner
1. Getting Started
2. CSS Core
- 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.