Interactive
Concrete
Poetry
Workshop 2
More HTML & CSS
Walkthrough / Assignment

1. HTML

HTML stands for Hyper Text Markup Language. HTML documents are made up HTML tags. These tags tell the browser how to display the text or graphics in the document. Each tag semantically describes a content type on the document.

White space

HTML makes no difference between horizontal and vertical spaces you make in the actual HTML file. To make a visible space, you can use the   tag.

Types of Links

  • internal link
  • external link
  • link that opens in a new window or tab
  • link with a title
  • image link
  • mailto link
  • id selector link

html-links.html

Nesting and levels

To further target elements, CSS selectors can be nested. The following example targets a link a within a p.

p a { declaration; }

2. CSS

CSS, or Cascading Style Sheets, lets us apply visual style to semantic HTML. A good way to see what stylesheets do is to view popular websites without them. Watch as I remove the styles on recognizable websites such as yale.edu, apple.com, reddit.com, etsy.com, tumblr.com. (To see how I removed the style, see this gist. To find more top sites to test, view this website.)

Ways to include CSS

As we've seen before, it's important that websites still use semantic HTML underneath style so that, in the case the website doesn't load the styles, it's still somewhat readable. Semantic HTML also helps with search engine optimization (SEO) so that elements marked as important will likely surface in search results.

As we learned previously, there are three ways to include CSS within an HTML page:

  • Inline style
  • Internal CSS
  • External CSS

Inline style is the most basic but often the least useful type since it can't be easily propagated. Internal CSS is more useful, but not if you have more than one HTML page. External CSS is the most useful since it can be referenced by many HTML pages.

Writing basic CSS

By writing CSS, you are creating rules or restrictions. Each rule is made by pairing a selector with a declaration. Like HTML, white space doesn't matter in CSS, so you can format your CSS in a way that makes sense to you.

selector { declaration; declaration; declaration; }

selector {
   declaration;
   declaration;
   declaration;
}

Each declaration is made up of a property and a value. These can't be made up or imagined, as there is a predefined list of properties and values. Likewise, if you make a typo, the declaration won't work.

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

h2 {
   color: #FFFFFF;
   text-transform: uppercase;
   font-style: italic;
}

Classes and ID's

Classes and ID's help you specify your CSS. You can name them anything you want, but it helps to describe the purpose or content of the element you're labeling. (Also, do not use spaces in class names. You can use hyphens or underscores to simulate them.) ID's should be used once per page, but classes can appear more than one time. When writing CSS, you reference ID names and class names likewise:

HTML:
<div id="id-name">
<p class="class-name">

CSS:
#id-name { declaration; }
.class-name { declaration; }

More specific CSS:
div#id-name { declaration; }
p.class-name { declaration; }

Block vs. inline elements

Every HTML element is inherently "block" or "inline". Block means it takes up vertical space and has a hard return before or after it. Inline goes with the flow.

block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquam leo nec dui laoreet iaculis. Nunc congue cursus ultrices. Donec rutrum accumsan porta. Quisque pellentesque pulvinar sed inline volutpat quis arcu sit amet euismod. Sed a enim porta, tempus odio eget, consectetur tortor. Nulla volutpat vitae velit a eleifend. Mauris et urna dictum, mattis sapien vel, vulputate libero.

Block

  • div (general purpose block element)
  • p (paragraph)
  • h1, h2, h3, h4, h5, h6 (all headings)
  • ul, ol, dl, li, dt, dd (lists, list items, etc.)
  • table (tables)
  • blockquote (indented paragraph meant for long passage of text)
  • form (an input form)

Inline

  • span (general purpose inline element)
  • a (link)
  • strong (strong text)
  • em (emphasized text)
  • img (image)
  • br (line-break)
  • input (input field used in forms)

To change an HTML element's inherent block or inline characteristic, use CSS "display" property. If you want a h1 element to be inline (since it is natively block), write h1 { display: inline; }. Here is an exhaustive list of display values.

Box Model

A good thing to remember is that most elements on an HTML page are rectangles, or some kind of box. It is important to know that every element in CSS has a content-box inside of a padding-box inside of a border-box inside of a margin-box. See the drawing of the box model below.

To horizontally center something with the box model, the width of the element must be defined. Then, use margin: 0 auto;.

Common CSS Properties

Text

  • color
  • text-align
  • text-decoration
  • text-transform
  • line-height
  • letter-spacing
    •

Fonts

  • font-family
  • font-size
  • font-style
  • font-weight
    •

Backgrounds

  • background-color
  • background-image
  • background-repeat
  • background-position
    •

Lists

  • list-style-type
    •

Box Model

  • padding
  • border
  • border-color
  • border-style
  • margin
    •

3. CSS (Layout)

CSS Layout is an important but difficult skill to master. Please go through all 19 steps (although you can skip the steps "Media Queries" and "Flexbox" for now) of Learn Layout.

Position

In order to make more complex layouts, we need to use position:

  • position: static
    — default position
    — not "positioned"

  • position: relative
    — is positioned relative to where it'd fall if it were static
    — top: 2px means the top will fall 2 pixels below where it would naturally
    — offset does not affect the layout of adjacent elements

  • position: absolute
    — positioned relative to the closest non-static (positioned) element, or the document body
    — outside the "flow"

  • position: fixed
    — positioned relative to the browser window (will always fall on the same part of the window)
    — not affected by scrolling
    — outside the "flow"

Examples to work through during class:


CSS Positioning Properties

  • position
  • float
  • clear
  • display (inline vs. block)
  • top
  • right
  • bottom
  • left
  • height
  • width
  • z-index
    •

Troubleshooting Questions to Ask Yourself


  • Do all tags (that need to) have an opening and closing tag?
  • Is everything I want to display in the body section?
  • Do all links or assets have the right file path?
  • Are all assets uploaded/in the right place?
  • Am I editing the correct file?
  • Does my code validate? Markup Validation Service

On your own

Complete Workshop 2: Assignment. Phase 1 is due on Thursday (Week 5), and Phase 2 is due on Tuesday (Week 6).

For Phase 2, you must read through all 19 steps (although you can skip the steps "Media Queries" and "Flexbox" for now) of Learn Layout. Two other good links: Lesson 4: Opening the Box Model and Lesson 5: Positioning Content.

Additional videos to watch: CSS: Three ways to include CSS, CSS: Classes and ID's.