Fundamentals of CSS Styling

Introduction

In this lab, we will explore the fundamentals of CSS programming. You will learn how to use CSS to style web pages and create visually appealing designs. By the end of this lab, you will have a solid understanding of CSS syntax, selectors, and properties, and be able to apply them to your own projects.

Skills Graph

Full-Width Image

You can write the code in index.html and style.css..

Creates a full-width image.

• Use left: 50% and right: 50% to position the image in the middle of the parent element.
• Use margin-left: -50vw and margin-right: -50vw to offset the image on both sides relative to the size of the viewport.
• Use width: 100vw and max-width: 100vw to size the image relative to the viewport.

<main>
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
    eu, faucibus interdum felis.
  </p>
  <p>
    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
  </p>
</main>

main {
  margin: 0 auto;
  max-width: 640px;
}

img {
  height: auto;
  max-width: 100%;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

Summary

Congratulations! You have completed the Full-Width Image lab. You can practice more labs in LabEx to improve your skills.