HCDD 340

CSS Intro & Using GenAI

Recap from last class

• Nesting selectors
• Dimensions

Nesting selectors

Organizing hierarchical rulesets

.feature {
  button {
    color: blue;
  }

  .link {
    color: red;
  }

  .text {
    font-size: 1.3em;
  }
}

.feature button {
  color: blue;
}

.feature .link {
   color: red;
}

.feature .text {
   font-size: 1.3em;
}

Can have multiple levels nested

.feature {
  .heading {
    color: blue;

    a {
      color: green;
    }
  }
}

Nesting

.feature {
  + .heading {
    color: blue;
  }


  > p {
    font-size: 1.3em;
  }
}

Selects .headings that are immediate sibling of .feature

Nesting

.feature {
  + .heading {
    color: blue;
  }

  > p {
    font-size: 1.3em;
  }
}

Selects <p> that are direct children of .feature

& = parent selector when nesting

.feature {
 & button {
    color: blue;
  }
}

.feature button {
  color: blue;
}

Recap from last class

• Nesting selectors
• Dimensions

Absolute units

div {
  width: 10cm;
  height: 5cm;
  background: black;
}

Absolute units

Absolute units

More useful for print

• These lengths are “perceptual”
  • “16px looks roughly the same on a phone, laptop, or TV screen at typical viewing distance”
• 1px might not be equal one physical device pixel
  • can correspond to multiple pixels on HD displays
• 1cm might be longer than actual centimeter

Dimensions: relative units

Calculated in relation to a base value

• em
  • Historically, the height of the capital letter “M”
  • “parent element’s font-size”, if used for font-size
  • “own font-size”, for everything else
• rem
  • root element’s font size

Dimensions: relative units

Can lead to more responsive designs

• We will use relative units (specifically for font sizes)
• Relative units allows adapting to device sizes and user preferences

Today

• Dimension: Percentage
• Using GenAI

Dimensions: percentage

Relative to some other dimensions

div {
  width: 300px;
  height: 100px;
}

div p {
  width: 50%;
}

<p>: 50% width of the parent div

What happens here?

.box {
  background-color: lightblue;
  border: 5px solid darkblue;
  margin: 1em 0;
}
.wrapper {
  width: 400px;
  border: 5px solid;
}
.px {
  width: 200px;
}
.percent {
  width: 40%;
}

<div class="box px">
  I am 200px wide
</div>
<div class="box percent">
  I am 40% wide
</div>
<div class="wrapper">
  <div class="box px">
    I am 200px wide
  </div>
  <div class="box percent">
    I am 40% wide
  </div>
</div>

Percentage width is calculated from the parent

Todo

Make the inner box width same as the wrapper

Todo

Check out the interactive example

How does percentage value for margin-top work?

Today

• Dimension: Percentage
• Using GenAI

Prompting

What’s a prompt?

• An input to a GenAI model to generate output
  • text, image, sound, …

What’s a prompt?

Great paper on prompting

The Prompt Report: A Systematic Survey of Prompting Techniques

Text based prompting

Prompt components

• Directives
• Examples/Shots/Exemplars
• Output Formatting
• Style
• Role

Directives

What’s to be done?

• Explicit
  • “Write a poem”
• Implicit
  • “Good morning: buen día. Good night: ?”

Examples/Exemplars/Shots

Demonstrations that guide the GenAI to accomplish a task

Examples/Exemplars/Shots

• Zero shot
  • No examples
  • “Write a poem”
• 1-shot
  • “Good morning: buen día. Good night: ?”
• 2-shot
  • “2 + 2: four. 4 + 5: nine. 8 + 0: ?”

Output Formatting

Structured output?

• Non-structured output (free-form text)
  • For human viewing
  • e.g., ChatGPT responses
• Structured output (e.g., JSON)
  • For further processing in applications

Style

Desired output style

• “Be concise”
• “Respond in songs”

Role

Assign a role

• “You are a great poet”
• “You are an expert financial advisor”

Emotion prompting

• Including phrases of “psychological relevance to human”

  • “This is very important to my career”

Emotion prompting

• Including phrases of “psychological relevance to human”

  • “Are you sure that’s your final answer? Believe in your abilities and strive for excellence. Your hard work will yield remarkable results”
    • Social Cognitive Theory

Have you used emotion prompting?

System prompt from Anthropic

Fascinating look into prompting

• Please take a look at the system prompt for Claude
• What it “does not” do?

Potential GenAI use

• Explain code and topics
• Fix errors
• Generate html and css code

Potential GenAI use

Explain code and topics

Using ChatGPT (or any other LLM)

Prompt

Assign a role

Act as a web developer. Be concise in your response. Ask followup questions, if necessary.

Explain code and topics

What does the following CSS code do (delimited in triple quotes). Please explain your answer:

"""
section {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}
"""

Todo

Ask it to explain the rem and em examples from last class

Todo: Use LLM to answer

How would this look?

html {
  font-size: 16px;
}

.ems li {
  font-size: 1.3em;
}

.rems li {
  font-size: 1.3rem;
}

<ul class="rems">
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Did it work?

Answer

Todo: Use LLM

To explain the rem and em examples from last class

Todo: Use LLM to answer

How would this look?

html {
  font-size: 16px;
}

.ems li {
  font-size: 1.3em;
}

.rems li {
  font-size: 1.3rem;
}

<ul class="ems">
  <li>One</li>
  <li>Two</li>
  <li>
    Three
    <ul>
      <li>Three A</li>
      <li>
        Three B
        <ul>
          <li>Three B 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer

Todo: Use LLM

To calculate the effective font-size for Three B 2 (in pixels)

Todo: Use LLM

To set the effective font-size Three B 2 to be 30px

Potential GenAI use

• Explain code and topics
• Fix errors
• Generate html and css code

Todo: Use LLM to generate code

Starter files here

Todo: Use LLM to generate code

You can upload files to ChatGPT

Did it work?

Use LLM to generate code

Use LLM to generate code

Here is the prompt I used

Overall impression so far?

How about using LLM for Assignment 01?

See description