HTML CSS CSS Quiz

Description

Click the following links for the tutorial for CSS and Quiz.

Center align the <div> element using margins.
Position the <div> element all the way to the right using absolute positioning.
Set the background-color to "pink" for elements with a "target" attribute.
Set the background-color to "pink" for elements with an attribute like: target="_blank"
Set a border with the color "red", around elements with a "title" attribute containing the word "red".
Set a border with the color "red", around elements with a "title" attribute starting with "red".
Set a border with the color "red", around elements with a "title" attribute ending with the word "flower" (not flowers).
Set a border with the color "red", around elements with a "title" attribute containing the value "flow".

Set the background color for the page to "linen" and the background color for <h1> to "pink".
Set the background image of the page.
Set the background image of the page, and repeat it vertically only.
Set the background image to show once, in the top right corner.
Use the shorthand background property to set background image, show it once, in the top right corner.
Set a "4px", "dotted" border for <p>.
Set the border color for <p> to "red".
Change the 3 border properties, so that they only show the border on the top side.

Set the border for p to "10px", "solid" and "green".
Set the width of the div to "200px".
Set the padding of the div to "25px".
Set the border of the div to "25px solid navy".
Set the margin of the div to "25px".
Change the color of all <p> elements, that are descendants of <div> elements, to "red".
Change the color of all <p> elements, that are immediate children of <div> elements, to "red".
Change the color of <p> elements, that are immediately following sibling of a <div> element, to "red".
Change the color of <p> elements, that are the siblings of a <div> element, to "red".
Move the <div> element 100px to the right, and 200px down.
Rotate the <div> element 45 degrees.
Change the size of the <div> to half its width, but double its height.
Skew the <div> element 20 degrees along the X-axis, and 30 degrees along the Y-axis.
Rotate the <div> element 150deg around its X-axis.
Rotate the <div> element 120deg around its Y-axis.
Rotate the <div> element 90deg around its Z-axis.
Add a 2 second animation for the <div> element, which changes the color from red to blue.
Add 5 steps to the animation
Set animation to have a "1" second delay before starting.
Set the animation to loop for ever.
Set animation to alternate between running forwards and backwards.
Set animation to have a "ease-in-out" speed curve.
Add a second background image to the <body> element.
Change the size of the background image to: width 100px, height 80px.
Change the size of the background image to fit the entire page.
Set the background image position to start from the upper left corner of the content-box.
Set the "painting area" of the background to the outside edge of the padding.
Give the <div> element an image border. Slice the image at 30px and repeat it.
Give the <div> element an image border. Slice the image at 30px and stretch it.
Give the <div> element rounded corners
Give the <div> element a rounded corner (25px radius) on the bottom left side.
Set the opacity for the background color of the <h1> element to "0.3" by using a RGBA color instead of RGB.
Set the HSL color as the background of the <h1> element
Set the opacity for the background color of the <h1> element to "0.3" by using a HSLA color instead of HSL.
Set the transparency/opacity of the <h1> element to "0.4".
Add a web font with the name "sansation" and the URL
Add another @font-face rule for bold characters of the "sansation" font.
Set a linear gradient background for the <div> element, going from the top to bottom, transitioning from "white" to "green".
Set a linear gradient background for the <div> element, going from the top left to the bottom right, transitioning from "white" to "green".
Set a linear gradient background for the <div> element, going at a 70 degree angle, transitioning from "white" to "green".
Set a linear gradient background for the <div> element, going from the top to bottom, transitioning from "white" to "red" to "blue" to "green".
Set a linear gradient background for the <div> element, going from the top to bottom, transitioning from "rgba(0,255,0,0.2)" to "rgba(0,255,0,1)".
Set a radial gradient background for the <div> element, transitioning from "white" to "green".
Set a radial gradient background for the <div> element, with a circle shape, transitioning from "white" to "green".
Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.
Change the color of the text shadow to "green", and set a "5px" blur radius.
Add a new shadow to the <h1> element with: no horizontal or vertical shadow, 10px blur, and a red color.
Set a "10px" horizontal, and "10px" vertical, box shadow for the <div> element.
Change the color of the box shadow to "grey", and set a "5px" blur.
Set the overflowed content for the <p> element to have ellipsis (...)
Set that text in the <p> element to wrap, even if it needs to split in the middle of a word.
Set text in the <p> element to break between any two letters.
Add a 2 second transition effect for width changes of the <div> element.
Set that the transition of the <div> element should have a "ease-in-out" speed curve.
Set the transition of the <div> element to have a "0.5" second delay before starting.
Add a 2 second transition effect for background, and transform changes of the <div> element.
Set transition of width for the <div> element to have: "2" second duration, "ease-in-out" speed curve, and a "0.5" second delay before starting.
Set the height of <h1> to "100px".
Set the width of <h1> to "50%".
Hide the <h1> element and take up the same space as before.
Hide the <h1> element. and not take up any space.
Display the list items as inline elements.
Display the <strong> elements as block elements.
Set the font family for the page to "Courier New", and the font family for <h1> to "Verdana".
Show <p> elements as "italic" text.
Set the font size for the page to "20px", and the font size for <h1> to "3em".
Show <p> elements as "bold" text.
Using font property: Set the <p> to "italic", "20px" and "Verdana".
Add an external style sheet with the URL: "mystyle.css".
Set "background-color: linen" for the page, using an internal style sheet.
Set "background-color: linen" for the page, using an inline style.
Set the transparency/opacity of the <img> element to "0.4".
Remove the transparency/opacity of the <img> element when the user hovers over it with the mouse pointer.
Set the color for links to "green".
Set the color for unvisited links to "red", and the color for visited links "blue".
Remove underlines for visited and unvisited links, and specify "underline" for the hover and active link states.
Set the list style for unordered lists to "square", and the list style for ordered lists to "upper-roman".
Set the image as the list item marker for the unordered list.
Set the unordered list marker to an image with a backup style of "circle", and display the markers inside the content flow.
Remove the bullets/markers from the list items.
Set the left margin of <h1> to "20px".
Set all margins for <h1> to "25px".
Set the top and bottom margins for <h1> to "50px", and left and right margins to "25px".
Use the margin property to center align the <h1> element.
Set a "solid", "5px" outline for <p>.
Set the outline color for <p> to "green".
Set the outline for p to "red", "dotted" and "10px".
Add a scrollbar to the <div> element.
Set the overflowing text in the <div> element to be invisible when overflow.
Add a horizontal scrollbar to <div>.
Set the top padding of <p> to "30px".
Set all paddings for <p> to "50px".
Set the top and bottom paddings for <p> to "25px", and left and right paddings to "50px".
Position the <h1> element relative to the browser window. 50px from the top, and 50px from the right.
Position the <h1> element 20px left, and 30px down, relative to its normal position.
Position the <h1> element 50px from the left, and 100px from the top, relative to the HTML page.
Position the <img> element behind the text.
Position the element with the "topleft" class 30px from the left, and 15px from the top, relative to its container.
Set the background color for visited and unvisited links to "pink", and the background color for the hover and active link states to "yellow".
Change the background color, when a user hovers over p elements, with the class "highlight", to "pink".
Set the background color of <p> elements, that are the first child of any element, to "pink".
Set the background color of <input> elements that are in focus (clicked or active), to "pink".
Set text color to red, for the first line of the <p> element.
Set text color to "red", and the text size to "xx-large", for the first letter of the <p> element.
Insert the image before, and after <p> elements, using the ::before and ::after pseudo-elements.
Change the color of the element with id="para1", to "red".
Change the color of all elements with the class "colortext", to "red".
Change the color of all <p> and <h1> elements, to "red". Group the selectors to minimize code.
Set the border to "2px solid green" for table, th and td elements.
Collapse the table borders into a single border.
Set the width of the table to "100%".
Set the text alignment in <td> elements to "right".
Set the padding in <th> elements to "15px".
Set the background color of <th> elements to "pink".
Set the text color for the page to "red", and the text color for <h1> to "blue".
Center align the <h1> element.
Remove the underline from the link.
Style text in <h1> to uppercase letters, and text in <p> to capitalized letters.
Indent the first line of the <p> element with 20px.
Change the color of all <p> elements to "red".