HTML CSS Exercise
Create a simple HTML page with title heading paragraph emphasise strong and image elements
Create a simple HTML Form covering major form elements
Create a Navigation bar (with dropdown) with CSS
Create a CSS based sticky footer
Create a CSS3 based Zebra striped table
Use CSS3 to make an image rounded shape
Create CSS3 blurry text effect
Create CSS3 speech bubble shape
Create image cross fade with CSS3 transition
Use Font Awesome Vector Icons with Bootstrap3
Calculating Values With CSS3 calc()
Style first letter and first line
Style first and the last element
Style the element which is not empty
Target attribute begins wth a certain value
Set count and insert it before elements
Let padding and border not affect available width and height
Create linear, radial, repeating linear and repeating radial gradients with CSS3
Create a border image With CSS3
Set style for link hover active and visited states of hyperlink
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
HTML-CSS: Tips of the Day
How does the "position: sticky;" property work?
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected. Otherwise, it will be indistinguishable from relative positioning.
So in your example, you have to define the position where it should stick in the end by using the top property.
HTML Code:
<nav> <ul align="left"> <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li> <li><a href="#/about" class="nav-selections">About</a></li> <li><a href="#/products" class="nav-selections">Products</a></li> <li><a href="#" class="nav-selections">Home</a></li> </ul> </nav>
CSS Code:
html, body { height: 200%; } nav { position: sticky; position: -webkit-sticky; top: 0; /* required */ } .nav-selections { text-transform: uppercase; letter-spacing: 5px; font: 18px "lato", sans-serif; display: inline-block; text-decoration: none; color: white; padding: 18px; float: right; margin-left: 50px; transition: 1.5s; } .nav-selections:hover { transition: 1.5s; color: black; } ul { background-color: #B79b58; overflow: auto; } li { list-style-type: none; }
Live Demo:
See the Pen html css common editor by w3resource (@w3resource) on CodePen.
- Weekly Trends
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join
- JavaScript functions Exercises
- Python Tutorial
- Python Array Exercises
- SQL Cross Join
- C# Sharp Array Exercises