Section 2: More HTML and Intro to CSS

CSE 154

Agenda

  • Using Semantic HTML Tags
  • How to Add Style to your Webpage with CSS
  • Time to Work on CP1 and "Demo GitGrade Submission"

Lingering Git/Atom issues?

Check out this REALLY awesome FAQ written by our TA Jack!

Exercise 1 (HTML): What Semantic Tags Should I Use?

What semantic tags do you see in these pages?

Wikipedia screenshot

Remember: Dive down below for each exercise!

What semantic tags do you see in these pages?

New York Times screenshot

Exercise 2: Styling our about.html page with style.css

Cascading Style Sheets (CSS): <link> 

<head>
...
  <link href="filename" rel="stylesheet" />
...
</head>

HTML (template)

<link href="style.css" rel="stylesheet" />

HTML (example)

CSS describes the appearance and layout of information on a web page (as opposed to HTML, which describes the structure for content)

Basic CSS Rule Syntax

selector {
  property: value;
  property: value;
  ...
  property: value;
}

CSS (template)

p {
  color: red;
  font-family: sans-serif;
}

CSS (example)

Demo: What Rules Should We Apply To about.html?

MDN has a great list of CSS properties to look through!
Beware, it is a bit long.

Time to Work on CP1

Demo: Submitting CP1 on GitGrade

Note: You should re-submit once you've finished all the requirements by Saturday at 11PM!

Resources, Looking Ahead & Extra Practice

Debugging In The Browser

Guide to using the Chrome Inspector

Extra Practice: GOT Selectors

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

NOTE: We will be visiting context selectors (AKA combinators) in depth during Friday's lecture as well as the beginning of next week, but it could be a useful exercise to gain some early familiarity!

<!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

GOT Selectors: 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

Extra practice: (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). 


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

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

h1 {
  color: #444;
}

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

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

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

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

CSS