# Session 03a - CSS Example

Harvard Extension School
Spring 2022

Course Web Site: https://cscie12.dce.harvard.edu/

### Topics

1. CSS font properties
2. CSS Values and Units
3. Box Model or Block Model
4. Working an Example

Session 03a - CSS Example, slide1
CSS font properties, slide2
font-family, slide3
font-style, slide4
font-variant and font-weight, slide5
font-size, slide6
Font Sizes: Relative vs. Absolute, slide7
font, slide8
text properties, slide9
CSS Values and Units, slide10
Color Units, slide11
Colorpicker, slide12
Box Model or Block Model, slide13
margin, padding, border, slide14
border-style, slide15
TRBL for padding and margin shorthand, slide16
Working an Example, slide17
What do we see as the underlying markup?, slide18
Here's some text to start us out, slide19

Presentation contains 19 slides

- img
- img
- img
- img
- img

## CSS font properties

- font-family
- font-style
- font-variant
- font-weight
- font-size
- font

## font-family

    body {
      font-family: garamond, times, serif;
    }

Example 3a.1 - font properties - Example 3a.1<div style="font-family: garamond, times, serif;">Garamond, Times, or serif (generic family)</div><div style="font-family: calibri, arial, helvetica, sans-serif;">Calibri, Arial, Helvetica or sans-serif (generic family)</div><div style="font-family: lucida console, courier, monospace;">Lucida Console, Courier or monospace (generic family)</div><div style="font-family: fantasy;">Fantasy (generic family)</div><div style="font-family: cursive;">Cursive (generic family)</div>

- Markup
- Display
- Screenshot

     <div style="font-family: garamond, times, serif;">Garamond, Times, or serif (generic family)
     </div>
     <div style="font-family: calibri, arial, helvetica, sans-serif;">Calibri, Arial, Helvetica or sans-serif (generic family)
     </div>
     <div style="font-family: lucida console, courier, monospace;">Lucida Console, Courier or monospace (generic family)
     </div>
     <div style="font-family: fantasy;">Fantasy (generic family)
     </div>
     <div style="font-family: cursive;">Cursive (generic family)
     </div>

Garamond, Times, or serif (generic family)
Calibri, Arial, Helvetica or sans-serif (generic family)
Lucida Console, Courier or monospace (generic family)
Fantasy (generic family)
Cursive (generic family)

## font-style

    em {
      font-style: italic;
    }

Example 3a.2 - font-style - Example 3a.2<div style="font-style: normal;">Normal font-style</div><div style="font-style: italic;">Italic font-style</div><div style="font-style: oblique;">Oblique font-style</div>

- Markup
- Display

     <div style="font-style: normal;">Normal font-style
     </div>
     <div style="font-style: italic;">Italic font-style
     </div>
     <div style="font-style: oblique;">Oblique font-style
     </div>

Normal font-style
Italic font-style
Oblique font-style

## font-variant and font-weight

### font-variant

Example 3a.3 - font-weight and font-variant - Example 3a.3<div style="font-variant: small-caps;">This should be rendered in small-caps. <div style="font-variant: normal;">Here we revert to "normal". </div></div>

- Markup
- Display

     <div style="font-variant: small-caps;">This should be rendered in small-caps.
       <div style="font-variant: normal;">Here we revert to "normal".
       </div>
     </div>

This should be rendered in small-caps.
Here we revert to "normal".

### font-weight

    strong {
      font-weight: bold;
    }

values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Example 3a.4 - font-weight - Example 3a.4<div> font-weight can be used to make <span style="font-weight: bold">text appear bold</span>. </div>

- Markup
- Display

     <div>font-weight can be used to make
       <span style="font-weight: bold">text appear bold   </span>.
     </div>

font-weight can be used to make text appear bold.

## font-size

Example 3a.5 - font-size - Example 3a.5<div style="font-size: 8pt;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div style="font-size: 120%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div><div style="font-size: 1.5em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.</div>

- Markup
- Display
- Screenshot

     <div style="font-size: 8pt;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
     </div>
     <div style="font-size: 120%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
     </div>
     <div style="font-size: 1.5em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
     </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.

## Font Sizes: Relative vs. Absolute

As a general guideline with CSS, relative measurements are better than absolute measurements.

- Relative
  - Relative to UA settings:
    `xx-small | x-small | small | medium | large | x-large | xx-large`
  - Relative to context:
    `larger | smaller`
  - Percentage (%)
  - `em` units - relative to the inherited font size
  - `rem` - relative to the html em (root em)
    For typical default settings, 1rem = 16px
- Absolute
  - "px" sizes
  - "pt" sizes (8pt, 10pt, 12pt)

## font

In CSS, there are various shorthand properties; these allow you to define several properties in a single place.

The font shorthand property allows you to set:
`[font-style | font-variant | font-weight ]? font-size[/line-height]? font-family`

Example 3a.6 - font shorthand - Example 3a.6<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </div>body { font: normal normal normal x-large/200% arial, helvetica, sans-serif; }

- Markup
- Style
- Screenshot

     <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
     </div>

In `style` element (`<style>`) within `head` element:

    body {
          font: normal normal normal x-large/200% arial, helvetica, sans-serif;
    }

## text properties

- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- text-align
- text-indent
- line-height

Align blocks of text left, right, center, and justified.

Example 3a.7 - text properties - Example 3a.7<div style="margin-left: 30%; margin-right: 30%;"><p style="text-align: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><p style="text-align: center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><p style="text-align: right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><p style="text-align: justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p></div>

- Markup
- Display
- Screenshot

     <div style="margin-left: 30%; margin-right: 30%;">
       <p style="text-align: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
       </p>
       <p style="text-align: center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
       </p>
       <p style="text-align: right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
       </p>
       <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
       </p>
     </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.

## CSS Values and Units

- Length
  rem, em, pt, ex, mm, cm, in, px
  e.g. `1.0em`
- Percentage
  e.g.`10%`
- URL
  url(url goes here)
  e.g. `url('../images/banner.png')`
- Color
  name, hexadecimal, rgb value
  e.g.
  - name
    - `aqua`
  - hexadecimal
    - `#ffffdd`
    - `#60ae9f`
  - rgb (percent or numeric)
    - `rgb(24,50,255)`
    - `rgb(5%,20%,75%)`

## Color Units

Wikipedia Web Colors

### Name

As defined in HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

### RGB Color Space

256 colors in each channel (Red, Green, Blue). Values can be

- decimal numbers (0 to 255)
- hexadecimal numbers (00 to ff)
- percentages (0 to 100%)

The following are all equivalent ways of defining a shade of orange:

rgb(100%,66%,33%) rgb(255,168,84) #ffa854 |

Example 3a.8 - Example 3a.8<div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(100%,66%,33%) </div><div style="background-color: #ffa854; padding: 1em; margin: 1em; "> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>#ffa854 </div><div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br/>rgb(255,168,84) </div>

- Markup
- Display

     <div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       <br/>
    rgb(100%,66%,33%)
     </div>
     <div style="background-color: #ffa854; padding: 1em; margin: 1em; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       <br/>
    #ffa854
     </div>
     <div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       <br/>
    rgb(255,168,84)
     </div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
rgb(100%,66%,33%)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
#ffa854
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
rgb(255,168,84)

## Colorpicker

- HTML Color Picker from W3Schools
- DIY - `<input type="color" />`
Color Picker

Select Color:
Hex value:

## Box Model or Block Model

- margin
- border
- padding
- content

### A more detailed look:

Image from Cascading Style Sheets: The Definitive Guide, 3rd ed by Eric Meyer, published by O'Reilly

### In your browser

## margin, padding, border

- margin
  - margin-top
  - margin-right
  - margin-bottom
  - margin-left
  - margin (shorthand)
- padding
  - padding-top
  - padding-right
  - padding-bottom
  - padding-left
  - padding (shorthand)
- border
  - border-top-width
  - border-right-width
  - border-bottom-width
  - border-left-width
  - border-width
  - border-color
  - border-style
  - border-top
  - border-right
  - border-bottom
  - border-left
  - border

## border-style

Example 3a.9 - Border Styles - Example 3a.9<h4>Dotted</h4><p class="border1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas. </p><h4>Dashed</h4><p class="border2"> Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor.</p><h4>Outset</h4><p class="border3"> Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit dui ac massa. </p><h4>Solid</h4><p class="border4"> Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor. </p><h4>Double</h4><p class="border5"> Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper nisl. Pellentesque tincidunt. </p><h4>Groove</h4><p class="border6"> Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam. </p><h4>Ridge</h4><p class="border7"> Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa. </p><h4>Inset</h4><p class="border8"> Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque. </p>body { font-family: tahoma,arial,sans-serif; font-size: small; } p { margin: 1em; padding: 1em; width: 50%; } .border1 { border-style: dotted; border-color: #990000; border-width: thin; /* equivalent to border: thin dotted #900; */ } .border2 { border-style: dashed; border-color: #009900; border-width: medium; /* equivalent to border: medium dashed #090; */} .border3 { border-style: outset; border-color: #000099; border-width: thick; /* equivalent to border: thick outset #009; */} .border4 { border-style: dotted; border-color: #990000; border-width: thin; /* equivalent to border: 3px solid #999; */} .border5 { border-style: double; border-color: #000000; border-width: 5px; /* equivalent to border: 5px double #000; */} .border6 { border-style: groove; border-color: #009999; border-width: 10px; /* equivalent to border: 10px groove #009; */} .border7 { border-style: ridge; border-color: #999900; border-width: 15px; /* equivalent to border: 15px ridge #990; */} .border8 { border-style: inset; border-color: #990000; border-width: 20px; /* equivalent to border: 20px inset #900; */}

- Markup
- Style
- Screenshot

     <h4>Dotted </h4>
     <p class="border1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas.
     </p>
     <h4>Dashed </h4>
     <p class="border2">Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor.
     </p>
     <h4>Outset </h4>
     <p class="border3">Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit dui ac massa.
     </p>
     <h4>Solid </h4>
     <p class="border4">Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor.
     </p>
     <h4>Double </h4>
     <p class="border5">Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper nisl. Pellentesque tincidunt.
     </p>
     <h4>Groove </h4>
     <p class="border6">Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam.
     </p>
     <h4>Ridge </h4>
     <p class="border7">Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa.
     </p>
     <h4>Inset </h4>
     <p class="border8">Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque.
     </p>

In `style` element (`<style>`) within `head` element:

    body {
    font-family: tahoma,arial,sans-serif;
    font-size: small;
    }
    p {
    margin: 1em;
    padding: 1em;
    width: 50%;
    }
    .border1 {
      border-style: dotted;
      border-color: #990000;
      border-width: thin;
      /* equivalent to
        border: thin dotted #900;
      */
    }
    .border2 {
      border-style: dashed;
      border-color: #009900;
      border-width: medium;
      /* equivalent to
        border: medium dashed #090;
      */}
    .border3 {
      border-style: outset;
      border-color: #000099;
      border-width: thick;
      /* equivalent to
        border: thick outset #009;
      */}
    .border4 {
      border-style: dotted;
      border-color: #990000;
      border-width: thin;
      /* equivalent to
        border: 3px solid #999;
      */}
    .border5 {
      border-style: double;
      border-color: #000000;
      border-width: 5px;
      /* equivalent to
        border: 5px double #000;
      */}
    .border6 {
      border-style: groove;
      border-color: #009999;
      border-width: 10px;
      /* equivalent to
        border: 10px groove #009;
      */}
    .border7 {
      border-style: ridge;
      border-color: #999900;
      border-width: 15px;
      /* equivalent to
        border: 15px ridge #990;
      */}
    .border8 {
      border-style: inset;
      border-color: #990000;
      border-width: 20px;
      /* equivalent to
        border: 20px inset #900;
      */}

## TRBL for padding and margin shorthand

Stay out of "TRBL" (top right bottom left) for padding and margin shorthand.

Values that are present are used to fill in for values that are not:

- `padding: 1px 2px 3px 4px`
  T = 1px; R = 2px; B = 3px; L = 4px
- `padding: 1px 2px 3px`
  T = 1px; R = L = 2px; B = 3px;
- `padding: 1px 2px`
  T = B = 1px; R = L = 2px;
- `padding: 1px`
  T = R = B = L = 1px

## Working an Example

Let's create something like this:

## What do we see as the underlying markup?

## Here's some text to start us out

CSCI E-12 Main Topics Hypertext Markup Language (HTML) HTML is the Web’s core language for creating content for everyone to use anywhere. The World Wide Web's markup language has always been HTML. HTML was originally designed as a language for semantically describing scientific documents, but its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents. Cascading Style Sheets (CSS) Style sheets describe how documents are presented on screens, in print, or perhaps how they are pronounced. Cascading Style Sheets (CSS) is a style sheet mechanism that has been specifically developed to meet the needs of Web designers and users. JavaScript JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them. Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation. Created for CSCI E-12, taught by David Heitmeyer at Harvard Extension School