4.10. CSS Exercises¶
Add a CSS rule and appropriate html to style every other line of the unordered list with a light blue background color. Specify the background color using the rgb method.
Given the table in the html code in the question style the table so that the odd rows have a light gray background In addition and a header row to the table and style that row so it has white text and a black background color. Change the font so that they are all 14 point sans serif of some kind.
Suppose you are working on a recipe website. Recipes have a title, a list of ingredients, and an instructions section. Make a webpage that shows the recipe for grilled cheese sandwiches with bacon and tomato. The ingredients should be displayed as an unordered list, with no bullets. meat ingredients should have a light red background color, vegetables should have a light green background, and dairy products should have a light yellow. The title should be in a sans serif font of your choice, and the instructions should have a heading “Instructions” and the font for the instructions should be italic.
Using CSS and HTML Make a webpage that has two columns. Each column should use half of the width of the page. The left half should have a light gray background and the right half should have a light green background. The left half should have a list of the 5 best selling books in Amazon’s kindle store, and the right should have a list of your five favorite celebrities or athletes.
Using the nav element, make a navbar for at the top of a sample webpage. Add at least three links to the navbar using an unordered list that is displayed as inline rather than block. Make the navbar have a light blue background color, but change the background of the title to a darker blue when the mouse hovers over it. (see the :hover selector)
Using the image of the playing card, use transformations and animations to make the playing card spin around endlessly.
Using the template developed in the layout chapter, develop a homepage for yourself, published on github pages, that employs a two column layout with a fixed navbar (always on screen), and a footer. The navbar should link to at least two additional pages used to describe your hobbies or favorite teams. The CSS for this website should be contained in its own CSS file, and all three pages should use this CSS file.
Modify the final version of the menu project so that the menu is a horizontal menu with the first level of submenus dropping down below the selected item.