👩💻 50+ CSS Practice Problems
⇩
⇩
Level of Difficulty: Easy to Medium
Problems on:
➊ CSS Selectors
➋ Background
➌ Border
➍ Margin
➎ Padding
➏ Outline
➐ Text
➑ Position
➒ Height/Width
➓ Overflow
Problems on:
➊ CSS Selectors
➋ Background
➌ Border
➍ Margin
➎ Padding
➏ Outline
➐ Text
➑ Position
➒ Height/Width
➓ Overflow
➊ CSS Selectors
➀ Colour all h2 elements to green
➁ Colour the element with id "scanner" to yellow
➂ Colour all the elements with class "highlight" to blue
➃ Write minimal code to colour all p and, section elements to red
➀ Colour all h2 elements to green
➁ Colour the element with id "scanner" to yellow
➂ Colour all the elements with class "highlight" to blue
➃ Write minimal code to colour all p and, section elements to red
➋ Background
➀ Set entire page's background colour to magenta
➁ 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
➀ Set entire page's background colour to magenta
➁ 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 double border to a div
➁ Set top border dotted, left border solid, right border dashed, and bottom border double.
➂ Set border of 3px, dashed and color pink to a "p"
➃ Set the right border to dotted
➀ Show double border to a div
➁ Set top border dotted, left border solid, right border dashed, and bottom border double.
➂ Set border of 3px, dashed and color pink to a "p"
➃ Set the right border to dotted
➄ Draw a circle of radius 15px
➅ Draw an ellipse of radius 30px, 20px
➆ Draw a ring of radius 50px and width 10px
➅ Draw an ellipse of radius 30px, 20px
➆ Draw a ring of radius 50px and width 10px
➍ Margin
➀ Set a margin of 4px to an h3 element
➁ Set margin of 5px horizontally and 10px vertically to a button
➂ Set different margin values for each side of a paragraph element
➀ Set a margin of 4px to an h3 element
➁ Set margin of 5px horizontally and 10px vertically to a button
➂ Set different margin values for each side of a paragraph element
➎ Padding
➀ Set the bottom padding of an h2 element to 10px
➁ Set padding of 5px on each side of a button
➂ Set padding of 5px horizontally and 10px vertically to a paragraph
➀ Set the bottom padding of an h2 element to 10px
➁ Set padding of 5px on each side of a button
➂ Set padding of 5px horizontally and 10px vertically to a paragraph
➏ Outline
➀ Set a 10px solid outline border for a div element
➁ Set the outline border color to red for a paragraph
➀ Set a 10px 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
➀ 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 7px between letters
➀➀ Give space of 0.7 between lines in a paragraph
➆ Remove underline from a hyperlink
➇ Strike through a text
➈ Display both overline and underline for a text
➉ Give space of 7px between letters
➀➀ Give space of 0.7 between lines in a paragraph
➀➁ Give space of 4px between words
➀➂ Display a text in a paragraph from right-to-left
➀➃ Indent the first line of a paragraph with 10px
➀➄ Display a shadow of 10px (both horizontally and vertically) to a text inside a div
➀➅ Add a blur of 4px to the shadow
➀➂ Display a text in a paragraph from right-to-left
➀➃ Indent the first line of a paragraph with 10px
➀➄ Display a shadow of 10px (both horizontally and vertically) to a text inside a div
➀➅ Add a blur of 4px to the shadow
➑ Position
➀ Position some text at the top left corner of an image
➁ Position some text at the top right corner of an image
➂ Position some text at the bottom left corner of an image
➃ Position some text at the bottom right corner of an image
➀ Position some text at the top left corner of an image
➁ Position some text at the top right corner of an image
➂ Position some text at the bottom left corner of an image
➃ Position some text at the bottom right corner of an image
➄ Position some text at the center of an image
➅ Display some text fixed at a specific position on a page
➆ Display some sticky text on a page
➅ Display some text fixed at a specific position on a page
➆ Display some sticky text on a page
➒ Height/Width
➀ Set the width of a paragraph to half of the page.
➁ Set the height to 75px for a div
➂ Set the min width to 100px and max width to 250px for a p element
➃ Make an image responsive to the screen size
➀ Set the width of a paragraph to half of the page.
➁ Set the height to 75px for a div
➂ Set the min width to 100px and max width to 250px for a p element
➃ Make an image responsive to the screen size
➓ Overflow
➀ Hide the scroll bar for an overflown paragraph
➁ Display the scroll bar to a paragraph only when it's overflown
➀ Hide the scroll bar for an overflown paragraph
➁ Display the scroll bar to a paragraph only when it's overflown
🏁 Final Words
Don't think that by practicing this much, the job is done. Invent your own problems and practice
❍ To get a feel of "CSS is fun"
❍ For getting the confidence to design web pages
❍ For getting the required knowledge to build projects
Don't think that by practicing this much, the job is done. Invent your own problems and practice
❍ To get a feel of "CSS is fun"
❍ For getting the confidence to design web pages
❍ For getting the required knowledge to build projects
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳
I am sharing Tutorials, Techniques, Infographics, Cheat Sheets, Practice Questions, Project Ideas, and Roadmaps on Web Development, DSA, and Databases.
What's your views on these questions? Share your feedback 🗨️
I am a Tech Writer, Educator, and Mentor from India 🇮🇳
I am sharing Tutorials, Techniques, Infographics, Cheat Sheets, Practice Questions, Project Ideas, and Roadmaps on Web Development, DSA, and Databases.
What's your views on these questions? Share your feedback 🗨️
جاري تحميل الاقتراحات...