From the course: Creating a Responsive Web Experience
Join today to access over 22,600 courses taught by industry experts.
Styling the hero captions
From the course: Creating a Responsive Web Experience
Styling the hero captions
Next we're going to style the content inside of the caption area, inside of the hero. So back in the myWebsite project let's take screen_styles.css inside of our CSS folder, and open this up in our text editor. Now the rules inside of this CSS file, mostly applied to text and any design elements that are consistent across all the screen sizes. So inside up here, lets scroll down to the bottom. Let's hit a few returns, and in here we're going to target the caption inside of the panel inside of the hero ID. So, first we'll start with #hero .panel .caption. We're going to set the text color, rgba. We're going to set this to 65% white, so 255, 255, 255, then .65. We're going to set a line height of 14 pixels. Next, we're going to target the h3s inside of the caption, so #hero .panel .caption h3. We're going to set color to white. Font size is going to be 1.2 ems. Then margin bottom of five pixels. Next we'll target the paragraphs. #hero .panel .caption p. We'll set margin bottom of five…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.