CSS Intro Lab

Use the HTML below for the following questions:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>CSS Intro</title>
  </head>
  <body>

    <h1>Your Name Here</h1>
    <div>
      <p>This is a bunch of information about myself. I'm from here and there and discovered my
      love of programming when this happend. When I'm not working I'm busy doing this and that.
    </p>
    </div>

    <img src="https://www.breakthrough-pt.com/wp-content/uploads/2014/11/female-default-profile-photo.png" alt="" >

    <div >
      <h3>Here are some of my Skills!</h3>
      <ul>
        <h3>Languages</h3>
        <li>JavaScript</li>
        <li>SQL</li>
        <li>HTML5</li>
        <li>CSS3</li>

      </ul>

      <ol>
        <h3>Librarys</h3>
        <li>React</li>
        <li>PostgreSQL</li>
        <li>Node</li>
        <li>Bootstrap</li>

      </ol>
    </div>

    <div>
      <h3>Hardest Bug So Far</h3>
      <p>My hardest bug I ever came across was this infinite loop I couldn't escape. </p>
      <p>I came up with a totally sick solution though by doing ... </p>
    </div>

    <h2>Contact Me</h2>
    <div>
     Email me at: <a href="mailto:[email protected]" target="_top">[email protected]</a>
    </div>

    <ul>
      <li> <a href="github.com">github link</a> </li>
      <li> <a href="linkedin.com">LinkedIn link</a> </li>
      <li> <a href="angellist.com">Angel list link</a> </li>
    </ul>

    <form action="index.html" method="post">
      <input type="text" name="" value="">
      <input type="submit" name="sumbit" value="submit">
    </form>
  </body>
</html>

Question 1

Change the font of the name header. Bonus points for importing a font from google fonts.

Question 2

Change the font color of your name to your favorite color.

Question 3

Remove the bullet points from your unordered list of links.

Question 4

Change the font weight in your ordered list.

Question 5

Center all li items on the page.

Question 6

Give your li's a 1px red boarder with curved corners.

Question 7

Change the font color of your li's to blue and the background color to a light pink.

Question 8

Change the size of the picture to a reasonable size and center it on the page.

Question 9

Change all font to sans-serif.

Question 10

Underline all h3's.

Question 11

Give your page a background color. Then, make it a gradient

Question 12

All text should be sans-serif. Most default text rendering in browsers (without an explicit CSS file) renders text in serif font.

Question 13

All p tags should have 20 pixels of padding on the top and the bottom - not on the sides.

Question 14

All images should be 200 pixels tall.

Question 15

Header tags (h1, h2, etc.) should be closer in size to each other. h1 should have a 25px font size and all other h tags to have a 20px font size.

Question 16

Lists should have 30px of padding on the left.

Question 17

Add a button that removes all styles entirely. Clicking the button again should replace them.

HINT: You may need a new CSS file

Check here for some potential solutions.

marvinthompson-code / pursuit-core-css-intro-lab Goto Github PK

pursuit-core-css-intro-lab's Introduction