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
From the course: Designing Websites from Photoshop to Dreamweaver
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…
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.
Contents
-
-
-
-
-
-
Create a Bootstrap file5m 8s
-
Create rows for page content7m 20s
-
Customize the navigation menu5m 33s
-
Menu styles6m 57s
-
Menu alignment3m
-
Add a carousel4m 50s
-
Use the Photoshop extractor7m 32s
-
Create custom CSS, part 16m 43s
-
Create custom CSS, part 25m 58s
-
Code for SEO and accessibility6m 23s
-
Error checking with the Validator tool3m 7s
-
The Clean Up HTML tool34s
-
The Link Checker panel2m 51s
-
-
-