w3resource

HTML CSS Exercise

Create a simple HTML page with title heading paragraph emphasise strong and image elements

Create a complex HTML table

Create a simple HTML Form covering major form elements

Embed Video in an HTML page

Create a Navigation bar (with dropdown) with CSS

Create a CSS Grid

Create a CSS based sticky footer

Create a CSS3 based Zebra striped table

Create a CSS3 based button

Use CSS3 to make an image rounded shape

Create a stitched look

Create CSS3 Corner Ribbon

Create CSS3 blurry text effect

Create CSS3 speech bubble shape

Create image cross fade with CSS3 transition

Use Google Font

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

Select elements by attribute

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

Create columns with CSS3

Set style for link hover active and visited states of hyperlink

Type selector

Descendant selector

Child selectors

Adjacent sibling selectors

Style placeholder text

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Follow us on Facebook and Twitter for latest update.

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.