From the course: Designing Websites from Photoshop to Dreamweaver

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Create custom CSS, part 1

Create custom CSS, part 1

From the course: Designing Websites from Photoshop to Dreamweaver

Start my 1-month free trial

Create custom CSS, part 1

- [Instructor] In this lesson, we'll get started creating the CSS styles we need to make our page match our mock-up, starting from the top down. So we'll begin by selecting row1 in the DOM. Let's scroll down here a little bit, click inside row1, and we're going to select the div called .row .row1. Now we'll switch over the CSS Designer panel. Make sure All is selected. Make sure the topsyturvy.css file is selected. And then we'll click on the Add Selector button. This should add a new selector with the name container-fluid .row .row1. But we'll simplify it by hand-coding in the selector field, just bringing it down to .row1, with that period before it. For this style, we'll add a minimum height of 300 pixels, with 50 pixels of padding on the top and bottom, and 10 pixels of padding on the left and right. To get the background color, we'll go to our Extractor, select that row, and choose Copy CSS. Then back in the CSS Designer panel, right-click on the selector name and choose Paste…

Contents