Question

Navigation List Styles Go to the Navigation List Styles section. Format the hypertext links in the body header by adding a style rule for the body >header a that adds a 5-pixel outset border with color value rgb(211, 211, 255) Section Left Styles Next, format the appearance of the article title. Go to the Section Left Styles section and create a style rule for the h1 heading in the left section article that changes the text color to rgb(211, 211, 211) and adds a black text shadow with 0- pixel offsets and a blur size of 5 pixels. Andrew has included an image of Charles Messier, the originator of the Messier catalog of stellar objects. The image is marked with the id "mportrait". In the Section Left Styles section, create a style rule for this object that modifies the appearance of this image by applying the following filters: the drop-shadow filter with a horizontal offset of-15 pixels, a blur of 5 pixels, and a color of rgba(51, 51, 51, 0.9) . a grayscale filter with a value of 0.7; and an opacity filter with a value of 0.6. Andrew wants the Charles Messier image flipped horizontally. Add a style to transform the image by rotating it 180 around the y-axis. Footer Styles Go to the Footer Styles section and create a style rule for the edge of the footer with a color value of rgb(171, 171, 171). footer element that adds a 2-pixel solid border to the top

Answer 1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new css file with name "effects.css" is created, which contains following code.

effects.css :

/*External CSS file */

/*style rule for Navigation List */

body > header{

border: 5px outset rgb(211,211,255);

}

/*style rule for section left */

section#left article h1{

color:rgb(211,211,211);

text-shadow:0px 0px 5px black;

}

/*style rule for image with id=mportrait */

#mportrait{

filter: drop-shadow(15px 0px 5px rgba(51,51,51,0.9));

filter: grayscale(0.7);

filter:opacity(0.6);

transform: rotateY(180deg);

}

/*style rule for footer */

footer{

border-top: 2px solid rgb(171,171,171);

}

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.