w3resource

HTML-CSS Practical Part-II: Exercises, Practice, Solution

HTML-CSS Practical [16-30 exercises with solution]

16. Using HTML, CSS creates a horizontally scrollable container that will snap on elements when scrolling. Go to the editor


Click me to see the solution

17. Using HTML, CSS ensures that an element self-clears its children. Go to the editor


Click me to see the solution

18. Using HTML, CSS creates an input with a visual, non-editable prefix. Go to the editor


Click me to see the solution

19. Using HTML, CSS changes the appearance of a form if any of its children are focused. Go to the editor


Click me to see the solution

20. Using HTML, CSS customizes the scrollbar style for elements with scrollable overflow. Go to the editor


Click me to see the solution

21. Using HTML, CSS applies styles to an element when in fullscreen mode. Go to the editor


Click me to see the solution

22. Using HTML, CSS displays a hamburger menu which transitions to a cross button on hover. Go to the editor


Click me to see the solution

23. Using HTML, CSS reveals an interactive popout menu on hover/focus. Go to the editor


Click me to see the solution

24. Using HTML, CSS fades out the siblings of a hovered item. Go to the editor


Click me to see the solution

25. Using HTML, CSS evenly distributes child elements within a parent element. Go to the editor


Click me to see the solution

26. Using HTML, CSS vertically and horizontally centers a child element within its parent element, using display: table. Go to the editor


Click me to see the solution

27. Using HTML, CSS horizontally and vertically centers a child element within a parent element using flexbox. Go to the editor


Click me to see the solution

28. Using HTML, CSS creates a polka dot background pattern. Go to the editor


Click me to see the solution

29. Using HTML, CSS creates a checkerboard background pattern. Go to the editor


Click me to see the solution

30. Using HTML, CSS creates a zig zag background pattern. Go to the editor


Click me to see the solution

HTML-CSS Editor:

See the Pen HTML-CSS-JAVASCRIPT-BLANK-EDITOR by w3resource (@w3resource) on CodePen.


More to Come !

Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.



Share this Tutorial / Exercise on : Facebook and Twitter

HTML-CSS: Tips of the Day

How to change scroll bar position with CSS?

Using CSS only:

Right/Left Flippiing:

.Container
{
    height: 200px;
    overflow-x: auto;
}
.Content
{
    height: 300px;
}

.Flipped
{
    direction: rtl;
}
.Content
{
    direction: ltr;
}

Top/Bottom Flipping:

.Container
{
    width: 200px;
    overflow-y: auto;
}
.Content
{
    width: 300px;
}

.Flipped, .Flipped .Content
{
    transform:rotateX(180deg);
    -ms-transform:rotateX(180deg); /* IE 9 */
    -webkit-transform:rotateX(180deg); /* Safari and Chrome */
} 

Ref: https://bit.ly/3G9jCNU