Intro to HTML and CSS#

To download the demo code for this lecture, run:

$ dmget wb-html-css --demo

Front-End Technologies#

HTML, CSS, and JavaScript#

  • HTML (HyperText Markup Language): gives content structure and meaning, defines “skeleton” of web page

  • CSS (Cascading Style Sheets): used for layout and styling of a webpage

  • JavaScript: programming language, used for most website interactivity

  • All three of these are used for the front-end (the user-facing part of a website)

Visual analogy for what HTML, CSS, and JavaScript do together

HTML#

HTML#

  • HTML is a markup language. Markup languages are used to categorize content.

  • Without markup:

    What is HTML? HTML stands for HyperText Markup Language. Markup
languages are used to organize text into logical sections.

  • With markup:

    intro.html#
    <h1>What is HTML?</h1>
<p>HTML stands for <cite>HyperText Markup Language</cite>.</p>
<p>Markup languages are used to organize text into logical sections.</p>

HTML Elements#

  • A fundamental unit of HTML is called an element.

  • Some elements contain text, e.g. a paragraph element:

    <p>HTML is cool.</p>

    • Start the element with an open tag (<p>)

    • End with a close tag (</p>)

  • Some elements don’t contain text content, e.g. an image element:

    <img src="/static/cat.png" alt="cat looking out a window">

    • They consist of a single, self-closing tag

Attributes#

  • Attributes are used to configure elements.

    An input of type “password”#
    <input type="password">

    • Attributes always go inside the opening tag.

    • If you don’t explicitly add attributes, you’ll use the default values

  • Boolean attributes default to false

    • You can explicitly set their value to true, or you can use this shortcut:

      <input required>

Comments in HTML#

  • Comments will not appear in the browser (so users won’t see them)

  • Comments are an excellent way to communicate with other developers (or your future self) about what the code is doing

  • Comments can make your code more readable

  • Comments begin with <!-- and close with --> .

    <body>
  <!-- This is a comment that will not be displayed on the web page -->
</body>

Whitespace#

Whitespace is almost insignificant. HTML squeezes any amount of whitespace into a single space character.

<p>
  This is one line.
  This is another line.
</p>

This is one line. This is another line.

You can add newline characters with the line-break tag (<br>)

<p>
  This is one line.<br>
  This is another line.
</p>

This is one line.
This is another line.

Using <br> is not good practice, but fine for learning

In reality, you wouldn’t use <br> to add a visual line-break. Instead, you would use a <p> or use CSS to adjust the amount of space between two lines.

Basic HTML Page Structure#

<!doctype html>
<html>
  <head>
    <!-- Metadata goes here -->
  </head>

  <body>
    <!-- Actual contents of page goes here -->
  </body>
</html>

  • doctype declaration tells the browser we’re using the latest version of HTML

  • All HTML should go inside the <html> element

  • head is for metadata, linking to stylesheets and scripts, etc.

  • body should contain all content that the user can see on the page

Browser Dev Tools#

Browser Dev Tools#

  • Firefox, Chrome, and Safari have special developer tools used for debugging HTML, CSS, and JavaScript on the web

  • You may need to google how to enable developer tools for your browser of choice

  • To open the HTML Inspector tool: Right click on page → Inspect element

  • The Inspector allows you to:

    • View the HTML source for a page

    • Temporarily edit HTML

    • View style properties that have been applied to an HTML element

    • And more!

Common Elements in HTML#

Text content#

  <body>
    <h1>A big heading</h1>
    <h3>A smaller heading</h3>

    <p>A paragraph.</p>

    <ul>
      <!-- A bulleted list. -->
      <li>Coffee</li>
      <li>
        Tea
        <ul>
          <li>Black Tea</li>
          <li>Green Tea</li>
        </ul>
      </li>
    </ul>

    <ol>
      <!-- A numbered list. -->
      <li>Step 1</li>
      <li>Step 2</li>
      <li>Step 3</li>
    </ol>
  </body>

Click here to see descriptions of each element.

Tables#

  <body>
    <table border="1px solid black">
      <thead>
        <tr>
          <th colspan="2">The table header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>The table body</td>
          <td>with two columns</td>
        </tr>
        <tr>
          <td>Second row</td>
          <td>with two columns</td>
        </tr>
      </tbody>
    </table>
  </body>

Click here to see descriptions of each element.

The id and class attributes#

The id and class attributes#

  • The id and class attributes allow CSS and JavaScript to select certain elements in order to add styling or functionality to those elements.

  • id is used to uniquely identify an element

    <p id="about">This is my homepage.</p>

    • But it’s up to you to make sure each id is unique

  • The class attribute is used to categorize elements. Multiple elements can belong to the same class.

    <a class="fancy-font">Link with fancy font</a>
<p class="fancy-font">Paragraph with fancy font</p>

Forms#

Forms in HTML#

Forms accept user input and send it to a server for processing.

<form>
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit">
</form>

A basic form input usually has a type and a name. The name affects how the data is sent to the server.

Label Element: Accessibility#

  • The label element allows screen readers to read out the label when users are focused on the element.

  • The for attribute of the label element must be the same as the id of the related input element.

    <form>
  <label for="user-email">Email</label>
  <input type="text" name="email" id="user-email">
</form>

Other Form Inputs#

  • Radio buttons: Used when the user should select just one element

      <input type="radio" name="shipping" value="standard" />
  <label>Standard shipping (5-7 days)</label>

  <input type="radio" name="shipping" value="expedited" />
  <label>Expedited shipping (1-3 days)</label>

  • Checkboxes: Used when the user can select many options

      <input type="checkbox" name="genres" value="pop" />
  <label>Pop</label>

  <input type="checkbox" name="genres" value="hiphop" />
  <label>Hip Hop</label>

  <input type="checkbox" name="genres" value="other" />
  <label>Other</label>

  • Dropdowns: Allow users to select one option from a menu

      <select name="lang">
    <option value="python">Python</option>
    <option value="javascript">JavaScript</option>
    <option value="ruby">Ruby</option>
  </select>

  • Textareas: Scrollable multi-line text boxes for longer text

    <label>Tell us about yourself:</label>
<textarea name="about-me"></textarea>

  • Click here to see descriptions of form elements.

Block vs Inline Elements#

Display Types#

All elements have a default display type.

Two basic display types are block and inline. There is also another display type called inline-block.

Block Elements#

  • Start on a new line

  • Take up the whole width of containing element

Block Element

The following elements are display: block by default:

  • Paragraph (<p>)

  • Headings (<h1>, <h2>, <h3>, etc.)

  • Table (<table>)

  • Unordered list (<ul>), ordered list (<ol>), list item (<li>)

Inline Elements#

  • Sit on a line together

  • Don’t break the flow of your document

Inline Element

The following elements are display: inline by default:

  • Hyperlink (<a>)

  • Image (<img>)

  • Button (<button>)

  • Label (<label>)

Inline-block elements#

  • inline-block elements behave like block elements, except that they do allow other elements to sit to their left and right.

  • So they will be placed on the same line as adjacent content.

  • No elements are display: inline-block by default.

Generic elements: div and span#

  • div is a generic block element (like a box/container)

  • span is a generic inline element

  • div and span can help you apply styling/functionality to certain parts of the page

     <div class="window-body">
  <p>
    Your order has been placed! To change your order,
    please call us at <span class="phone">(555) 123-FAST</span>.
  </p>
</div>

CSS#

Basic CSS syntax#

CSS is used for the styling and layout of a webpage.

CSS is made up of selectors, properties, and values.

selector {
  property: value;
}

Here we’re selecting all <p> elements and styling them.

p {
  color: red;
}

Comments in CSS are done like this:

p {
  color: red;   /* This is a comment */
}

Where do you write CSS?#

Inline Styling#

  • You can write CSS in the body of HTML documents, within element tags

    <button style="color: blue; font-size: 12px"> Click Me </button>

  • This CSS applies to only that individual element. Selectors are not used

  • Don’t use this for the majority of styling, only when needed for special cases

Internal CSS#

  • CSS can also go inside a <style> </style> tag in the head of HTML documents

    <html lang="en">
<head>
  <style>
    h1 {
      background-color: blue;
    }
  </style>
</head>

  • This CSS applies to the whole page

  • Convenient for small amounts of CSS, or when learning

Separate CSS Files (External CSS)#

  • Usually, best practice is to put CSS in a separate file and link to it from HTML

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

  • These files are called stylesheets

  • Helpful if CSS is for more than one page, or if you have a lot of CSS

CSS Selectors#

Selectors say “which HTML elements do we want to style?”

selector {
  property: value;
}

Tag Names as Selectors#

Use a tag-name if you want to target all elements of a certain type.

h1 {
  font-family: sans-serif;
}

<h1>This heading is sans-serif</h1>

IDs as Selectors#

Use an #id if you want to target one element.

#slogan {
  font-family: monospace;
}

<p id="slogan">
  You miss all the shots you don't take.
</p>

Classes as Selectors#

If we need to create a group of elements that aren’t of the same type, we can give them all the same class attribute

Then use a .class to target elements by class:

.urgent {
  color: red;
}

<h1 class="urgent">Urgent!</h1>
<p class="urgent">
  Your order has shipped!
</p>

To put two classes on one element: include each, space separated, in quotes.

.urgent {
  color: red;
}
.outlined {
  border: 2px solid black;
}

<p class="urgent outlined">
  Your order has shipped!
</p>

Universal Selector#

* selects all elements:

* {
  font-family: sans-serif;
}

Combining Selectors#

/* select all paras that are urgent */
p.urgent {
  color: red;
}

<p class="urgent">
  This urgent paragraph will be red!
</p>

<h2 class="urgent">This will not be red.</h2>

Descendant Selector#

This selects elements with class “urgent” that are anywhere inside a paragraph:

p .urgent {
  color: red;
}

<p>
  This is a regular paragraph that has an
  <span class="urgent">urgent</span>
  section within it.
</p>

In the above example, only the word “urgent” will be red.

Descendant selectors work even if it’s not an immediate child:

div a {
  color: red;
}

<div>
  <p>
    This <a>link will be styled red</a> even though
    it's not an immediate child of the div.
  </p>
</div>

The immediate child selector

If you do want to only select immediate children, use a > like this:

p > a {
  color: red;
}

CSS Properties#

“Properties” are the things you can set (color, font, etc):

selector {
  property: value;
}

Text and Font Properties#

Text Properties

  • text-align (left/center/right justify)

  • text-decoration (underline style)

  • line-height (height of text lines)

Font Properties

  • color (font color, not background color)

  • font-family (font name)

  • font-size

  • font-style (italics or normal)

  • font-weight (light, bold, etc)

div {
  text-align: center;
  color: blue;
  font-weight: bold;
  font-family: serif;
  font-size: 16px;
  background-color: yellow;
}

Centered Text

Background Properties#

You can set background colors:

body {
    background-color: green;
}

Or background images:

body {
    background-image: url("/static/img/bg-image.jpg");
}

Floats#

  • The float property places an element on the left or right side of its container, and allows text and inline elements to wrap around it.

    float-example

  • The clear property can be used to prevent text or inline elements from wrapping around an element.

CSS Values#

Units for Numeric Values#

  • pixels (px): correspond to dot on screen, best for things that are always the same size

    .boxed {
  border: 1px solid black;
}

  • percentages (%): relative to the size of its parent element

    form {
  width: 50%;   /* half as wide as page */
}

  • ems (em): Width of letter “M” in font. Good for making things relative to text size.

  • viewport height (vh): Relative to 1% of height of the viewport (screen). Can be useful for pages that scroll.

Color Values#

Referencing colors can be done in three primary ways:

p {
    color: red;            /* or */
    color: #ff0000;        /* or */
    color: rgb(255, 0, 0);
}

Shorthand Values#

Border shorthand:

.outlined {
  border-width: 2px;
  border-style: solid;
  border-color: black;
}

.outlined {
  border: 2px solid black;
}

The border shorthand is strongly recommended, as border-style is required for the border to even be visible. The shorthand makes it harder to forget this important piece.

Different margins:

div {
  margin-top: 10px;        /* the top margin is 10px  */
  margin-right: 2px;      /* the right margin is 2px  */
  margin-bottom: 5px;     /* the bottom margin is 5px  */
  margin-left: 2px;       /* the left margin is 2px  */
}

Same margin all around:

div {
  margin: 2px;              /* all have 2px margin */
}

More margin shorthands

div {
    margin: 5px 2px;          /* top/bottom=5px | right/left=2px */
}

div {
    margin: 2px 4px 6px 8px;  /* top | right | bottom | left  */
}

A good mnemonic for the order of top -> right -> bottom -> left in things like this is “trouble” for TRBL. Others may find it easy to remember as “start at the top and go clockwise.”

The Box Model#

The Box Model#

In CSS, the “box model” refers to a 4 part box that wraps around every element.

css-box-model

  • margin: The white space that separates one element from another

  • border: Border around content (and padding, if any)

  • padding: Buffer space between the content of an element and its border

  • The width and height properties determine the size of an element’s content area.

  • But the full size of an element on the page includes the margin, border, and padding.

#my-div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

320 px (width) + 5 px (left border) + 5 px (right border) + 10 px (left padding) + 10 px (right padding) = 350 px.

box-model-example

Looking Ahead#

Resources#