Skip to content

Latest commit

 

History

History
63 lines (57 loc) · 8.38 KB

ex_6.md

File metadata and controls

63 lines (57 loc) · 8.38 KB

Exercise 6

  • Inside your git repository create a index6.html file
  • Copy and paste the following HTML code:
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Fonts and text</title>
    <style>
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <div class="main">
      <p>Lorem ipsum dolor sit amet, <span class="bold">consectetur</span> adipiscing elit. Proin fringilla dapibus tellus vitae porttitor. Fusce nisi mauris, posuere vitae odio non, bibendum semper elit. Morbi ornare massa cursus dictum venenatis. Pellentesque lobortis condimentum justo porta congue. Vivamus sed elementum est, ac posuere lorem. Duis non auctor nibh. In mattis ipsum ut mi feugiat dictum. Praesent tempor quam ipsum, nec porttitor magna accumsan vitae. Sed fringilla velit nisi. Sed ut elit eros.</p>
      <p>Nullam ut <span class="bold">bibendum</span> mauris. Ut ullamcorper ante sit amet egestas tristique. Praesent imperdiet dui ac arcu venenatis tempor. Praesent congue dui a sollicitudin mattis. Duis condimentum metus nunc. Cras bibendum consectetur mi sed imperdiet. Quisque quis est lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ullamcorper turpis convallis, fringilla dolor at, hendrerit ligula. Etiam sit amet orci at odio semper consectetur. Donec cursus elit diam, non tincidunt leo molestie ut..</p>
      <p>Aenean blandit nisl scelerisque, molestie <span class="bold">justo</span> a, gravida quam. Phasellus porttitor, dui vitae feugiat tempus, elit mi mollis sem, sit amet vehicula turpis leo sed velit. Sed iaculis rhoncus mauris. Pellentesque sodales egestas dui sit amet rutrum. Nullam tincidunt quis diam eget aliquam. Aliquam tincidunt porta mi, ut faucibus lorem fermentum eget. Etiam efficitur massa turpis, ac varius nulla luctus at. Quisque rutrum eros vitae ligula aliquet, non eleifend odio dictum. Fusce venenatis, nulla sed imperdiet convallis, diam mauris iaculis ante, nec dictum justo tellus id dui..</p>
    </div>
    <h2>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</h2>
    <div id="quote">
      <p>Nam finibus pulvinar tortor, non semper nisi tempor et. Phasellus sed nunc eget neque viverra sodales. Integer congue nibh rhoncus eleifend suscipit. Praesent vitae nunc eleifend, laoreet risus quis, aliquet nulla. Quisque imperdiet efficitur mollis. Sed ut eros sit amet nulla sagittis bibendum vel in libero. Ut id est egestas, vehicula ante id, auctor diam. Aenean porta sem nec blandit tincidunt. Curabitur turpis sem, pulvinar a lobortis a, laoreet a risus. Fusce pharetra elit lorem, cursus vehicula est interdum non. Mauris in dolor a mi porta elementum non vel mi. Curabitur lobortis nulla eu tellus tempus, sit amet imperdiet sapien auctor. Vivamus sed ligula eget est tincidunt venenatis vel sed dolor. Morbi ac nunc sit amet eros bibendum finibus. Etiam gravida sed nisi quis lobortis. Vivamus a aliquam ligula..</p>
    </div>
    <p>In felis lectus, aliquet sed erat at, tempor imperdiet nisl. Sed non ex pulvinar, tincidunt lacus vel, auctor metus. Pellentesque lacinia urna nisl. Donec dapibus varius odio malesuada luctus. Quisque porta aliquet nibh sit amet ullamcorper. Suspendisse neque risus, ornare sed tortor porttitor, feugiat imperdiet eros. Etiam aliquam commodo leo, at lobortis augue maximus at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare finibus ligula, non rutrum felis ultrices vel. Morbi vitae dolor enim. Phasellus semper convallis ultricies. Nunc aliquet varius sapien, in sollicitudin mauris tincidunt sed. Mauris semper, massa non dictum blandit, massa tortor maximus diam, ut semper tortor elit in magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos..</p>
    <p>Vivamus <span class="wrong">vitae dui neque. Phasellus commodo auctor condimentum</span>. Sed quis magna massa. Suspendisse potenti. Aenean eros leo, aliquam sed enim id, tincidunt lobortis elit. Fusce posuere quam vitae felis condimentum tristique. Nam vel malesuada ante. Phasellus feugiat pellentesque nisl. In at ornare lectus. Vivamus sit amet justo eu orci pellentesque elementum. In commodo urna vitae neque iaculis dapibus. In pulvinar lorem non purus gravida, in efficitur nibh rhoncus. Nullam faucibus leo malesuada porttitor tempor. Fusce vestibulum est arcu. Nulla fringilla nunc imperdiet sapien vestibulum, eget malesuada quam consequat..</p>
    <p class="google">Integer dolor arcu, interdum eu venenatis a, laoreet vel arcu. Suspendisse efficitur consequat sapien quis euismod. Aliquam fermentum ipsum consequat sem convallis, consectetur porta augue sollicitudin. Morbi tristique lorem in elit volutpat auctor. Ut non dui quis lacus tristique faucibus sed at nisl. Donec nec eleifend purus, nec faucibus arcu. Quisque semper, lacus hendrerit dapibus pharetra, velit sem porttitor purus, et vulputate ipsum sapien fringilla justo..</p>
    <p>In viverra eleifend bibendum. Donec vulputate ex non porttitor posuere. Cras et placerat lectus. Morbi imperdiet lectus tellus, eu consequat orci dapibus sed. Vestibulum turpis lorem, tempor eget ornare vitae, placerat sed arcu. Quisque iaculis posuere massa, sit amet commodo diam. Aenean leo nisi, fringilla nec vehicula id, euismod id sem. Vestibulum consequat suscipit pretium. Nullam consequat lorem nisl, non blandit purus mollis ut. Suspendisse potenti. Etiam feugiat mauris a urna laoreet vulputate. Nullam eget nibh ipsum. Proin hendrerit nisi non nisl tristique, ut cursus tellus euismod..</p>
    <p>In mi mauris, cursus non metus sit amet, egestas faucibus neque. Vivamus efficitur justo vitae tempus ullamcorper. Etiam euismod enim mauris, at mollis lorem egestas vel. Phasellus id congue lorem. Fusce ac massa in lacus convallis euismod vitae sit amet neque. Aenean a turpis efficitur, congue est et, varius magna. Quisque et arcu sit amet dolor maximus consectetur in at enim..</p>
    <p class="last">Maecenas convallis, arcu ut dictum dignissim, nulla nulla dignissim ipsum, et aliquet enim nisi quis orci. Vivamus iaculis turpis ut consectetur viverra. Suspendisse potenti. Duis nec elit ac arcu congue efficitur. Phasellus in tortor sed augue luctus cursus suscipit in turpis. Sed convallis turpis a ultrices vestibulum. Donec in ante velit. Vivamus suscipit tincidunt sapien, a feugiat nunc bibendum ut. Mauris efficitur eu justo a commodo. Pellentesque maximus viverra lectus, vel fermentum augue feugiat eu. In accumsan, leo eget egestas porta, augue tellus pharetra mi, vel aliquet nunc ligula fringilla orci. Nunc vel sollicitudin nibh. Etiam aliquam, nibh sed euismod mollis, nibh ipsum auctor massa, in placerat metus dui vitae tellus. Curabitur augue magna, imperdiet a posuere sed, accumsan ac dolor. Nunc sapien ipsum, fermentum id orci sit amet, molestie egestas lacus. Sed quam dolor, vulputate non leo vel, sodales rhoncus lectus..</p>
  </body>
</html>
  • After applying all styles the document must look like this:

Ex 6

Ex 6

  • Add a style element
  • Add the following CSS properties using the right selector for each case:
    • Select the body element and apply the following styles:
      • Font must be Arial, 16px big and black
    • Select the h1 elements and apply the following styles:
      • Font must be: 2em big, color #ddd, shadow: 1px 2px 3px #666 and text in uppercase
    • Select the h2 elements and apply the following styles:
      • Font must be: 1.5em big, color #ddd, shadow: 1px 2px 3px #666 and text in uppercase
    • Use the same definition to apply h1 & h2 the shared properties
    • Select all paragraphs and apply the following styles:
      • line height must be 1.4em and ident the text using 0.8em
    • Select the main class and apply the following style:
      • Text must use justify align
    • Select the bold class and apply the following styles:
      • Font must be bold and coral color
    • Select the element with the id quote and apply the following styles:
      • Letters must have a 2px spacing, the font style must be italic and darkcyan color
    • Select the elements with the last class and applyt the following styles:
      • Text must be right aligned and red color
    • Select the elements with the wrong class and apply the following styles:
      • The text must be decorated a black line-through, the font must be 1.2em tall and weight 700
    • Select the elements with the google class and apply the following styles:
      • Use google fonts to apply the Merriweather family, also font size must be 1.6em and purple color