CSE 154

Section 1: Introductions, HTML, and CSS

Today's Agenda

Introductions/Icebreaker

Review HTML and Validation

CSS Basics: Syntax, Selectors, and Some Styles

Section Goals

By the end of this section, you should be able to:

  • Know your TA and classmates a little better
  • Be able to identify and fix common HTML validation errors, and understand the motivation for valid HTML/CSS code
  • Use the inspector tool to help write HTML/CSS
  • Given HTML, give CSS selectors to match different tags
  • Be able to add styles to a HTML page with CSS to produce a given screenshot output

Introductions

<ta>Hello world!</ta>

Exercise 1: Dogs!

Fix the validation errors in dogs.html and make it match the CSE 154 code quality guide. 

<!DOCTYPE html>
  <html>
    <body>
      <title>Dogs are the Best!</title>
      <h1>Dogs are the best!!!</h1>
      <h2>Why dogs are <em>the best</h2></em>
      <p>
        <ul>
          <li>Doggos are happy & cuddly</li>
          <li>Doggos make people happy too</li>
          <li>They're obviously the best</li>
        </ul>
      </p>
      <h2>Did you know?</h2>
      Doggies are the best
      <h2>Dog pictures:</h2>
      <img src="images/puppy-mowgli.jpg"></img>
      <img src="images/moar-puppy-mowgli.jpg"></img>
    </body>
  </html>
</!DOCTYPE>

HTML (Bad)

Exercise 1: Solutions

<!DOCTYPE html>
<html>
  <head>
    <title>Dogs are the Best!</title>
  </head>
  <body>
    <h1>Dogs are the best!!!</h1>
    <h2>Why dogs are <em>the best</em></h2>
    <ul>
      <li>Doggos are happy &amp; cuddly</li>
      <li>Doggos make people happy too</li>
      <li>They're obviously the best</li>
    </ul>
    <h2>Did you know?</h2>
    <p>Doggies are the best</p>
    <h2>Dog pictures:</h2>
    <p>
      <img src="images/puppy-mowgli.jpg" alt="cute pupper"/>
      <img src="images/moar-puppy-mowgli.jpg" alt="moar cute pupper"/>
    </p>
  </body>
</html>

HTML (Good)

Exercise 2 (CSS): GOT Selectors

Directions: Use the given HTML code and CSS selector tool on the slide below to improve your skills in CSS selectors!

<!DOCTYPE html> <html> <head><title>GOT FTW</title></head> <body> <h1>Game of Thrones Page</h1> <div id="intro"> <h2>Introduction</h2> <p>Game of Thrones is the best series ever!</p> </div> <div id="content"> <div class="bordered"> <p> There are five books: A Game of Thrones, A Clash of Kings, a Storm of Swords, a Feast for Crows, and a Dance with Dragons. </p> </div> <h2>Houses</h2> <ul> <li>House Stark</li> <li>House Targaryen</li> <li>House Lannister</li> <li>House Tully</li> </ul> <h2>Plot</h2> <p>It's too long to describe. Just read the books!</p> </div> <div id="footer"> <h2 class="bordered">Thank you!</h2> </div> </body> </html>

HTML

Write a CSS selector here for:

  1. all h2 elements
  2. element with ID intro
  3. h2 elements inside intro
  4. h2 elements inside content and footer
  5. p elements inside content
  6. p elements directly inside content
  7. elements with class bordered
  8. h2 elements with class bordered

Exercise 2: Solutions

  1. all h2 elementsh2
  2. element with ID intro#intro
  3. h2 elements inside intro#intro h2
  4. h2 elements inside content, footer#content h2, #footer h2
  5. p elements inside content#content p
  6. p elements directly inside content#content > p
  7. elements with class bordered.bordered
  8. h2 elements with class borderedh2.bordered

Exercise 3 (HTML and CSS): CSS Stands For...?

Given the following HTML, what HTML and CSS would be necessary to produce the expected output below? (You can download the HTML here). 


              <h2>CSS: Corgis, Short &amp; Sweet</h2>

HTML

CSS: Corgis, Short & Sweet

output

  • The "CSS" text is green, underlined and 40pt font.
  • Both "Short" and "Sweet" have a cursive font type.
  • Any text that is not green/purple has a color of #444.
  • The "short" text is all lower-case and has a font-size of 14pt.
  • The "Sweet" text is purple and italicized.

Note: you may add <span> tags as appropriate to get the desired output.

Exercise 3: Solution


                    

                      CSS: Corgis,
                      Short &amp;
                      Sweet

HTML

corgi 
h2 {
  color: #444;
}

#css-abbr {
  color: green;
  text-decoration: underline;
  font-size: 40pt;
}

#short, #sweet {
  font-family: cursive;
}

#short {
  font-size: 14pt;
  text-transform: lowercase;
}

#sweet {
  color: purple;
  font-style: italic;
}

CSS