Learn how you can highlight your images and separate them from the surrounding text by adjusting their borders, margins, and padding.
- [Instructor] Let's look at how to use CSS,…Cascading Style Sheets,…to change how your images are displayed.…Here's the markup for three pictures…of eagle-themed art in Washington, D.C.…The image elements are on lines 22 through 27.…Here's what it looks like in the browser.…Since image is an inline element,…all the images show up on the same line.…You might notice that it's difficult to see…where the top edge of the right-hand image is…because its background color is very close to white.…Putting borders on all the images will solve that problem.…
You can use this shorthand CSS to set the border width,…style, and color all at the same time.…The width can be specified as a CSS length specifier,…such as pixels, points, 1/72 of an inch,…inches, millimeters, or em units,…which is a way of saying the current font size.…The border style can be any one of the ones shown here.…The link at the bottom of the page…will show you what each one of them looks like.…And the border color can be specified…in a number of different ways,…
AuthorJ. David Eisenberg
- Using the img element
- Resizing images
- Obtaining images for your website
- Image formats and when to use them
- Styling images with CSS
- Adjusting borders, margins, and padding
- Adding background images
- Testing screen resolutions
- Autonumbering figures with CSS
Skill Level Intermediate
Design the Web: Responsive SVG Imageswith Chris Converse22m 46s Beginner
1. Image Essentials
2. Image Formats
3. Images and CSS
4. Responsive Images
Next steps1m 19s
- 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.