Thread by @swapnakpanda

50+ CSS Problems for Practice

⇩

Series: ➊
Level of Difficulty: Easy to Medium

Topics:
➊ CSS Selectors
➋ Background
➌ Border
➍ Margin
➎ Padding
➏ Outline
➐ Text
➑ Position
➒ Overflow
➓ Height/Width

💭 Intention behind this Practice Series

⬘ I believe anyone can strengthen his skills in HTML and CSS only by practicing.

⬗ In CSS, there are so many properties and values. It's impossible to memorize everything.

⬙ By practicing a lot, you can definitely master it.

➊ CSS Selectors

➀ Colour all p elements to green
➁ Colour the element with id "sentence" to yellow
➂ Colour all the elements with class "bluepara" to blue
➃ Write minimal code to colour all p and, section elements to green

➋ Background

➀ Set entire page's background colour to red
➁ Set background image for the entire page
➂ Show the background image repeating horizontally/vertically
➃ Show the background image at the top left corner and not repeated
➄ Show the background image fixed

➌ Border

➀ Show dotted border to a paragraph
➁ Set top border dotted, left border dashed, right border solid and bottom border double.
➂ Set border of 4px, solid and color red to a h1
➃ Set the right border to dashed

➄ Draw a circle of radius 20px
➅ Draw an ellipse of radius 15px, 20px
➆ Draw a ring of radius 50px and width 20px

➍ Margin

➀ Set margin of 20px to a button
➁ Set margin of 10px horizontally and 15px vertically to a paragraph
➂ Set different margin values for each side of a h1 element

➎ Padding

➀ Set top padding of a h1 element to 10px
➁ Set padding of 15px each side to a paragraph
➂ Set padding of 10px horizontally and 15px vertically to a paragraph

➏ Outline

➀ Set a 5px solid outline border for a div element
➁ Set the outline border color to red for a paragraph

➐ Text

➀ Center align the text inside a p element
➁ Justify the text inside a p element
➂ Center align only the last line of text inside a p element
➃ Justify the last line of text inside a p element
➄ Style the text inside a paragraph to all uppercase

➅ Style the text inside a h1 to capitalized
➆ Remove underline from a hyperlink
➇ Strike through a text
➈ Display both overline and underline for a text
➉ Give space of 5px between letters
➀➀ Give space of 0.8 between lines in a paragraph

➀➁ Give space of 10px between words
➀➂ Display a text in a paragraph from right-to-left
➀➃ Indent the first line of a paragraph with 10px
➀➄ Display shadow of 5px (both horizontally and vertically) to a text inside a div
➀➅ Add blur of 7px to the shadow

➑ Position

➀ Position some text on the top left corner of an image
➁ Position some text on the top right corner of an image
➂ Position some text on the bottom left corner of an image
➃ Position some text on the bottom right corner of an image

➄ Position some text on the centre of an image
➅ Display some text fixed at a specific position in a page
➆ Display some sticky text in a page

➒ Overflow

➀ Hide the scroll bar for an overflown paragraph
➁ Display the scroll bar to a paragraph only when it's overflown

➓ Height/Width

➀ Set width of a paragraph to be half of the page.
➁ Set the height to 200px for a div
➂ Set the min width to 100px and max width to 300px for a p element

💭 Feedbacks

⬔ Feedbacks of yours on these problems are much appreciated. Those will help me to come up with better quality contents in future.

⬕ If you have any other suggestions, please share.

End of 🧵

Are you looking for such practice questions? I am going to share many on HTML, CSS, JavaScript and React.js in coming days.

If you don't want to miss those, Follow Me ✅