Scribd
Upload
317 views

CSS Exercises

Add an external style sheet called "mystyle.css" and make the following style changes: change text colors of various elements, set background colors, add borders, modify margins/paddings, set image/link styles, and modify other element properties like width, font size, shadows etc. Group selectors when possible to minimize code. Apply various CSS properties to individual elements, descendants, and hover/active states.

Uploaded by

Ms. Shweta Singh Assistant Professor (CSE)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
317 views

CSS Exercises

Add an external style sheet called "mystyle.css" and make the following style changes: change text colors of various elements, set background colors, add borders, modify margins/paddings, set image/link styles, and modify other element properties like width, font size, shadows etc. Group selectors when possible to minimize code. Apply various CSS properties to individual elements, descendants, and hover/active states.

Uploaded by

Ms. Shweta Singh Assistant Professor (CSE)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Task 1: Bring the following style changes to your HTML .

Add an external style sheet with the URL: "mystyle.css".

1. Change the color of all <p> elements to "red".


2. Change the color of the element with id="para1", to “blue".
3. Change the color of all elements with the class "colortext", to
“green".
4. Change the color of all <p> and <h1> elements, to “red". Group
the selectors to minimize code.
5. Set the background color for the page to "linen" and the
background color for <h1> to "lightblue".
6.B) Set “sample.png" as the background image of the page, and
repeat it vertically only.

7. Specify that the background image should be shown once, in


the top right corner.

8. Set a "4px", "dotted" border for <p>.

9. Set the border color for <p> to "red".

10. With the border property: Set the border for p to "10px",
"solid" and "green".
11. Set the left margin of <h1> to "20px".

12. Use the margin property to set the top and bottom margins for
<h1> to "50px", and left and right margins to "25px".

13. Set all paddings for <p> to "50px".

14. Set the width of <h1> to "50%".

15. Set the width of the div to "200px".

16. Set the border of the div to "25px solid navy".


17. Remove the underline from the link.

18. Style text in <h1> to uppercase letters, and text in <p> to


capitalized letters.

19. Show <p> elements as "italic" text.

20. Set the font size for the page to "20px", and the font size for
<h1> to "3em".

21. Set the color for unvisited links to "red", and the color for visited
links "blue".
22. Set the background color for visited and unvisited links to
"lightblue", and the background color for the hover and active link
states to "yellow".

23. Set the list style for unordered lists to "square", and the list
style for ordered lists to "upper-roman".

24. Set the border to "2px solid green" for table, th and td
elements.

25. Collapse the table borders into a single border.


(hint:border-collapse: collapse;)
26. Change the color of all <p> elements, that are descendants of
<div> elements, to "red".

27. Change the color of all <p> elements, that are immediate
children of <div> elements, to "red".

28. Change the background color, when a user hovers over p


elements, with the class "highlight", to "lightblue".

29. Set text color to "red", and the text size to "xx-large", for the first
letter of the <p> element.
30. Remove the transparency/opacity of the <img> element when
the user hovers over it with the mouse pointer.

31. Give the <div> element rounded corners (use the shorthand
property and the value "25px").

32. Set a "2px" horizontal, and "2px" vertical, text shadow for the
<h1> element.

33. Set a "10px" horizontal, and "10px" vertical, box shadow for the
<div> element.
(hint: div { box-shadow: 10px 10px; } )

You might also like