A New Instructor Appeared!

Melissa and Mowgli

Melissa Hovik

Masters student in CS at the Paul G. Allen School

Has been a Head TA for CSE 154 over the last two years

Is pursuing a career in CS education after her studies, and is very excited to be co-teaching CSE 154 this quarter

Is at the Grace Hopper Celebration Conference this week - will introduce herself on Monday

Is back in Seattle! Find out more on your QuickCheck exercise - the live version is here. (Note: we'll be adding to the HTML during lecture)

CSE 154

Lecture 3: Intro to CSS

Today's Agenda

Administrivia

Review: HTML5 Semantic Tags

Introduction to CSS (enough to get you started with inspecting pages and adding basic styles - more in section tomorrow)

Administrivia

  • We've gotten some great questions so far! We'll be posting a weekly pinned "Student FAQs" post on Piazza. Take a look at these every few days or so!
  • Office Hours tomorrow at 12:30-1:30 (CSE 280)
  • GitLab is scheduled for a 10-minute maintainance period around 5:00PM today.
  • We're holding an Exploration Session this Thursday evening in MGH 241 (5:30-6:30) with CSE 154 staff sharing their "Development Toolboxes" - this is a great chance to find out about different programming tools for CSE 154 this quarter!
  • Calendar UI is updated (with CSS!) to remove modals and put all content in table cells for better user experience - thanks for the helpful user feedback!
  • Creative Project 1 is due Wednesday. Any questions?

Module 1: HTML and CSS

By the end of this module, you should:

  • Be able to write a webpage with HTML using functionally and semantically appropriate tags
  • Understand the relationship between the browser, webpage, website, HTML, and CSS
  • Identify the importance of accessibility on the web and some best practices you can use to make accessible websites
  • Become familiar with basic web development tools (text editor, browser, Git and GitLab)
  • Understand how to use different CSS layout techniques with box model and flex
  • Know how and where to look for HTML tags and CSS properties
  • Be familiar with the CSE 154 Code Quality Guidelines

Quick Tips on How to Study in Module 1

  1. Attend every class (including lecture, section, and lab). Work through section and lab problems if you don't finish them in class (we intentionally provide more exercises than expected to complete in 50 minutes).
  2. Use your Creative Project to learn new HTML tags and CSS properties.
  3. Ask questions! There's a lot to learn in HTML/CSS - we do not expect you to learn it all in this course. Our goal is to provide guidance and motivation for content, and the resources to help you filter out what's important. If there is a common question from students, we can add resources to help.
  4. Learn how to use your browser's inspector tool. This is super handy to explore different CSS properties and values!

Review: HTML5 and Semantic Tags

General outline of a document body (template): 

<body>
  <header>
    <!-- Header of the webpage body (e.g. logo, navigation bar) -->
  </header>
  <main>
    <!-- Main section of the webpage body (where most content is) -->
  </main>
  <footer>
    <!-- Footer of the webpage body (e.g. copyright info) -->
  </footer>
</body>

Review: HTML5 and Semantic Tags

<main>

Main content of the document - unlike <header> and <footer> tags, there can only be one main element in the <body>. The content inside should be unique and not contain content that is repeated across pages ( e.g. sidebars, nav link, search bars, etc.)

<header>

Header element - contains header information for page body or section/article, including logos, navigation bar, etc.

<footer>

Footer element - contains footer information for page boy or section/article, including copyright infromation, contact, links, etc.

article vs. section Elements

<section>

Represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples: Section of a chapter, slide element in an HTML-based presentation, etc.

<article>

Represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

Examples: A blog or social media post (for pages with multiple posts, there may be multiple articles)

Using HTML5 Semantic Tags

Back to the QuickCheck. What HTML elements do you see? 

<head>
<header>
<main>
<footer>
<article>
<section>
<nav>
<input>
<title></title>
<ol></ol>
<ul></ul>
<li></li>
<h1></h1>
<hr />
<code></code>
<b></b>
<strong></strong>
<button></button>
Sample browser screen

Now, Let's Talk About Style.

skelton

CSS

CSSZenGarden

A project using different CSS templates to style the same HTML page.

Poll: Which style do you like best?

The Bad Way to Produce Styles

Consider the following HTML: 

<p>
  <font face="Arial">Welcome to Paperclips Inc.</font>
  You will <b>never</b>, <u>EVER</u> beat
  <font size="+4" color="red">OUR</font> prices! <i>(Mr.
  Clippy's got nothing on us.)</i>
</p>

HTML

Welcome to Paperclips Inc. You will never, EVER beat OUR prices! (Mr. Clippy's got nothing on us.)

output

Tags such as b, i, u and font are discouraged in strict HTML. Why?

  • Accessibility
  • Code organization
  • Changing style easily

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 content)

Can be embedded in HTML or placed into separate .css file (preferred)

Basic CSS Rule Syntax

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

CSS (template)

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

CSS (example)

A CSS file consists of one or more rules

A rule selector specifies HTML element(s) and applies style properties

  • A selector of * selects all elements

Table of Common Text/Color/Background CSS Rules (more here)

CSS Rules Description
color, background-color Foreground (text) color and background color styles
font-family, font-size, font-style, font-weight Various font styles
text-align, text-decoration, text-indent, text-shadow, text-transform Various text styles
line-height, word-spacing, letter-spacing Line/word/letter spacing styles
list-style-type List item styling (e.g. bullet styles)
background-image, background-repeat, background-position, background-attachment, background-size Various background styles

CSS Properties for Foreground and Background Colors

            p {
  color: red;
  background-color: yellow;
}

CSS

This paragraph uses the style above.

output

Property Description
color color of an element's text
background-color background color that will appear behind the element

CSS Properties for Fonts

Property Description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Complete list of font properties

font-family

h4 {
  font-family: "Courier New";
}

p {
  font-family: Georgia;
}

CSS

This paragraph uses the first style above

This h4 uses the second style above

output

Enclose multi-world font names in quotes

More about font-family


              p {
                font-family: Garamond, "Times New Roman", serif;
              }

CSS

This paragraph uses the above style

output

Can specifiy multiple fonts from highest to lowest priority

Generic font names:

  • serif, sans-serif, cursive, fantasy, monospace

If the first font is not found on the user's computer, the next is tried

Generally should specify similar fonts

Placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

font-size 

p {
  font-size: 14pt;
}

CSS

This paragraph uses the above style

output

Units:

  • Pixels (px) - e.g., 16px
  • Point (pt) - e.g., 16pt
  • m-size (em) - e.g., 1.16em

Vague font sizes: xx-small, x-small, small, medium, large, x-large, smaller, larger,

Percentage font sizes: 90%, 120%

font-style, font-weight 

p {
  font-style: italic;
  font-weight: bold;
}

CSS

This paragraph uses the above style

output

Either of the above can be set to normal to turn them off (e.g., headings)

CSS properties for text

PropertyDescription
text-align alignment of text within its element
text-decoration decorations such as underlining
text-indent indents the first letter of each paragraph
text-shadow a colored shadow near an existing piece of text (CSS3)
text-transform controls capitalization of text
line-height, word-spacing, letter-spacing gaps between the various portions of the text
Complete list of text properties

text-align 

blockquote { text-align: justify; }
h2 { text-align: center; }

CSS

The Emperor's Quote

[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.

output

Can be left, right, center, or justify (which widens all full lines of the element so that they occupy its entire width)

text-decoration 

p { text-decoration: underline; }

CSS

This paragraph uses the style above

output

Can also be overline, line through, blink or none

Effects can be combined:


              p { text-decoration: overline underline; }

CSS

This paragraph uses the style above

output

text-shadow 

p {
  font-weight: bold;
  text-shadow: -2px 5px gray;
}

CSS

This paragraph uses the style above

output

shadow is specified as an X-offset, a Y-offset, or an optional color

text-transform 


            

              I just just CAN'T make up my mind!

HTML

em {
  text-transform: lowercase;
}

span {
  text-transform: capitalize;
}

strong {
  text-transform: uppercase;
}

CSS

I just CAN'T make up my mind!

output

The list-style-type property 


              ol { list-style-type: lower-roman; }

CSS

Possible values:

  • none: No marker
  • disc (default), circle, square
  • decimal: 1, 2, 3, etc.
  • decimal-leading-zero: 01, 02, 03, etc.
  • lower-roman: i, ii, iii, iv, v, etc.
  • upper-roman: I, II, III, IV, V, etc.
  • lower-alpha: a, b, c, d, e, etc.
  • upper-alpha: A, B, C, D, E, etc.
  • lower-greek: alpha, beta, gamma, etc.
  • others: hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragena-iroha, katakana-iroha

CSS Properties for Backgrounds

Property Description
background-color color to fill background
background-image image to place in background
background-position placement of background image within element
background-repeat how background image should be repeated
background-attachment whether background image scrolls with page
background-size how large the background appears behind the element
background shorthand to set all backgroud properties
More background properties

background-image

body {
  background-image: url("paw.jpg");
}

CSS

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

output

Background image/color fills the element's content area

background-repeat


body {
  background-image: url("paw.jpg");
  background-repeat: repeat-y;
}

CSS

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

output

Can be repeat (default), repeat-x, repeat-y, or no-repeat

background-position 

body {
  background-image: url("paw.jpg");
  background-repeat: no-repeat;
  background-position: 370px 20px;
}

CSS

This is the first paragraph

This is the second paragraph...
It occupies 2 lines

output

Value consists of two tokens, each of which can be top, left, right, bottom, center, a percentage, or a length value in px, pt, etc.

Value can be negative to shift left/up by a given amount