Css image responsive resize plus#

Press the up arrow once to change it to #hero p. Dreamweaver suggests #wrapper #hero p as the selector.

Css image responsive resize plus#

ItвЂ™s a good idea to keep related style rules together, so highlight #hero img in the Selectors pane of the CSS designer, and click the plus button.In Live View, select the paragraph immediately under the image of the Golden Gate Bridge.

The paragraph between the image of the Golden Gate Bridge and the first heading is nested inside the hero, so it can be styled differently from all other paragraphs by creating a descendant selector for #hero p. However, itвЂ™s not always necessary to use a class to style elements differently. In the previous section, you styled the image of the cable car differently from the hero image by assigning it a class. Learn more about synchronizing assets in the Creative Cloud. If you select either of the Linked options, the local version is automatically updated whenever the image is modified in the library in the Creative Cloud. Unlinked simply creates a local version of the image in your site. The context menu in the CC Libraries panel has Linked and Unlinked options for Insert and Download. Double-click the caption placeholder text, and replace it with The cable car terminus near Union Square.When an image is accompanied by a caption or is purely decorative, the alt attribute is not required, so you can ignore the warning. The purpose of the alt attribute is to provide alternative text for non-visual browsers, such as screen readers for the blind. If this happens, the Output panel will warn you that the alt attribute should have a value. Double-click the placeholder text for the element to enter Edit mode, select it, and press Delete to leave just the image and the caption placeholder.Дreamweaver might also remove alt='' from the tag in the underlying HTML.Click the icon at the top of the Properties pane, and set the following text properties for the new selector:.If necessary, double-click the selector to open the field for editing, and just type the group selector manually. Pressing the up arrow key to make a selector less specific works only when Dreamweaver first suggests a name for the selector. To apply the same rules to elements as well, click to the right of h1 in the editable field, and type a comma followed by h2. This now targets elements anywhere in the page.

This is still too specific, so press the up arrow key again to change it to just h1. To make a selector less specific, press the up arrow key once to change the suggestion to header h1. This is a very specific descendant selector that looks for elements nested inside elements that are in turn nested inside an element with the ID wrapper.

Because the heading is selected, Dreamweaver suggests #wrapper header h1 as the selector.

Then click the plus button to create a new selector. The next selector should go after #wrapper, so make sure thatвЂ™s selected in the Selectors pane.

Select the main heading in Live View, and make sure that responsive.css is selected in the Sources pane of the CSS Designer.

At the same time youвЂ™ll style the other headings. To solve the problem of the gap at the top of the page, you need to replace the top margin of the main heading with the equivalent amount of padding.